Using CSS multi-column layouts

  • Revision slug: CSS/Using_CSS_multi-column_layouts
  • Revision title: Using CSS multi-column layouts
  • Revision id: 51591
  • Created:
  • Creator: Roc
  • Is current revision? No
  • Comment /* Introduction */

Revision Content

Introduction

People have have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do. Unfortunately this is impossible to do with CSS and HTML without forcing column breaks at fixed positions, or severely restricting the markup allowed in the text, or using heroic scripting.

A CSS3 draft suggests some new CSS properties to support this feature. In Firefox 1.5 and later we have implemented a subset of these properties to behave as described in the draft (with one exception explained below).

Robert O'Callahan's blog uses CSS columns; check it out in a Firefox 1.5 build.

Additional References

  • http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html

Revision Source

<h3 name="Introduction"> Introduction </h3>
<p>People have have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do. Unfortunately this is impossible to do with CSS and HTML without forcing column breaks at fixed positions, or severely restricting the markup allowed in the text, or using heroic scripting.
</p><p><a class="external" href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118">A CSS3 draft</a> suggests some new CSS properties to support this feature. In Firefox 1.5 and later we have implemented a subset of these properties to behave as described in the draft (with one exception explained below).
</p><p><a class="external" href="http://weblogs.mozillazine.org/roc/">Robert O'Callahan's blog</a> uses CSS columns; check it out in a Firefox 1.5 build.
</p>
<h3 name="Additional_References"> Additional References </h3>
<ul><li> http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html
</li></ul>
Revert to this revision