Copyright © 1999 W3C
(MIT,
INRIA,
Keio), All Rights Reserved. W3C
liability,
trademark,
document
use and
software
licensing rules apply.
This is a proposal for multi-column layout in CSS. It is based on several older proposals and comments on older proposals. Contributors include Bert Bos, Dave Raggett, Chris Wilson, Robert Stevahn, Peter Linss, Chris Lilley and Håkon Lie.
The document describes one main proposal, and two variations of the proposal.
This document forms one part of a modular set of Working Drafts which will, when complete, define the next level of CSS. There is consensus in the W3C Working Group on CSS&FP that the functionality described in this document is important to improve formatting, especially printing, from the Web. There is not yet consensus on the CSS syntax for describing multicolumn layouts.
The W3C Membership and other interested parties are invited to review this public specification and report implementation experience. Please send comments to the publicly archived list www-style@w3.org (archive). We welcome experimental implementation experience reports, although the CSS Working Group will not allow early implementation to constrain its ability to make changes to this specification prior to final release.
This Working Draft may be updated, replaced, or obsoleted by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". A list of current W3C Recommendations and other technical documents can be found at http://www.w3.org/TR.
The goal of this draft is to describe a CSS syntax for multicolumn layout that is highly versatile yet easy to use. This document we defines a set of of CSS properties that address the following requirements:
In all three cases, the UA determines the height of the columns based on the content which needs to be fitted. Content should be balanced between columns to minimize the heights of columns.
To describe the number and widths of columns, and the gap between columns, three new CSS properties are proposed.
The three properties above can be set using the shorthand 'columns' property.
These properties describe rules between columns:
All three properties above can be set using the shorthand 'column-rule' property.
In addition, the 'column-span' property allows elements to span several columns. For example, if a document is set to have two columns, heading elements may still want to span the full width.
In order to lay out a muli-column element, the formatter needs to determine how many columns an element will have. First, the 'column-number' property is consulted:
Value: <integer> | auto | inherit
Initial: 1 [or 'auto'?]
Applies to: block-level elements
Inherited: no
Percentage values: N/A
The 'column-number' property determines the number of columns into which the content of the element will be flowed. By specifying an integer value, a fixed number of columns is set.
An integer value sets the number of columns into which the content of the element will be flowed.
Example:
BODY { column-number: 3 }
The 'auto' value means there will be as many columns as there is room for. This number will be determined by the values of the 'column-width' and 'colum-gap' properties.
Value: <length> | <percentage> | auto | inherit
Initial: auto
Applies to: block-level elements
Inherited: no
Percentage values: relative to the element's content width
This property sets the width of an element's columns. The width can be specifies as a length value, a percentage value, or 'auto'.
If the sum of the column widths and the column gaps extend beyond the width of the element's content area, the 'overflow' property describes the result. Here is one example:
DIV.bodytext { column-number: 3; column-width: 50%; overflow: visible; }
In the above example, the last column will extend beyond the content area of the DIV element. Since 'overflow' has a value of 'visible', the column will still be shown, but it may overlap with the padding, border and margins of the DIV element.
The 'auto' value will hand out the available space in equal portions to all columns which has been set to 'auto'. One example:
DIV.bodytext { column-number: 2; column-width: auto; }
In the above example, there will be two columns with the same widths. The sum of the two columns, plus the column gap, equals the content width of the DIV element.
Length, percentage and the 'auto' value can be combined:
DIV.article { column-number: 3; column-width: 10em 25% auto; }
In the above example, the first column will be 10em wide, the second will be 25% of the element's width, and the third column will be given the remaining space. If there is no remaining space, or if the remaining space is smaller than a UA-specific minimum value, there will be no third column. [or, would it be better to say that there would be a third column having the minimum width and sticking out?]
Value: <length> | <percentage> | auto | normal | inherit
Initial: normal
Applies to: block-level elements
Inherited: no
Percentage values: relative to percentage values of other columns and gaps
This property defines the width of gaps between columns.
The 'normal' value is UA dependent, but a length of '1em' is suggested.
The 'auto' value will evenly allocate all horizontal space not taken up by columns between the columns. The result is that the left edge of the leftmost column aligns with the left edge of the element, and vice versa on the right side.
The column rules (see the column-rule-* properties below), if they exist, are placed in the middle of the column gaps. The width of column rules do not influenc the width of the column gaps.
This property is a shorthand for setting 'column-number', 'column-width' and 'column-gap' in one declaration.
Here are some examples:
P { columns: 4 } /* 4 columns, 'column-width' and 'column-gap' will be auto */ P { columns: 25% } /* as many columns as there is room for, each column will be 25% of the element's content width, the 'column-gap' will be 'auto' */ P { columns: 25% 5% } /* as many columns as there is room for, between each column there will be a gap 5% of the content's element width */ P { columns: 4 20% } /* 4 columns with widths of 20% */ P { columns: 4 20% 5% }
In the middle of the gap between columns, there may be a column rule. Column rules do not affect the position of the columns, i.e. they don't "take up" any space.
Value: [ <length> | <percentage> | thin | medium | thick ]
Initial: medium
Applies to: block-level elements
Inherited: no
Percentage Values: refer to parent element's width
Value: [none | dotted | dashed | solid | double | groove | ridge | inset | outset ]
Initial: none
Applies to: block-level elements
Inherited: no
Percentage Values: n/a
Value: <color>
Initial: the value of the 'color' property of the parent element
Applies to: block-level elements
Inherited: no
Percentage Values: n/a
The above three (3) simple properties are combined into a complex property:
Value: <column-rule-width> || <column-rule-style> || <column-rule-color>
Initial: not defined for shorthand properties
Applies to: block-level elements
Inherited: no
Percentage Values: allowed on <column-rule-width>
Value: none | all | <integer> | inherit
Initial: none
Applies to: block-level elements
Inherited: no
Percentage values: relative to width of the element itself
This property describes how many columns the element spans. Consider this example:
<DIV CLASS="article"> <H1>The headline</H1> <P CLASS="intro">The introduction, sometimes called "ingress". <P>A normal paragraph. <P>Another normal paragraph. </DIV>
It's convenient to wrap the DIV element around the whole article. However, the headline and ingress should span several columns:
DIV.article { columns: 3 } DIV.article H1 { column-span: all } DIV.article P.intro { column-span: 2 }
Here is a simple example using the 'column-number' property.
The text shown black on white should be flowed into two columns.
This is due to a STYLE attribute on the DIV element which sets 'column-number: 2'.
There should be a gap between the two columns. The width of the gap has not been specified, but its initial 'normal' value should ensure that there is some gap.
Instead of creating new naming schemes for gaps and rules between columns, new properties are created in the existing padding, border and margin families:
This would change the syntax for these properties:
Instead of accepting up to four values each (top, right, bottom, left), they would accept five (top, right, bottom, left, top).
Also, each column within the element would have a padding, border and margin area around it. Margins would collapse vertically like normal margin areas. The padding, border and margin areas are the same for all sides of all columns, except the left side of the leftmost column and the right side of the rightmost column. Unlike the column rules in the original model, the border areas in this model take up space.
The benefits of this variation is:
The disadvantages are:
Instead of adding new properties to set the column widths, gaps and rules, the extra complexities multiple columns introduces are addressed by adding a new pseudo-element:
P:column { column-number: 4; width: 25%; border: thick solid black; padding: 0.3em; }
The benefits of this proposal are:
Unanswered questions