The tooltip!

What Textile Does

• Replace single and double primes (' and ") used as quotation marks with HTML entities for opening and closing quotation marks (‘’ and “”) in readable text, while leaving untouched the primes required within HTML tags.
• Replace double hyphens (--) with an em-dash (—) entity.
• Replace single hyphens surrounded by spaces with an en-dash (–) entity.
• Replace triplets of periods (...) with an ellipsis (…) entity.
• Convert many nonstandard characters (ŸúߊπŒ) to browser-safe entities corresponding to keyboard input.
• Apply block- and phrase-level structural tags automatically and at the discretion of the writer via quick tags.
• Allow the quick creation of simple and complex tables.
• Allow the simple application of style, class, id, language and alignment attributes to elements.
• Create hyperlinks and insert images via quick tags.
• Define acronyms via quick tags.
• Wrap an tag around runs of three or more capital letters automatically.
• Convert (TM), (R), and (C) to ™, ®, and ©.
• Convert the letter x to a dimension sign: 2x4 to 2×4 and 8x10 to 8×10.

Headers

To make an entire paragraph into a Header, place “hn. ” at its beginning, where n is a number from 1–6.

Examples:

h1. Header 1

h2. Header 2

h3. Header 3

Will become:

<h1>Header 1</h1>

<h2>Header 2</h2>

<h3>Header 3</h3>

Which, when rendered by a browser, will appear like this:

Header 1

Header 2

Header 3

NB: Unmodified paragraphs will be wrapped in <p> tags.

Block Quotes

To make an entire paragraph into a block quotation, place “bq. ” before it.

Example

Any old text.

bq. A block quotation.

Any old text.

Will become:

Any old text.

A block quotation.

Any old text.

Which, when rendered by a browser, will appear like this:

Any old text.

A block quotation.

Any old text.

NB: Unmodified paragraphs will be wrapped in <p> tags.

Footnotes

Numeric references within text to footnotes appear between square brackets:

This is covered elsewhere[1].

becomes

This is covered elsewhere^{<a href="#fn1">1</a>}

which is rendered

This is covered elsewhere¹.

* * *

To create the footnote that corresponds to its reference within the text, begin a new paragraph with fn and the footnote’s number, followed by a dot and a space:

fn1. Down here, in fact.

becomes

<p id="fn1">¹ Down here, in fact.</p>

which is rendered

¹ Down here, in fact.

Numeric Lists

To make a numbered list, place each item in its own paragraph, preceded by “# ”.

Example

# A first item
# A second item
# A third item
# A fourth item

Will become:

<ol>
<li>A first item</li>
<li>A second item</li>
<li>A third item</li>
<li>A fourth item</li>
</ol>

Which, when rendered by a browser, will appear like this:

1. A first item


2. A second item


3. A third item


4. A fourth item

NB: Unmodified paragraphs will be wrapped in <p> tags.

Bulleted Lists

To make a bulleted (point form) list, place each item in its own paragraph, preceded by “* “.

Example

  * A first item
  * A second item
  * A third item
  * A fourth item

Will become:

<ul>
<li>A first item</li>
<li>A second item</li>
<li>A third item</li>
<li>A fourth item</li>
</ul>

Which, when rendered by a browser, will appear like this:

• A first item
• A second item
• A third item
• A fourth item

NB: Unmodified paragraphs will be wrapped in <p> tags.

Emphasis

Use _underscores_ around text to be emphasized.

The <em> HTML tag is applied:

_a phrase_  →  <em>a phrase</em> → a phrase

If the text is not meant to have structural emphasis, but simply to be styled in italic (e.g., a phrase in a foreign language) use double underscores:

__a phrase__ → <i>a phrase</i> → a phrase

NB: quick tags must open and close within a single paragraph to produce valid markup.

Strong Emphasis

Use *asterisks* for text to be strongly emphasized.

The <strong> HTML tag is applied:

a phrase → <strong>a phrase</strong> → a phrase

If the text is not meant to have structural emphasis, but simply to be styled in bold (e.g., as a design element) use double asterisks:

**a phrase** → <b>a phrase</b> → a phrase

NB: quick tags must open and close within a single paragraph to produce valid markup.

Cite

Use ??double question marks?? around citations, such as the title of a work being cited.

The <cite> HTML tag is applied:

Nabokov’s ??Pnin?? → Nabokov’s <cite>Pnin</cite> → Nabokov’s Pnin

NB: quick tags must open and close within a single paragraph to produce valid markup.

Deleted Text

Use -hyphens- around text that has been deleted. This is useful in marking changes from one version of a document to the next.

The <del> HTML tag is applied:

-a phrase- → <del>a phrase</del> → a phrase

NB: quick tags must open and close within a single paragraph to produce valid markup.

Inserted Text

Use +pluses+ around text that has been inserted. This is useful in marking changes from one version of a document to the next.

The <ins> HTML tag is applied:

+a phrase+ → <ins>a phrase</ins> → a phrase

NB: quick tags must open and close within a single paragraph to produce valid markup.

Superscript

Use ^carets^ for text to be rendered ^superscript.

The <sup> HTML tag is applied:

^a phrase^ → ^{a phrase} → ^{a phrase}

NB: quick tags must open and close within a single paragraph to produce valid markup.

Span

Use the %per cent symbol% to indicate a span.

The <span> HTML tag is applied, along with whatever class, style, id or language attributes are specified between the opening per cent and the first character of the phrase:

%(caps)SPAN% → <span class="caps">SPAN</span> → SPAN

%{color:red}red% → <span style="color:red">red</span> → red

Attributes

Syntax:

(class)
(#id)
(class#id) can be combined
{style}
[language]

Attributes in phrase elements

%{color:red}red% → <span style="color:red">red</span>

%[fr]rouge% → <span lang="fr">rouge</span>

_(big)red_ → <em class="big">red</em>

Attributes in block elements

p(bob). A paragraph → <p class="bob">A paragraph</p>

p{color:#ddd}. A paragraph → <p style="color:#ddd">A paragraph</p>

p[fr]. A paragraph → <p lang="fr">A paragraph</p>

Block attribute shorthand

p<. align left
p>. align right
p=. centered
p<>. justified
p(., p((. left indent 1em, 2em, etc.
p). right indent 1em

Examples:

h2()>. right-aligned header 2, indented 1em both sides
h3=. centered header 3
!>/image.gif! right-aligned image
p[no]{color:red}. A Norse of a different colour

Tables

Table cells are divided with a vertical bar |

|This|is|a|simple|table|
            |This|is|a|simple|row|
            

Table attribute syntax

(class)
(#id)
{style}
[lang]
< align left
> align left
= center
<> justify
^ top – middle
~ bottom

_ header cell

\2, \3 etc. column span
/2, /3 etc. row span

A set of attributes to be applied to an entire table must appear immediately before the table, on its own line, followed by a dot:

table{border:1px solid black}.
            |This|is|a|row|
            |This|is|a|row|
            

Attributes to be applied to an entire row must appear at the beginning of the row’s line, followed by a dot and a space:

{background:#ddd}. |This|is|a|row|
            

Cell attributes must fall between the left cell divider and a dot-space:

|{background:#ddd}. Cell with gray background|
            

|\2. Cell spanning 2 columns|
            

|/3. Cell spanning 3 rows|
            

|>. Right-aligned cell|
            

Links

To make a hypertext link, put the link text in "quotation marks" followed immediately by a colon and the URL of the link.

Optional: text in (parentheses) following the link text, but before the closing quotation mark, will become a Title attribute for the link, visible as a tool tip when a cursor is above it.

Example:

"This is a link (This is a title) ":http://www.textism.com

Will become:

<a href="http://www.textism.com" title="This is a title">This is a link</a>

Which, when displayed in a browser, will look like this:

This is a link

New in Textile 2.0 is the ability to store long ugly urls outside of the text you’re working in, and reference them with aliases of your choosing.

Simply store the url anywhere in the document, such as at the end, using this syntax:

[alias (optional title)]http://url

Each referenced url must begin on a new line.

Example text:
This is a "link":bob to Bob’s website.

So long as this appears elsewhere in the document:
[bob]http://itsbob.com/index.html

...the final output will be:
This is a <a href="http://itsbob.com/index.html">link</a> to Bob’s website.

Images

To insert an image, put the URL for the image inside exclamation marks.

Optional: text that immediately follows the URL in (parentheses) will be used as the Alt text for the image. Images on the web should always have descriptive Alt text for the benefit of readers using non-graphical browsers.

Optional: place a colon followed by a URL immediately after the closing ! to make the image into a link.

Example:

!http://www.textism.com/common/textist.gif(Textist)!

With a link:

!/common/textist.gif(Textist)!:http://textism.com

Will become:

<img src="http://www.textism.com/common/textist.gif" alt="Textist" />

With a link:

<a href="http://textism.com"><img src="/common/textist.gif" alt="Textist" /></a>

Defining Acronyms

HTML allows authors to define acronyms via the tag. The definition appears as a tool tip when a cursor hovers over the acronym. A crucial aid to clear writing, this should be used at least once for each acronym in documents where they appear.

To quickly define an acronym in Textile, place the full text in (parentheses) immediately following the acronym.

Example:

ACLU(American Civil Liberties Union)

Will become:

<acronym title="American Civil Liberties Union">ACLU</acronym>

Which, when displayed in a browser, will look like this (move your cursor over the text):

ACLU

NB: Textile automatically wraps a string of three or more capital letters in the <acronym> tag, even if it has no definition.