Re: [css3-multicol] The purpose of multi-column layout?

--------------------------------------------------
From: "HåkonWium Lie" <howcome@opera.com>
Sent: Tuesday, May 25, 2010 2:27 PM
To: "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: <www-style@w3.org>
Subject: Re: [css3-multicol] The purpose of multi-column layout?

> Also sprach Andrew Fedoniouk:
>
> > Simple question: what is the purpose of Multi-column Layout Module
> > http://www.w3.org/TR/css3-multicol/ ? What problems it is trying to 
> > solve?
>
> It avoids too long lines, and it avoids wasting formatting real estate.

That is clear.

>
> Here are some examples where multicol layouts avoid long lines:
>
>  http://www.princexml.com/samples/#wiki
>  http://www.princexml.com/howcome/2008/wikipedia/united-states.pdf
>  http://www.princexml.com/howcome/2008/wikipedia/norway.pdf
>  http://www.princexml.com/howcome/2008/wikipedia/s2.pdf
>
> These are all PDF documents, but CSS should be able to handle
> print/archive as well, and the same issues will appear on wide
> screens.

Theses are PDFs, so for printing. While printed the page
is visible in full for the reader. On screen such layout will not be
so pretty as you don't know height of the view upfront.
See:
http://www.terrainformatica.com/w3/test-columns-floats.htm
http://www.terrainformatica.com/w3/test-columns-floats-fixed.htm
either in FF or GC.

Usually such paginations require some
manual tweaking - even content reordering/editing.
Automatic column balancing of arbitrary content
is a challenging task.

>
> Here are two examples from Wikipedia that uses multi-column layout to
> save real estate:
>
>  http://en.wikipedia.org/wiki/Hordaland
>  http://en.wikipedia.org/wiki/Counties_of_Norway

These are cases better addressable by flexbox [1,2]
or my flow: horizontal-flow | vertical-flow [3]

They allow to replace items not only in this

1. First    3. Third
2. Second   4. Fourth

direction, but also like this:

1. First   2. Second
3. Third   4. Fourth

>
> That is, long lists with short entries are flowed into multi-column
> layouts. What starts out as multi-column markup/styling in the
> Wikipedia source code is currently turned into HTML tables for the
> benefit of browsers that do not support multi-column layouts. When
> browsers support multi-column layouts, it will be natural to use CSS
> for this. By, e.g., setting:
>
>  ul { columns: 15em }

I think that flexes (aka flexbox aka flow/flex) are even better for
such cases as they allow for example to define padding: 0 1*;
and so to position columns in the middle.
Actually multi-column may benefit from flexes too.

>
> the list may be a single column on a small screen and three columns on
> a wider screen. Elegant, no?

In principle - yes.  That is the thing used all over the UI these days.
E.g. here:
http://upload.wikimedia.org/wikipedia/en/c/cb/Windows_Explorer_Windows_7.png
it shows typical flow: horizontal-flow layout. Note: it is quite different
from multi-column but serving the same purposes.

>
> Finally, it should be noted that multicolumn layout on for the wen is
> not an idea from the CSS WG -- Netscape 3 had it:
>
>  http://www.eskimo.com/~bloo/indexdot/html/tagpages/m/multicol.htm
>

Cool, didn't know that, thanks for the link.

[1] XUL FlexBox: http://www.w3.org/TR/css3-flexbox/
[2] XUL FlexBox with flex units: http://www.xanthir.com/:wih
[3] Flow & flexes: 
http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Wednesday, 26 May 2010 04:20:01 UTC