Textile attributes in Textpattern CMS

admin-ajax

Textpattern CMS includes support for Textile, a markup language for formatting content. When you’ve grasped the fundamentals of Textile, there are some extra good-to-know things that will help you pep-up your code. In this session, I’m going to cover:

  • Alignment
  • Indentation
  • Span
  • CSS styles
  • CSS classes and CSS IDs

Alignment happens with inline CSS, which is in this grey area of being very doable with Textile, but not really considered good practice in modern web development. I’ll brush that aside for now and show you how it’s done, and you can decide for yourself whether it’s right for you.

Take the following HTML example:

<p style="text-align:left;">This is a left-aligned paragraph.</p>
<p style="text-align:right;">This is a right-aligned paragraph.</p>
<p style="text-align:center;">This is a center-aligned paragraph.</p>
<p style="text-align:justify;">This is a justifed paragraph with a bunch of lorem ipsum text to make it span at least a couple of lines in a browser. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus purus quis feugiat interdum. Nullam sed aliquet nulla. Vestibulum vitae ante nisl. Praesent euismod, turpis nec auctor faucibus, lacus erat congue turpis, a gravida odio metus eu sem. Nunc eu tellus nunc. Aliquam non nisi at velit imperdiet vestibulum.</p>

Each paragraph has an inline style, and they are achieved by this Textile:

p<. This is a left-aligned paragraph.

p>. This is a right-aligned paragraph.

p=. This is a center-aligned paragraph.

p<>. This is a justifed paragraph with a bunch of lorem ipsum text to make it span at least a couple of lines in a browser. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus purus quis feugiat interdum. Nullam sed aliquet nulla. Vestibulum vitae ante nisl. Praesent euismod, turpis nec auctor faucibus, lacus erat congue turpis, a gravida odio metus eu sem. Nunc eu tellus nunc. Aliquam non nisi at velit imperdiet vestibulum.

So, less-than, a greater-than and an equals. Nice.

Let’s talk about indentation. I personally don’t use it very often, but it has its place. Here’s an example of indentation in action:

<p style="padding-left:1em;">This text has a left indent of 1em.</p>
<p style="padding-left:2em;">This text has a left indent of 2em.</p>
<p style="padding-left:3em;">This text has a left indent of 3em.</p>
<p style="padding-right:1em;text-align:right;">This text has a right indent of 1em.</p>
<p style="padding-right:2em;text-align:right;">This text has a right indent of 2em.</p>
<p style="padding-right:3em;text-align:right;">This text has a right indent of 3em.</p>

The Textile for this involves parentheses, and lots of them, plus a handful of greater-thans from the alignment example:

p(. This text has a left indent of 1em.
p((. This text has a left indent of 2em.
p(((. This text has a left indent of 3em.
p)>. This text has a right indent of 1em.
p))>. This text has a right indent of 2em.
p)))>. This text has a right indent of 3em.

Spans are helpful if you’re selectively styling text. Take this fruit-based example:

<p>My favourite fruit is a damson. It is <span style="color:purple;">purple</span> and juicy.</p>

Two things to do here: make the `<span>`, and then apply a style to it. This is done with percent symbols and curly brackets:

My favourite fruit is a damson. It is %{color:purple}purple% and juicy.

I’ve alluded to the fact that inline styles are technically possible but not optimal or ideal for modern web development. A better solution is to use CSS classes and/or IDs instead of shoehorning styles into HTML code. There are three ways of doing this:

  • Apply a CSS class
  • Apply a CSS ID
  • Apply a CSS class and an ID

Taking the previous example and fleshing it out into three paragraphs that correspond to the above list, here’s some HTML to work with:

<p>My favourite fruit is a damson. It is <span class="fruitcolor">purple</span> and juicy.</p>

<p>My favourite fruit is a damson. It is <span id="purple">purple</span> and juicy.</p>

<p>My favourite fruit is a damson. It is <span class="fruitcolor" id="purple">purple</span> and juicy.</p>

The relevant Textile to get this is:

My favourite fruit is a damson. It is %(fruitcolor)purple% and juicy.

My favourite fruit is a damson. It is %(#purple)purple% and juicy.

My favourite fruit is a damson. It is %(fruitcolor#purple)purple% and juicy.

So, a CSS class is attached in parentheses, a CSS ID is the same but is prepended with a hash (pound) and a combined class + ID is both together. Delightfully logical.

Looking for quality Textpattern Hosting? Look no further than Arvixe Web Hosting and use coupon TEXTPATTERN for 20% off your first invoice!

Tags: , , , , , , , , , , | Posted under Textpattern | RSS 2.0

Author Spotlight

Pete Cooper

Pete Cooper has been using Textpattern since 2005. Textpattern is his preferred CMS weapon of choice. Its logical and flexible approach to content management makes Pete happy, as does its lightweight core and helpful user community. Pete's website - petecooper.org - runs on top of Textpattern and chronicles his day-to-day experiences from his home near the Atlantic in north Cornwall, United Kingdom.

Leave a Reply

Your email address will not be published. Required fields are marked *