Visual editors, also known as WYSIWYG editors, are commonplace today on the web. You use them when you post a blog entry, review a product, edit a webpage, or format an HTML newsletter.

Visual editors make writing HTML easier. They operate much like word processor software does in that you can format your text using a variety of icons and pull-down menus to get effects like: bold, italics, text alignment, font size, and so on. As you type away, push enter, and use formatting icons, the visual editor writes HTML code that the website, blog, etc will use to display your content.

The trouble is that sometimes HTML tags are entered that you didn't intend on, which can make getting the page layout you desire more difficult. One of the most common problems is that too much space gets put in between lines or paragraphs.

Below are some easy, but powerfully useful tricks when using visual editors on the web, to achieve a greater degree of control. Some of what is described below is specific to Plone, but the concepts are the same for any visual editor.

Paragraph vs. Line Break

When you push the Enter key on your keyboard, Plone (and most other visual editors) assumes that you are starting a new paragraph. There is a certain amount of space between lines that is used to demarcate paragraphs and sometimes it is more space that you need. If you want to force a single line break, you need to hold down the Shift key, then press Enter. Here's an example:

sampletextsampletextsampletextsampletextsampletextsampletextsampletext

sampletextsampletextsampletextsampletextsampletextsampletextsampletext

sampletextsampletextsampletextsampletextsampletextsampletextsampletext

The Enter key was pushed between each of those lines above. Notice the amount of space between those lines. Now look at the same lines of text, this time using Shift+Enter:

sampletextsampletextsampletextsampletextsampletextsampletextsampletext
sampletextsampletextsampletextsampletextsampletextsampletextsampletext
sampletextsampletextsampletextsampletextsampletextsampletextsampletext

There is a bit less whitespace between lines in the above example. Shift+Enter can also be quite useful for positioning text in relation to images. If you need to go the other way, shift+delete will erase a single line break.

Paragraph Style and <no style>

Similar to paragraphs and line breaks, the drop-down style menu in Plone also has an effect on how your lines are spaced.

Highlight some text on your Plone site, and look at the style drop-down menu in the toolbar. If you chose a regular block of text (not a heading or table), you should see the words Normal Paragraph. Normal paragraph, is the standard text style used in Plone. The style gives each line a particular height, and the font a particular size and color.

Sometimes, you may encounter lines of text that appear closer together than they do with Normal Paragraph. This is because, somehow or another, the text isn't recognized as being in a paragraph. When this is the case, you'll see the words <no style> in the drop-down menu.

The above paragraph was written with the Normal Paragraph style, but this one has <no style>, and therefore each line is rendered a bit closer together. Usually, you do not want to keep things this way, because your information is harder to read with the lines so close together. Fixing it is easy, though. Simply highlight the offending text and select Normal Paragraph from the style drop-down menu.

The Bottom Line

No visual editor is 100% accurate. By not having to learn HTML, they make our lives easier, but at the cost of a little control and accuracy. However, with the simple keyboard shortcuts mentioned above you'll find that some of the frustration can be overcome.