CSS Tip:
Adding Whitespace To Text

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

There are just a few ways in HTML to control line breaks and spacing. The most common are break tags and the PRE tag. The PRE tag is easiest, but you can't control the text font or color. The CSS white-space property lets you style the text to match the rest of your page - but only in browsers that support it.

The best solution is to use CSS to add style to the PRE tag. It's not a perfect solution, but it's the most reliable one.

PRE Tag In HTML

The PRE tag is a great way to display preformatted text that needs specific spaces between lines, words, or even individual letters. That is, it's great if you don't mind giving up some control over page display.

Depending on your page layout and which browsers your visitors use, the loss of control may be considerable. That's because browsers have set ways (defaults) to display text inside a PRE tag.

For instance:

You can force the text to wrap using the WIDTH attribute. But this is where browser problems first appear. Explorer and even Opera ignore the WIDTH attribute, but Netscape 6 and 7 support it.

Here is         some text
              that  is
inside a PRE tag.

That's not the most attractive display. Let's see how to add some style to it!

The White-space Property In CSS

You can apply the white-space property to any block-level element. In Netscape and Opera, it's possible to control spacing and line breaks inside paragraphs, header tags, and other elements using the white-space property.

Unfortunately, Explorer 5.x browsers (for Windows) ignore this extremely useful technique. Explorer 6 only supports it if you use a strict DOCTYPE definition. If you use a frameset or transitional DOCTYPE, the browsers ignore the property entirely.

Include the white-space property in your style definition like this:

white-space: pre;

Use it with other style definitions to control whitespace and retain the same fonts and colors as the rest of the document. Here's a sample definition:

.preElement
{
white-space:pre;
font-weight:bold;
color:navy;
font-family:arial;
}

When you apply this class to a page element, you get bold, navy text, in Arial. It retains line breaks and word spacing.

But remember that Explorer browsers may ignore the white-space property. It's best to check your page using Browser Photo before you rely on CSS to control spacing. Browser Photo gives you screen shots of your page in 16 different browser and operating system combinations. You can quickly find and fix the errors.

Mixing CSS and PRE

The easiest way to handle the browser display problem is to add a style definition to your PRE tag. This works in all browsers.

Here's the same style definition we used in the previous section, but applied to the PRE tag instead of to a class:

pre
{
font-weight:bold;
color:navy;
font-family:arial;
}

The only downside is that you lose the ability to control the width - but Netscape is the only browser that supports that anyway! Even if you add a width property to the style definition, all browsers ignore it. They also ignore the next logical way to handle width: place the PRE tag inside a DIV tag that has the desired width defined. The DIV stretches to fit the PRE instead of controlling its width.

Check out this example page in different browsers to see these techniques in action.

Still, this mixture of tags is valid HTML and CSS. It lets you include preformatted text on your page and style it to match the rest of the page. Without CSS, your only other option would be to control the spacing using BR tags and non-breaking spaces ( ). That's a lot of extra code to add to your page - and every extra tag makes maintenance more difficult and errors more likely!