Textile - Textism Tools
Supported by Booked.net
Textile
A Humane Web Text Generator
Quick block modifiers:
Header: hn.
Blockquote: bq.
Footnote: fnn.
Numeric list: #
Bulleted list: *
Quick phrase modifiers:
_emphasis_
*strong*
??citation??
-deleted text-
+inserted text+
^superscript^
%span%
To apply attributes:
(class)
(#id)
{style}
[language]
To align blocks:
< right
> left
= center
<> justify
To insert a table:
|a|table|row|
|a|table|row|
To insert a link:
"linktext":url
To insert an image:
!imageurl!
To define an acronym:
ABC(Always Be Closing)
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 and8x10
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<sup><a href="#fn1">1</a></sup>
which is rendered
This is covered elsewhere1.
* * *
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"><sup>1</sup> Down here, in fact.</p>
which is rendered
1 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:
- A first item
- A second item
- A third item
- 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^ → <sup>a phrase</sup> → 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:
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.comWill 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.