<h1>Welcome to the MangleBracket tour and tutorial</h1>
<p>
   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.
</p>
<p>
   In Code view, click this paragraph (or in Preview double-click it). The <b>Intro</b> 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.
</p>
<h2>Features</h2>
<h3><b>Basic Tags:</b> It does what you expect</h3>
<p>
   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.
</p>
<h3><b>Inferred Tags:</b> It's smart</h3>
<p>
   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.
</p>
<h3><b>Advanced Mapping:</b> It's powerful</h3>
<p>
   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.
</p>
<h3><b>Output formatting:</b> XSLT can't do <i>this</i></h3>
<p>
   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 
   <a href="#encoding"><u>Character Encoding</u></a> section below.
</p>
<h3><b>Live preview:</b> It's all right there</h3>
<p>
   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 <i>but our links are supposed 
   to be orange!</i>
</p>
<h2>Some Default Mappings</h2>
<table>
   <tr>
      <td>Paragraph</td>
      <td>P</td>
   </tr>
   <tr>
      <td>Paragraph with bottom border</td>
      <td>P + HR</td>
   </tr>
   <tr>
      <td>Paragraph with top border</td>
      <td>HR + P</td>
   </tr>
   <tr>
      <td>Empty paragraph with any border</td>
      <td>HR</td>
   </tr>
   <tr>
      <td>Paragraph in large font</td>
      <td>H1</td>
   </tr>
   <tr>
      <td>Paragraph with style “Heading 2”</td>
      <td>H2</td>
   </tr>
   <tr>
      <td>Paragraph with left margin</td>
      <td>BLOCKQUOTE</td>
   </tr>
   <tr>
      <td>Bookmark</td>
      <td>A[name]</td>
   </tr>
   <tr>
      <td>Hyperlink</td>
      <td>A[href]</td>
   </tr>
   <tr>
      <td>Image</td>
      <td>IMG[src]</td>
   </tr>
   <tr>
      <td>Bold text</td>
      <td>B</td>
   </tr>
   <tr>
      <td>Italic text</td>
      <td>I</td>
   </tr>
   <tr>
      <td>Numbered list</td>
      <td>OL</td>
   </tr>
   <tr>
      <td>Bulleted list</td>
      <td>UL</td>
   </tr>
   <tr>
      <td>Line break within a paragraph</td>
      <td>BR</td>
   </tr>
</table>
<h2>Links</h2>
<p>
   This is a link to <a href="http://www.google.com/"><u>Google.com</u></a>, and this is a link to 
   <a href="http://www.amazon.com/"><u>Amazon.com</u></a>. 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.
</p>
<p>
   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 <i>Contents</i>. 
</p>
<h2><a name="encoding"></a>Character Encoding</h2>
<p>
   To see how the different encoding options affect your document, go to the bottom of the HTML pane 
   where it says <b>Output Options: Encoding</b>. Try switching from UTF-8 to Latin-1 to ASCII, and 
   observe how the symbols below change.
</p>
<h3>UTF-8</h3>
<p>
   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.
</p>
<p>
   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.
</p>
<h3>Latin-1</h3>
<p>
   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.
</p>
<p>
   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 &amp;ldquo; and &amp;rdquo;. In this case you could select the 
   “Straighten curly quotes” option to substitute ASCII quotes.
</p>
<h3>ASCII</h3>
<p>
   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.
</p>
<h2>Another exercise</h2>
<p>HTML code occurs in a few places throughout this document. Let’s style it.</p>
<p>
   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.
</p>
<p>
   Now switch to the CSS pane and paste this in:<br>
   .code { font: bold 13px Courier; color: green; }
</p>
<p>
   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:<br>
   code { font: bold 13px Courier; color: green; }
</p>
<h2>Getting the HTML</h2>
<p>When you’re done tweaking you can either:</p>
<ol>
   <li>Click on Code view, Ctrl-A to select all and Ctrl-C to copy, or</li>
   <li>
      Use the <b>Get plaintext</b> 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.
   </li>
</ol>