Test on 'white-space: pre'

Back to October 2006

Table of contents

  1. Headings
  2. Paragraphs
  3. Images
  4. Lists
  5. Conclusion: semantics vacant

T h i s i s an heading 

CSS code

.pref {
white-space: pre;
margin: 0;
padding: 0;
color: #000;
margin: 2em;
font-family: Georgia, serif;
}

Comments

The 'white-space' property can be applied to all elements. Here the class .pref has been specified for a level-two heading. Results are similar in all browsers (Internet Explorer 6, Mozilla, Firefox, Opera). Note the presentational effect achieved above.

2. Paragraphs

Much Madness is divinest Sense - To a discerning Eye - Much Sense - the starkest Madness - 'Tis the Mayority In this, as All, prevail - Assent - and you are sane - Demur - you're straightway dangerous - And handled with a Chain - 

CSS code

.pref2 {
white-space: pre;
color: #000;
margin: 2em;
line-height: 1.4;
background: #fff;
border: 1px solid;
font-family: Georgia, serif;
padding: .5em;
}

Comments

Here the value 'pre' has been used to format a paragraph with a poem within. Results are similar in all browsers (Internet Explorer 6, Mozilla, Firefox, Opera).

3. Images

A skeleton face staring at you A skeleton face staring at you A skeleton face staring at you A skeleton face staring at you A skeleton face staring at you A skeleton face staring at you 
CSS code

.pref3 {
white-space: pre;
color: #000;
margin: 2em;
line-height: 1.4;
background: #fff;
border: 1px solid;
font-family: Georgia, serif;
padding: .5em;
text-align: center;
}

.pref3 img {margin: 5px; display: inline;}

Comments

Here the value 'pre' has been used to create an image gallery. Results are similar in all browsers (Internet Explorer 6, Mozilla, Firefox, Opera). This is only presentational, of course.

4. Lists

CSS code

.pref4 {
white-space: pre;
color: #000;
margin: 2em;
line-height: 1.4;
background: #fff;
border: 1px solid;
font-family: Georgia, serif;
padding: 0;
}

.pref4 ul {
margin-left: 0;
padding-left: 0;
list-style: none;
}
.pref4 li {
margin: 0;
}
.pref4 a {
padding: 4px; 
text-decoration: none; 
display: block;
}

Comments

Here Internet Explorer 6 differs from the others in the computation of the space between the top of the list and the top padding edge of the div with class .pref4.

5. Conclusion: semantics vacant

The tests showed above are meant to be only tests, of course. For istance, they are not a new way to create an image gallery. No way. The reason is pretty simple: semantics. When we use our CSS properties, we have to keep in mind that every single property play its rule in our presentation. The 'white-space' property, even if it can be applied to all elements, has been developed to be used with text, not with images et similia. However, it's particularly useful when we have to format a paragraph with a poem within. Doing so, we avoid the use of the <br /> element to force the text into a new line.