People 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.
Column Count And Width
Two CSS properties control whether and how many columns will appear:
-moz-column-count sets the number of columns to a particular number. E.g.,
<div style="-moz-column-count:2">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>
will display the content in two columns (if you're using Firefox 1.5 or greater):
-moz-column-width sets the minimum desired column width. If
-moz-column-count is not also set, then the browser will automatically make as many columns as fit in the available width.
<div style="-moz-column-width:20em;">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>
The exact details are described in the CSS3 draft.
In a multicolumn block, content is automatically flowed from one column into the next as needed. All HTML, CSS and DOM functionality is supported within columns, as are editing and printing.
The CSS3 draft specifies that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal. Firefox does this.
However, in some situations it is also useful to set the maximum height of the columns explicitly, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. For example, articles at http://iht.com/ do this (using script). Therefore we extend the draft so that if the CSS
height property is set on a multicolumn block, each column is allowed to grow to that height and no further before adding new column. This mode is also much more efficient for layout.
By default each column is directly adjacent to the next column. This usually doesn't look good. You can use CSS padding within the columns to improve the situation, but it's often easier to apply the
-moz-column-gap property to the multicolumn block:
<div style="-moz-column-width:20em; -moz-column-gap:2em;">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>
The -moz-column properties will just be ignored by non-columns-supporting browsers. Therefore it's relatively easy to create a layout that will display in a single column in those browsers and use multiple columns in Firefox 1.5.
CSS3 columns are a new layout primitive that will help Web developers make the best use of screen real estate. Imaginative developers may find many uses for them, especially with the automatic height balancing feature.