- From: David Baron <dbaron@netaxs.com>
- Date: Sun, 28 Jun 1998 15:58:34 -0400 (EDT)
- To: www-style@w3.org
- Cc: dbaron@netaxs.com
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
columns.
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
border
column-border[ | -top | -right | -bottom | -left ][ | -width | -color | -style ]
- This, just like border*, would define the border around *each* column.
column-gutter
- 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:
column-break-before
column-break-after
column-break-inside
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