W3C home > Mailing lists > Public > www-style@w3.org > May 2010

Suggested text for 'column-span'

From: David Hyatt <hyatt@apple.com>
Date: Thu, 20 May 2010 13:41:28 -0500
Message-id: <DA066B33-EB64-4A79-A34D-FA23DD8CF24F@apple.com>
To: www-style list <www-style@w3.org>
Here is my attempt to specify 'column-span' in sufficient detail to implement it.  I thought about this property some more last night, and we already have a model specified in CSS2.1 that resolves most of the issues raised by this property.  That model is blocks inside inlines.  A column-span has many of the same characteristics.  It's an element that splits a chain of block elements.  Using the block-inside-inline model as a guide, we can pretty easily resolve most of the issues with this property.


6.1. 'column-span'

Name: column-span
Value: 1 | all
Initial: 1
Applies to: see below
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified

This property describes how many columns an element spans across. Values are:
The element does not span multiple columns.
The element spans across all columns.
An element that specifies column-span: all is called a spanning element.  In order for an element to be a spanning element, the element must be a block-level element in the normal flow of the enclosing multi-column
block.  When a multi-column block contains a spanning element, all of the containing block ancestors are broken around the spanning element. The column boxes before and after the break are enclosed in anonymous boxes, and the spanning element becomes a sibling of those anonymous boxes. When an enclosing block box is affected by relative positioning, the relative positioning also affects the spanning element.

The properties of anonymous boxes are inherited from the enclosing non-anonymous box. Non-inherited properties have their initial value.  The column properties are inherited by the anonymous box and used to format its contents as multi-column.  The original multi-column block then just contains a sequence of normal block-level boxes, and lays them out as a normal block element would.


The above text is modeled after:


Specifically section

Browsers have already solved most of the issues with block-inside-inline, and all the same rules apply here, i.e., contiguous spanning elements would margin-collapse properly in the above model.  Nested spanning elements would margin-collapse properly.  We know how to render the split block boxes since we have a precedent with inline boxes.

The above model would be very easy to implement in WebKit.


Received on Thursday, 20 May 2010 18:42:01 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:46 UTC