Attributes
Tailoring Textile to suit your needs is quite easy. Attributes allow you to provide CSS information about any phrase.
Block Attributes
A block can be tagged with a CSS class by circling the class in parentheses and placing it just before the period which marks the block.
You type
p(example1). An example
Resulting HTML
<p class="example1">An example</p>
What appears on the screen
An example
An element ID can be given by prefixing the ID with a pound symbol and using it in place of the class.
You type
p(#big-red). Red here
Resulting HTML
<p id="big-red">Red here</p>
What appears on the screen
Red here
Class and ID can be combined by placing the class first.
You type
p(example1#big-red2). Red here
Resulting HTML
<p class="example1" id="big-red2">Red here</p>
What appears on the screen
Red here
Style settings can be provided directly by surrounding them in curly braces.
You type
p{color:blue;margin:30px}. Spacey blue
Resulting HTML
<p style="color:blue; margin:30px;">Spacey blue</p>
What appears on the screen
Spacey blue
Block Alignments
Text inside blocks can be aligned in four basic ways.
You type
p<. align left
p>. align right
p=. centered
p<>. justified
Resulting 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</p>
What appears on the screen
align left
align right
centered
justified
Indentation can also be specified by provide a single left paren for every 1em to the left. A single right paren for every 1em to the right.
You type
p(. left indent 1em
p((. left indent 2em
p))). right indent 3em
Resulting HTML
<p style="padding-left:1em;">left indent 1em</p>
<p style="padding-left:2em;">left indent 2em</p>
<p style="padding-right:3em;">right indent 3em</p>
What appears on the screen
left indent 1em
left indent 2em
right indent 3em
Combining Alignments
Identation may be coupled with alignment.
You type
h2()>. Bingo.
Resulting HTML
<h2 style="padding-left:1em; padding-right:1em; text-align:right;">Bingo.</h2>
