One of the most common complaints about working with an online content editor is related to problems that arise when formatting content.  Common formatting commands such as bolding/underlining text, applying a style, or creating and deleting list items all can have unexpected results which include, but are not limited to:

• Structure and layout changes – blocks of content shift up or down the page or disappear entirely
• Selection expansion – applying a bold format, or a colour affects more text than what was selected
• Pasted content appears differently than in the original source document

For the most part, these problems can be traced back to how formatting is interpreted by the web browser.  Every time you apply a formatting command to a piece of text, it is wrapped in an HTML tag that defines the formatting to apply, and the beginning and end of the formatting.  For example, this is underlined is actually generated through the following markup: <u>this is underlined</u>. There are many different tags that are available to achieve formatting such as bolding, underline, colours, fonts and more.

When a block of text has more and more formatting applied to it over time, the code behind the scenes can get quite messy and this is usually where the trouble begins.  The problem can be exacerbated when content is pasted in from another source, such as a Word document, as the source’s proprietary tags are usually included though they are not applicable to the web.

The word content brings with it a LOT of invalid and unnecessary code. This makes it difficult for the browser to interpret and near impossible for a user to read.

Working with “clean” content:
Sometimes if the content is too difficult to work with, the best thing to do is cut it out of the editor, and then repaste is using the Paste as Plain text icon.  You can also paste it into a text editor such as notepad, which will strip all the formatting from it, and then paste it back into the editor.

Once the content has been reduced to plain text, then apply the formatting but try to keep it to a minimum.  For example, if you have a heading, a main paragraph of text, and a link which will all be using the Verdana font in various sizes, apply the font format to the entire block of text, then adjust the sizes individually rather than changing the font and size for each part.  This will reduce the amount of formatting applied, which will make it easier to manage later.

Here is the source code after it was re-pasted as plain text and then formatted. Much cleaner!

Play the video below to see a brief walk through of how to successfully paste and format the content.

In the next article, we’ll discuss how to isolate chunks of content using the TABLE and DIV elements.  Stay tuned!