How to apply visual changes with Textile

4 March 11 ,

My favorite content management system, Textpattern which I use for my client sites, uses the markup shorthand “Textile”. I think the best thing about Textile is that it encourages the semantic markup of content, whereas “WYSIWYG” editors encourage superficial, visual changes. For example, a heading should be marked up as a heading, for example, rather than just a large red paragraph and masquerading as a heading.

However, there are times when you just need a paragraph to be centered or indented a bit for whatever reason. Textile provides solutions for that as well.

Using Textile to apply visual formatting

For a complete list of what can be accomplished, see the textile reference manual. I’ll highlight a few of the most useful features here:

Alignment

You can use <, >, and = symbols to change alignment. For example, to right-align a paragraph:

p>. This paragraph will align to the right.

This paragraph will align to the right.

Or, to center a heading:

h3=. This level-3 heading is centered.

This level-3 heading is centered.

Padding

If you just need to indent a paragraph or two (and “blockquote” — bq., isn’t appropriate) you can change the padding. For example:

p(. This paragraph has 1em of padding on the left.

This paragraph has 1em of padding on the left.

p(()). This paragraph has 2em's of padding on both sides.

This paragraph has 2 em’s of padding on both sides. And it must be quit a bit longer to be able to discern that.

Color

If necessary, you can change the color of a block of text or phrase.

The %{color:blue}blue room% is nice.

The blue room is nice.

p{color:#008C99}. I use the color #008C99 on this website.

I use the color #008C99 on this website.

Conclusion

You can use these hints to add visual interest to your articles or blog posts. Remember that they shouldn’t be a replacement for semantic markup, and keep in mind legibility for your users.

Was this helpful?
No comments yet…Be the first!

Comments are closed for this article.