Re: Column proposal in CSS-3

On Wed, 13 Oct 1999, Bob wrote:

> There is a need for a 'column-rule-draw' property. This would take
> the values 'between' 'left' 'sides' 'right' 'all'. Between would
> only draw column rules between columns, left only to the left of the
> first column, sides, to the left and right of the first column,
> right to the right of the last column, and all on all sides and
> between.

This would be very easy to do (and be much more flexible) if instead
of the syntax currently proposed [1], a variation on "variation #2"
(mentioned right at the bottom of the document) is used.

This would only introduce one new pseudo-element and one new value for
the 'display' property. (As opposed to the plethora of new properties
that the current proposal introduces.)

You would first specify that your element (in this example a P
element) is to be rendered using columns:

   P { display: columns; }

...or, if you want a specific number of columns:

   P { display: 3 columns; }

The syntax is simply [<number>? 'columns']. If the number is not
specified, then the width of the columns is taken from each column's
'width' property (see below) and the number of columns is the number
of columns that will fit in the element's content area.

You would then specify the default styles for the columns of that
element, using the :column pseudo-element:

   P:column {  /* matches all columns on P elements */
      width: 20%; 
      padding: 1.25%;
      margin: 1.25%;
   }

...or:

   P:column {  /* matches all columns on P elements */
      width: auto; 
      padding: 1em;
      margin: 1em;
   }

And you would then give rules particular to a specific column:

   P:column(1) {
      border-left: solid;
   }

   P:column(2) {
      background: black; 
      color: white;
      font-weight: bolder;
   }

...or whatever. The 'display' property does not apply to :column
pseudo-elements, but almost everything else does.

To simulate your 'column-rule-draw' property, you would then do this:
  'between':
      P:column { border-left: solid }
      P:column(1) { border-left: none; }
      
  'left' 
      P { border-left: solid }

  'sides' 
      P { border-left: solid; border-right: solid; }

  'right' 
      P { border-right: solid }

  'all'.
      P { border-left: solid; border-right: solid; }
      P:column { border-left: solid }
      P:column(1) { border-left: none; }


Columns are treated as block boxes in most respects, the main
exception being how widths are calculated.

If a specific number of columns is given and one or more of the widths
are given as 'auto', then the current algorithm for calculating
'width' is used, but with the additional constraints that:

   1. The margins, borders, padding and widths of all the columns must
   add up to the containing block's content width, not just one box's.

   2. If any of the 'margin' values are 'auto' at the same time as any
   of the other 'width' values are 'auto', then all the auto margin
   values are made to go to zero.

   2. If more than one 'width' is auto then they must all solve to the
   same value, and similarly for multiple auto margin values.

If no specific number of columns is given, then the number of columns
that will fit inside the element's content area is used. So for
example, with:

   P { width: 300px; display: columns; }
   P:column { width: 160px; margin: 0; padding: 0; border: none; }

...you would only get one column.

If no columns would fit, then the first column is used anyway, but it
overflows (the exact mechanism for that is controlled by the
'overflow' property of course). 

If any of the 'width's are 'auto', then the first such column is used
to fill the remaining space. So if the first column has width:auto
then there will only be one column. For example:

   P { width: 300px; display: columns; }
   P:column { width: 160px; margin: 0; padding: 0; border: none; }
   P:column(2) { width: auto; }

...gives you two columns, one 160px wide and one 140px wide.
   
 
The only other change I can see is needed is that 'float' would need
to be adjusted so that it does not force 'display' to equal 'block' if
'display' is set to 'columns', otherwise, you cannot float columns.

I should also reiterate at this point the proposal that 'border-width'
should be allowed to take '%' values just like padding and margins.

-- Current Proposal --
[1] http://www.w3.org/TR/css3-multicol

-- 
Ian Hickson
"I take a Professor Bullett approach to my answers. There's a high
probability that they may be right."
  -- Dr Snow; Mechanics Lecturer at Bath University; 1999-03-04

Received on Wednesday, 13 October 1999 16:57:29 UTC