CSS 3 property recommendation

Recommendation for 'text-columns' property

29th April, 2005

Hint: I just got a hint that CSS3 already has an implementation of mutlicolumn layout (http://www.w3.org/TR/css3-multicol), which I didn't know before. Sorry for inconvenience. (2nd May, 2005)

This property specifies the behaviour of text rendering. More precisely, it specifies the count of columns the text will be rendered as.

'text-columns-count'

Value: <column count > | inherit
Initial: 1
Applies to: block-level elements, table cells and inline blocks
Media: visual
Computed value: the column count

Example:

<p style=”text-align: justify; text-columns-count: 2”>The World Wide Web Consortium</p>

Will be rendered as:

short

Some additional examples:

<p style=”text-align: justify; text-columns-count: 1”>The World Wide Web Consortium (W3C) is a <a href=”link”>consortium</a> that produces the <a hrtef=”link”>free software</a> standards—"recommendations," as they call them—for the <a href=”link”>World Wide Web</a>. The Consortium is headed by <a href=”link”>Tim Berners-Lee</a>, the original creator of <a href=”link”>URL</a> (Uniform Resource Locator), <a href=”link”>HTTP</a> (HyperText Transfer Protocol) and <a href=”link”>HTML</a> (HyperText Markup Language), the principal technologies that form the basis of the Web. <br /><br />A W3C standard goes through the stages Working Draft, Last Call, Candidate Recommendation and Proposed Recommendation. It ends as a Recommendation. A Recommendation may be updated by separately-published Errata until enough substantial edits accumulate, at which time a new edition of the Recommendation may be produced (e.g., <a href=”link”>XML</a> is now in its Third Edition). Sometimes, a recommendation is withdrawn and sent through the process again, as <a href=”link”>RDF</a> was. The W3C also publishes informative Notes which are not intended to be treated as standards.</p>

Will be rendered as:

one column

<p style=”text-align: justify; text-columns-count: 2”>…</p>

two columns

<p style=”text-align: justify; text-columns-count: 3”>…</p>

three columns

There are 2 possible ways for rendering non-text elements

  1. Column width will be adjusted so that the non-text element will fit entirely into the column
  2. Non-text element will be cutted on column border

two columns with image

two columns with image cutted

Advantages against conventional methods

  1. It's more clear code i.e. it isn't necessary to use many combinations of different properties to achieve the same behaviour.
  2. Avoids the usage of <table> elements in HTML code
  3. Data could be stored into one context i.e. between one <element></element>

There could be an additional 'text-columns-width' property to specify the width of each column.

'text-columns-width'

Value: <length> | <percentage> | inherit
Initial: 0
Percentages: refer to width of containing block
Applies to: block-level elements, table cells and inline blocks
Media: visual
Computed value: as specified

Example: "text-align: justify; text-columns-count:3; text-colums-width: 55% 30% 15%;" which would be the same as "text-align: justify; text-columns: 3 55% 30% 15%;"

custom column width

Recommendation by: Benjamin Kalytta