by Dixie Lang

When Content Management Systems (CMS) took the Web world by storm, small business owners rejoiced. Now they could update the content on their websites without having to rely on a web designer, or having to learn HTML themselves. This ease of editing helped drive the explosion of blogs.

The website owners and bloggers dove into the CMS editors and started editing. The editor buttons looked very familiar; they were designed to. Microsoft worked with other software companies to standardize many of the buttons back in the 1990's to make Windows software easier to learn and use.

WordPress Editor Buttons: (WordPress is used for blogs and websites)

AWeber Editor Buttons: (AWeber is used for e-newsletters)

Microsoft Word 2007 Editing Buttons: (Word is used for print documents)

People see the familiar Word-like buttons and expect the editor to behave like Word. They copy formatted text from Word and try to paste it directly into the editor box. You can copy and paste between Word documents, so you should be able to copy and paste between Word and the editor box, right?

Wrong. Microsoft Word is actually a very sophisticated piece of software under the hood. Many years of hard work and millions of dollars went into making editing work that smoothly. Under the hood, Microsoft Word speaks a more sophisticated language than the web editor. The web editors aren't quite smart enough to understand formatted text pasted directly from Word. The result: text formatting can get garbled, resulting in problems with spacing and fonts.

The web editor itself sometimes garbles text. Fonts change in the middle of a paragraph; font sizes jump up or down; bolding meant for one word continues down the rest of the page. Text that looked fine in the text editor looks wrong in a web browser.

Here are some common problems along with ways to fix them:

Pasting Text from Word:

Don't paste text directly into the editor. Look for a Paste from Word button similar to this one:

Clicking the Paste from Word button translates the Word formatting language into a language the editor can understand. You may still need to remove extra spacing between paragraphs, and possibly reformat bulleted lists, but the result is cleaner than a direct paste from Word.

Unwanted Changes in Formatting - Mid-word, Mid-Sentence, Mid-Paragraph

HTML, the language of the webpage, works with pairs of tags. For example, when you select text and click the Bold button, the editor writes this HTML, which the web browser (Internet Explorer, Firefox, etc.) reads to draw the page:

Let's say you also select the same text, and add italics:

With each successive command, the editor tries to nest another set of tags around the selected text. Unfortunately sometimes the editor hiccups an doesn't write an end tag correctly. The end tag stops a formatting command. So when formatting "runs on" or changes unexpectedly, a misplaced or garbled tag is often at fault. To correct the text, select the text all the way to the end of the paragraph and reapply the formatting. For example, if the bold is wrong mid-paragraph, select the whole paragraph and hit bold until it turns the bold off. This should fix the tags. Then go back and select just the text you want bold and hit bold again.

Paragraph Spacing

Whether you are using Word or a web editor, there are two types of spacing: a line break, which brings the next line tight against the last, and paragraph spacing, which leaves "breathing space" between the paragraphs. Depending upon the web editor, you usually press Control and Enter or Shift and Enter to create a line break. To create a new paragraph, you usually press Enter.

The best way to fix paragraph spacing problems is to experiment and to check the results in as many web browsers as you can. Sometimes updates to the CMS software itself can change the way the editor handles paragraph spacing. Understanding HTML doesn't necessarily help; CMS software may quitely remove HTML tags a web designer has added to try and control paragraph spacing.

Important Note: the amount of space that appears between paragraphs may depend upon the web theme or styling of the website, something a web designer needs to change. Further, all vertical spacing on a webpage may vary depending upon the web browser - sometimes even on the version of the web browser. You simply cannot tightly control vertical spacing on a webpage and get it to appear consistently across all web browsers.