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.
Features
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
Links
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.
UTF-8
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 contenttype 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.
Latin-1
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.
ASCII
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:

Click on Code view, Ctrl-A to select all and Ctrl-C to copy, or

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.