CSS Wish List - Columns

I have an idea about multi-column text in CSS, and I thought this list
would be a good place to post it, so here goes...

My basic concern is that the current method of rendering multi-column
text, using tables, has a number of problems.  These include:
 - Incompatibility with accessibility guidelines because of screen
   readers, etc, are often confused by tables.
 - Incompatibility with the basic purpose of a table, i.e., redering
   of tabular data.
 - Difficulty in moving column breaks or changing the number of columns.
   The table method requires that column breaks be set manually

I think that the Visual Formatting Model[1] in the CSS2 Standard[2] will
make this possible in another way, although this would again not really
show that what is desired is simply multi-column text.  Additionally,
it would require the author to define the measurements and break the

However, multi-column text is often a good thing *for some user agents*.
That is, it is really a style preference and should be part of the style
and not the HTML.  A long list might best be put in three columns so that
in can be viewed easily on one screen in graphical browsers, but this
would be inappropriate for Lynx or a screen reader.  The use of styles
for this type of formatting allows those user agents where columns are
inappropriate to ignore the suggestion.

My home page[3] is the perfect example of this problem.  I like to be able
to see all of the links on one page, so I use a table to make it two-
column text.  However, for accessibility reasons, I would rather have
this part of a style, so that others can be guaranteed to be able to
access it.  Since few other people use it, I consider it OK to use tables,
since even a browser that doesn't understand table tags would process the
page correctly.  However, one that ignores tables (recognizing the tags)
or reads them in a complicated manner would miss the entire page or distort
the contents.

Therefore, I think CSS could use elements like the following to describe
multi-column text:

These would be valid for any block-level element:

column-number - recommends the number of columns for formatting the block,
  (each block, so would be used with DIV more than P) although the user-agent
  may use fewer columns if needed
 User agents would be free to set the widths of the columns differently like
 they do for tables.

column-padding[ | -top | -right | -bottom | -left ]
 - This would be the space surrounding each column between the text and the
column-border[ | -top | -right | -bottom | -left ][ | -width | -color | -style ]
 - This, just like border*, would define the border around *each* column.
 - this would define the amount of space *between* columns, i.e., between
   the column borders of adjacent columns

The whole system above would then be surrounded by padding, border, and
margins, as follows:

|                              margin                               |
| ----------------------------------------------------------------- |
| |                            border                             | |
| | ------------------------------------------------------------- | |
| | |                          padding                          | | |
| | | ---------------------------   --------------------------- | | |
| | | |       column-border     |col|     column-border       | | | |
| | | | ----------------------- |umn| ----------------------- | | | |
| | | | |     column-padding  | |-gu| |   column-padding    | | | | |
| | | | | ------------------- | |tte| | ------------------- | | | | |
| | | | | |     TEXT        | | | r | | |     TEXT        | | | | | |
   ... and the same thing on the bottom
  - and of course, all elements here except column-gutter can have
     different values on the left, right, top, and bottom, etc.

the following would be allowed in all elements:
  and would be defined just like page-break-* in CSS2, Section 13.3.1 [4]
Sections 13.3.3 to 13.3.6 (on page breaks) would also apply to column breaks

What do you think of this idea?  Any comments are welcome.

David Baron

[1] http://www.w3.org/TR/REC-CSS2/visuren.html
[2] http://www.w3.org/TR/REC-CSS2/
[3] http://www.psych.upenn.edu/~baron/david/
[4] http://www.w3.org/TR/REC-CSS2/page.html#page-breaks

L. David Baron     | Senior, Conestoga HS; Entering Freshman, Harvard
dbaron@netaxs.com  | < http://www.psych.upenn.edu/~baron/david/ >
Webmaster, International Weather Satellite Imagery Center, etc.

Received on Sunday, 28 June 1998 15:58:24 UTC