Welcome to the MangleBracket tour and tutorial

These paragraphs have the style “intro” on them. In Word, that makes them have small italicized text but MangleBracket doesn’t care about any of that. As far as MangleBracket is concerned you can render an “intro” paragraph any way you like.

In Code view, click this paragraph (or in Preview double-click it). The Intro style should be selected in the Styles pane at left. That gives you options for what kind of HTML element to use and what CSS class and inline style you want. Try adding inline style of “color:red”. Now you should see the inline style in Code view, and the text should actually be red in Preview.


Basic Tags: It does what you expect

Paragraphs become P, lists become UL or OL, links become A. It knows you want cellspacing=0 on your tables. It knows you use CSS and that you want to discard specific fonts and colors. Trust MangleBracket.

Inferred Tags: It's smart

MangleBracket recovers the appropriate HTML element from the applied style. A paragraph with a bottom border becomes P + HR. An indented paragraph becomes BLOCKQUOTE. A paragraph in a large font becomes H1. If the first row of your table is a different style, it's assumed to be a TH row.

Advanced Mapping: It's powerful

Every style class, whether it's a named style, an automatic style, or a MangleBracket pseudo style, can be mapped to any element, with an optional CSS class and/or inline style. In addition, you can map it to two special elements called (Contents) and (Nothing). Contents strips off the containing tags but renders the contents, and Nothing omits the entire element and all its children.

Output formatting: XSLT can't do this

MangleBracket provides unprecedented control over your HTML text output. You can indent with 2 spaces or 4 spaces or tabs, you can control the indentation style, you can output either HTML or XHTML, and most importantly you can choose your content encoding with a simple switch of a radio button. UTF-8, Latin-1 or ASCII, anything out of range will be encoded with an entity. This means no more unexpected ¿#å debris! To see some examples, check out the Character Encoding section below.

Live preview: It's all right there

As you make changes to the settings, your code updates immediately. Switch over to html view and see your current html rendered in an IFRAME. You can even paste in your site's CSS, which has zero effect on the generated output, but it makes your html view look like it will actually look. That way when you share a link, whoever is reviewing it won't say but our links are supposed to be orange!

Some Default Mappings

Paragraph P
Paragraph with bottom border P + HR
Paragraph with top border HR + P
Empty paragraph with any border HR
Paragraph in large font H1
Paragraph with style “Heading 2” H2
Paragraph with left margin BLOCKQUOTE
Bookmark A[name]
Hyperlink A[href]
Image IMG[src]
Bold text B
Italic text I
Numbered list OL
Bulleted list UL
Line break within a paragraph BR


This is a link to Google.com, and this is a link to Amazon.com. Go ahead and click them in Preview, they work. Now go to the Links pane and select one of them. You can modify the href and optionally make them open in a new window. Make Amazon link to barnesandnoble.com.

You may notice that Word automatically puts a span with style “underline” inside the links. That’s not so great, so click inside one from Code view and notice the “Internet link” style highlights. Go to Render As and choose Contents.

Character Encoding

To see how the different encoding options affect your document, go to the bottom of the HTML pane where it says Output Options: Encoding. Try switching from UTF-8 to Latin-1 to ASCII, and observe how the symbols below change.


This option is a no-op. The already UTF-8 encoded characters from your document file are passed through as-is. Additionally, charset=utf-8 is added to the content-type header.

Some examples are the bullet (•), the black star (★) and the trademark symbol™. If you’ve selected UTF-8 encoding you should see these symbols directly, otherwise you should see them with their ampersand html entities.


Also known as “ISO-8859-1”, this is a single-byte encoding of the common Western European characters. It includes all the ASCII characters, plus some accented characters like enye (ñ) and accented A (á), and some symbols such as the copyright symbol (©) and Spanish starting question mark (¿). Anything not in this character set, such as the symbols in the preceding paragraph, will be encoded as HTML entities.

One major drawback of this encoding is it doesn’t include “curly” quotes, so if your document is heavy on those you’ll see a lot of “ and ”. In this case you could select the “Straighten curly quotes” option to substitute ASCII quotes.


This is a basic single-byte seven-bit encoding of characters up through 127. Letters, numbers and basic punctuation will be encoded as a single byte, while anything else, such as an em dash (—), a Yen sign (¥), or a Spanish ¡begin exclamation! will be encoded with an entity.

Another exercise

HTML code occurs in a few places throughout this document. Let’s style it.

Click or double click “HTML code” above or anywhere else in this document, which selects its style in the Styles pane. Select Render As… SPAN, with a class of “code” after the dot.

Now switch to the CSS pane and paste this in:
.code { font: bold 13px Courier; color: green; }

In Preview they should actually show up as green monospaced text. Of course if you wanted to be more semantic, you could say Render As… CODE, and paste this in your CSS:
code { font: bold 13px Courier; color: green; }

Getting the HTML

When you’re done tweaking you can either:

  1. Click on Code view, Ctrl-A to select all and Ctrl-C to copy, or
  2. Use the Get plaintext link in the lower right. That opens the plain HTML text in a new tab. Or use the Download link to prompt your browser to save it.