Attributes - Textile Reference

CSS classes and IDs

You can apply CSS classes and IDs to phrase modifiers or block modifiers.

Textile

p(my-class). This is a paragraph that has a class and this *(#special-phrase)emphasized phrase* has an id.

HTML

<p class="my-class">This is a paragraph that has a class and this <strong id="special-phrase">emphasized phrase</strong> has an id.</p>

Browser

This is a paragraph that has a class and this emphasized phrase has an id.

CSS IDs

Textile

p(#my-paragraph). This is a paragraph that has an id.

HTML

<p id="my-paragraph">This is a paragraph that has an id.</p>

Browser

This is a paragraph that has an id.

CSS classes and IDs combined

You can specify both class and ID, but the class must always come first.

Textile

div(myclass#myid). This div has both a CSS class and ID.

HTML

<div class="myclass" id="myid">This div has both a <span class="caps">CSS</span> class and ID.</div>

Browser

This div has both a CSS class and ID.

CSS styles

Apply CSS styles directly to block or phrase modifiers by putting the style rules in curly braces.

Textile

p{color:blue;letter-spacing:.5em}. Spacey blue

HTML

<p style="color:blue;letter-spacing:.5em;">Spacey blue</p>

Browser

Spacey blue

Language

Specify the language of text with square brackets.

Textile

p[fr]. Parlez-vous français ?

HTML

<p lang="fr">Parlez-vous français ?</p>

Browser

Parlez-vous français ?

Alignment

Text inside blocks can be aligned in four ways:

Textile

p<. align left

p>. align right

p=. centered

p<>. justified justified justified justified justified justified justified justified justified justified justified justified justified justified justified justified justified justified

HTML

<p style="text-align:left;">align left</p>
<p style="text-align:right;">align right</p>
<p style="text-align:center;">centered</p>
<p style="text-align:justify;">justified justified justified justified justified justified justified justified justified justified justified justified justified justified justified justified justified justified</p>

Browser

align left

align right

centered

justified justified justified justified justified justified justified justified justified justified justified justified justified justified justified justified justified justified

Indentation

Text can be indented with single parentheses. For each left paren, left pad 1em. For each right paren, right pad 1em. They may be combined for left and right padding.

Textile

p(. Left pad 1em.

p)). Right pad 2em.

p(). Pad both left and right sides 1em.

HTML

<p style="padding-left:1em;">Left pad 1em.</p>
<p style="padding-right:2em;">Right pad 2em.</p>
<p style="padding-left:1em;padding-right:1em;">Pad both left and right sides 1em.</p>

Browser

Left pad 1em.

Right pad 2em.

Pad both left and right sides 1em.