Rich text editors considered harmful

January 4th, 2011

A lot of my time is now spent updating various content management systems (mainly Radiant, but often WordPress and occasionally Drupal).

And a lot of that work is cleaning up the formatting inserted by “rich text” editors – you know those editor fields that work “a little bit” like Microsoft Word – giving you bold, italics, bullet points etc.

Now bold, italics and so on are good. Where they tend to fail is when the editor gives you the option to change the text colour, or font-size. Why? Because of history.

Word Processors were designed for building documents that would be printed out. You would have a single document, in isolation. So if you change the font size or whatever, it would affect you and no-one else. If you have a house-style that affects lots of documents you would probably have a template of some sort (each word processor has its own system of templates). It would be fair to say that most people try to avoid templates – they are overly complicated for what they try to achieve and you often find your document looking weird as your desired style clashes with the template’s style.

Unfortunately, this is exactly the situation with making web-pages.

Your site will have the equivalent of a template – known as a “stylesheet” – that defines how your site looks. HTML, the language of web-pages is pretty simple. But CSS, the language of stylesheets, is quite complicated. Your designer will spend hours hand-crafting lines and lines of CSS and testing it across all the major browsers. And then your text editor overrides those rules, forcing the text into a slightly different shade of blue to the other text on the page, at a slightly different size. These inconsistencies drive designers up the wall and make your site look cheap and unprofessional. And even worse, the tags that the editor inserts to make these changes are often verbose, increasing the size of the page and making it slower to load.

So what’s the answer?

For the most part (but admittedly not always) you don’t need the full functionality that a text editor offers you. You need to be able to specify headings and paragraphs, bold, italics, quotations and citations, bullet points, links and images. A lot of the time the rest is overkill – certainly not worth risking the damage a text editor can wreak.

So I recommend using Markdown. It is designed to look as if you had written it in plain text – or on plain paper with nothing more than a biro.

You want something in italics? Wrap it in *stars* to emphasise it.
You want something in bold? Wrap it in **double-stars** to add extra emphasis.
You want bullet points?

* Add each bullet point
* on its own
* line with an asterisk
* at the start

As you are entering plain text with very simple formatting marks, your words are clear and it works with or without formatting. But sent through a Markdown filter and it is converted to HTML that then uses your designer’s stylesheet; giving you simple content management in a consistent framework.

You can read more about Markdown’s syntax and try it out using the Markdown Dingus.

Comments are closed.