Fwd: [css3-multicol] column overflow

---------- Forwarded message ----------
From: Garrett Smith <dhtmlkitchen@gmail.com>
Date: Sat, Oct 18, 2008 at 9:41 AM
Subject: Re: [css3-multicol] column overflow
To: Håkon Wium Lie <howcome@opera.com>
Cc: www-style-request@w3.org


Håkon Wium Lie wrote:
>
> Also sprach David Hyatt:


> But then you're not really honoring the setting on
> 'max-height'/'height' -- you're just interpreting
> 'max-height'/'height' to describe the length of columns rather than
> the height of the element. In which case, perhaps we should solve this
> problem with a 'max-column-length' property instead?
>

Do you mean max-column-count?

The width of each column is determined by its in-flow content.

The number of columns could be determined automatically.

Suppose you have dynamic data and you want this data to be displayed
as a list. Now suppose the list is sometimes very long and usually
very narrow. When it is long and narrow, you want it displayed in
columns, for easy reading and to conserve space. You want multiple
columns when the list is very long and narrow.

The visual design goal is to have the list displayed in columns, not
too tall, as wide as possible, but no wider than the containing block
area (width: auto). The data has variable numbers of items and items
have variable numbers of characters and is localized. To meet the "not
wider than the containing block area" so the number of columns desired
could be reduced to two or even one to accommodate for wide items.

one      fourteen     twenty-seven
two      fifteen      twenty-eight
three    sixteen      twenty-nine
four     seventeen    thirty
five     eighteen     thirty-one
six      nineteen     thirty-two
seven    twenty       thirty-three
eight    twenty-one   thirty-four
nine     twenty-two   thirty-five
ten      twenty-three thirty-six
eleven   twenty-four  thirty-seven
twelve   twenty-five  thirty-eight
thirteen twenty-six   thirty-nine

The desired layout is to have items rendered as columns following the
direction (ltr here).

one
two
three


and not:

one two three

Something like:

<ol style="min-column-count: 1;
          max-column-count: 3;
          column-gap: 20px;
          list-style-position: inside;
          max-height: 14em">
 <li>one</li>
 ...


Garrett

> -h&kon
>              Håkon Wium Lie                          CTO °þe(R)ª
> howcome@opera.com                  http://people.opera.com/howcome
>
>

Received on Sunday, 19 October 2008 16:21:47 UTC