Re: two new specs: mediaqueries nad multicol

Hĺkon Wium Lie wrote:
> Two new CSS specifications are available:
> 
>   http://www.w3.org/TR/2007/WD-css3-multicol-20070606/

My personal feeling about columns is that they're a nice way to utilise the 
two-dimensional space of a display medium, but you have to be very careful 
with it.

On paper, moving the eye from the bottom of the page to the top of the next 
is relatively easy. On a screen, long columns of text will quite easily go 
off the bottom of the window and require scrolling up and down the page to 
keep track of them. It looks like a potential case of abuse.

Generally, I prefer to have text form a fluid grid of columns in a 
rows-first approach. So, an index of names might go:

   Alice        Bob          Christopher  Derek        Elizabeth
   Francesca    Gerald       Henrietta    Imogen       Jack
   Klaus        Leif         Margaret     Niall        Osman
   Pádraig      ...

Now, how would this work? It would use floats or inline-block. Then we need 
our columns. How wide are they? No idea. This is where adaptive width would 
come in -- just set the width of each element to the widest one. No need to 
worry about trying to guess how many em the longest one is.

In my case, on my site, they're dates, so I know a reasonable width in em 
and I can set a column width.

Next, I need a space between columns to keep them apart. Here's where it 
goes wrong. There's no way I know of to put a space between items that is 
absorbed by the right-hand edge of the container. This causes rather strange 
  layout behaviour.

For a page whose body is delimited | | thus:
  |                                           |

Where "#" is 1em of text space in each element and "-" is the element right 
padding/right margin, you want to have:

  |######---######---######---######---######-|

However, because the padding or margin won't quite fit, you get:

  |######---######---######---######---       |

The last column won't fit -- there's space for the text, and it would 
balance out fine, but the padding or margin used to keep adjacent elements 
apart, also forces the final column to not fit. Windows Explorer has this 
problem with icons -- to remove the scroll bars from the window, you have to 
enlarge the window to have room for not just the icons, but also the final 
spacing after the last row and last column of icons despite it being 
redundant space. Then you end up with a window notably larger than it needs 
to be.

It would be nice if there was a way in CSS to lay out a grid where you could 
put space between horizontal-order columns without defeating the final column.


"Officially", we now have vertical-order columns, but to me, they seem to 
not be as useful for the screen as they could be. They're very good for 
paged media, but for a screen you'd more likely make the page harder to use 
than it ever needed to be (and sites already do make a practice of this with 
tables).


I see this as another call for formal fluid grid support. They really do 
have great uses!

Received on Friday, 8 June 2007 15:38:38 UTC