Web Development optimize

CSS3: New ways to process white space

Ryan Boudreaux introduces the newest properties under discussion for the processing of white space in CSS3 and includes code examples to show how the values are interpreted.

The source text of a web document often contains formatting that is not relevant to the final rendering as displayed in the browser. This formatting  is used to break the source code into organized segments for easier of editing, reading, and maintaining, or to add white space characters such as tabs and spaces to indent the source code. According to the W3C Working Draft for CSS Text Level 3, CSS white space processing allows the web author to control the interpretation of such formatting and preserves, trims, or collapses it away when rendering the document in the browser.

The CSS3 white-space property is actually a shorthand version for the text-space-collapse and text-wrap properties. The white-space property has the possible values of normal, pre, nowrap, pre-wrap, and pre-line. The initial value is not defined for shorthand properties; it can be applied to all elements, and can be inherited for all visual media.

The white-space property can be written as displayed in the following syntax examples:

p {
white-space: normal;
}
<p style="white-space: normal;">Content text</p>

Several combinations are represented below where the values have the following results:

  • normal - Sets text-space-collapse to collapse and text-wrap to normal, and collapses multiple spaces into one space.
  • pre - Sets text-space-collapse to preserve and text-wrap to none, and does not collapse multiple spaces.
  • nowrap - Sets text-space-collapse to collapse and text-wrap to none, and does not allow line wrapping without a tag.
  • pre-wrap - Sets text-space-collapse to preserve and text-wrap to normal, and allows text wrapping.
  • Pre-line - Sets text-space-collapse to preserve-breaks and text-wrap to normal, and allows text wrapping.

Now, let's take a look at each value in more detail, along with some coding and output display examples. Note: All figure examples below are rendered in the Firefox 7.0.1 browser.

Example 1

Normal is the default value, and if set explicitly, it will have the same effect as the naturally occurring output. The only reason you would ever use this property value would be to revert back to normal when one of the other values has already been set, for example, if a child element had inherited an unwanted value. CSS:

#normal_whiteSpace {

white-space:normal;

}

HTML (notice the extra white spaces in the paragraph below):

<p id="normal_whiteSpace;">Lorem ipsum dolor sit amet,        consectetuer     adipiscing elit. Aenean egestas     blandit ipsum. </p>

Figure A show the output where multiple spaces and line breaks are ignored, except for those that may occur naturally due to space values or other limitations:

Example 2

Pre is the value that preserves the white space and works exactly as you would expect, all white space, tabs, returns, and indents are recognized. This value creates content output that is just about identical to the markup as represented within the document.

CSS:
#pre_whiteSpace {
      white-space:pre;
}
HTML (notice there are several white spaces, tabs, indents, and line breaks):
<article id="pre_whiteSpace">
      This is an example of      white space    preserved
      and results in multiple white spaces and line
        breaks.
 </article>
Figure B shows the resulting output where the multiple white spaces and line breaks are acknowledged as rendered in the browser:

Example 3

Nowrap is the most commonly utilized value for the white space property, and follows the same results as the normal value with the exception that it will not recognize line breaks, and will instead push the content and line to beyond the end of the space limitation or set boundary. The nowrap value will not affect multiple strings of spaces between characters or inline elements, so multiple spaces will be collapsed to a single space.

CSS:
#nowrap_whiteSpace {
      white-space:nowrap;
}
.setBoundary {
      width:300px;
      height:25px;
      border-color:#666666;
      border:solid;
      padding:5px;
}
HTML:
<section class="setBoundary">
      <article id="nowrap_whiteSpace">Lorem ipsum dolor sit amet,        consectetuer     adipiscing elit. Aenean egestas     blandit ipsum. </article>
 </section>
The output in Figure C shows how multiple spaces and line breaks are ignored and the line overruns the space limitation or boundary set:

Example 4

Pre-wrap value is identical to the pre value with the exception that it will naturally wrap lines as stipulated by the parent boundary. Therefore, it will not force the content to a single line, but will recognize multiple spaces, and will accept explicit and natural line breaks.

CSS:
#pre-wrap_whiteSpace {
      white-space:pre-wrap;
}
.setBoundaryArea {
      width:300px;
      height:175px;
      border-color:#666666;
      border:solid;
      padding:2px;
}
HTML:
<section class="setBoundaryArea">
 <p id="pre-wrap_whiteSpace">Lorem ipsum dolor sit amet,      consectetuer adipiscing elit.
    Aenean egestas      blandit
             ipsum.
  (Contains multiple spaces, tabs, and line breaks where multiple spaces are recognized, and multiple natural and explicit line breaks are also recognized.)
   </p>
</section>
Figure D shows that multiple spaces are recognized and all natural and explicit line breaks are also recognized:

Example 5

Pre-line value works the same way as the normal value with the exception that line breaks within the HTML markup are recognized. Any areas where multiple spaces occur between elements will be ignored as usual; however, any new lines added within the markup will also result in the rendered browser output.

CSS:
#pre-line_whitespace {
      white-space:pre-line;
}
HTML:
<p id="pre-line_whitespace">Lorem ipsum dolor sit amet,    consectetuer adipiscing elit.
    Aenean egestas      blandit
             ipsum.
    (Contains multiple spaces and line breaks where the line breaks are recognized.)
</p>
Figure E shows multiple line breaks as they occur within the HTML:

Practical uses

Practical applications for using the various white-space property values would include linking, which you do not want to drop to the next line, or when you want to prevent a single row of inline elements from wrapping into the next line. Also, remember that the white-space property will only affect the inline element for which it is applied, and will not affect any block elements or the spacing of the element itself.

In discussion

Several of the CSS3 white-space properties are under discussion and not fully adopted or implemented at this time, in particular, the text-space-collapse property which declares whether and how white space inside the element is collapsed. The issues with this property are that the discussions may result in changes with future drafts, the name of the property may also change, and several values do not work at this time. Several of the proposed values which do not work include trim-inner, consume-before, and consume-after because the property is inherited, meaning that a <span> or <div> could cause more white space to be removed otherwise.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments