Baltimore Squirrels

Providing direct ways for non-technical content creators to edit web pages has been a dilemma since the dawn of the web. Indeed the larger problem, exposing powerful formatting and layout abilities without also exposing complex and cryptic presentation formulas, must realistically occupy a reasonably large percentage of everything we task personal computers for. The problem is complex, and a complete solution has not yet been found, but there are a number of powerful and elegant alternatives at our disposal. I’m going briefly discuss two options, embedded rich text editors and lightweight markup languages.

Embedded Rich Text Editors

The technologies the web relies upon have steadily advanced, new more powerful tools have been created, and thanks to the ever-enduring Moore’s law we can squeeze a great deal of functionality into a web page. There was a time when embedding a rich text editor in a page was an excessive and extravagant feat, yet today there are a plethora of simple ways to do it. TinyMCE and FCKEditor are the most popular, but many others exist (including the impressive YUI editor which I did not know about until today).

Embedded rich text editors are great tools but they may not be suitable for the discerning geek. In general these editors have a reputation for creating messy and verbose source code. How important this really is has been and will be a subject of debate for some time, but there is no question that clean, standards-compliant code is a good thing to have. When it comes down to it, I tend to think that if you can do something the right way with a reasonable amount of effort, why sacrifice correctness for a little bit of convenience?

Lightweight Markup Languages

When HTML is too verbose or complex for what you really need to accomplish, and rich text editors don’t give you the quality of code you’re looking for, you’re left with lightweight markup languages.

There are a number of different approaches to lightweight markup, in fact if you follow the Wikipedia link above you’ll possibly find more than you really care to know about, but there are only two that have emerged as the preferred choices among the current generation of web developers: Textile and Markdown. Markdown is great, but for the sake of this article I’m going to focus my attention on Textile, which is currently my favorite.

Textile relies on simple markup that is easy to edit in a plain text editor, or a simple textarea on a web form. A major benefit of Textile is that it is also easy to read in it’s unprocessed form, so editing it is relatively painless and not nearly as confusing as editing raw HTML. The syntax is easy to pick up, and new users can typically start authoring comment with very little introduction.

Here is a quick example of Textile code:

h3. Sample

This is a sample paragraph, complete with *bold* text, _italic_ text,
+underlined+ text and even a "link to google":http://google.com/.

For kicks, here is a second paragraph.

And this is what it looks like when displayed:

For a complete list of Textile samples view the example-based reference.

One of it’s greatest strengths, Textile adds a great deal in the way of proper typography. For most of the web, trademark symbols are left as TM, hyphens are substituted for en-dashes and “dumb” quotes are used instead of smart quotes. With Textile these nuances of type are easy to handle with very little effort. A (TM) is automatically converted to ™, a single hyphen is converted to an en-dash (two hyphens for an em-dash), and straight quotes around phrases are converted to smart quotes. With minimal effort you get a significantly more professional result.

Conclusion

Lightweight markup is not without it’s shortcomings. Rich text editors often provide enough visual aides to get people going with little or no introduction, and as I stated before the value of clean HTML in a web page is sometimes debated. In addition, the nature of rich text editors leaves the door open for more powerful features, such as built-in flickr browser or point-and-click YouTube video embedding. All the same, for most tasks, for most sites, I believe that lightweight markup languages are the best option.

Links of Interest

• Textile:
  • Wikipedia entry
  • Homepage and playground
  • Example-based reference
• Textile Alternatives
  • Markdown
  • reStructuredText
• Embedded Rich Text Editors
  • Kupu
  • TinyMCE
  • FCKEditor
  • YUI Rich Text Editor