W3C home > Mailing lists > Public > www-style@w3.org > February 2011

RE: [css3-multicol] pseudo-algorithm

From: Sylvain Galineau <sylvaing@microsoft.com>
Date: Fri, 11 Feb 2011 00:22:51 +0000
To: Håkon Wium Lie <howcome@opera.com>
CC: "www-style@w3.org" <www-style@w3.org>
Message-ID: <045A765940533D4CA4933A4A7E32597E2AB5A834@TK5EX14MBXC120.redmond.corp.microsoft.com>
> I've run a simulation to compare the two. 
I know, I saw the earlier results. But it doesn't measure how much surface
goes to content vs. gap in the element. The exercise seems to assume that
the more columns, the better even though the result is a large increase
in the amount of the multicol element's surface dedicated to honoring
the gap. While it can be argued to be what the author wanted - the 
column-width is auto but column-count and column-gap are explicitly 
specified so the algorithm makes every effort to honor the author's
request - I'm not sure this is helpful as it means column-width:auto
might yield poorer result when, for instance, the user snaps/tiles
his window to half the screen space.

In the results below, I go from
> 1200 to 0 in width. The resulting number of columns and their widths are
> shown in the comments to the right (with a "/" between
> them:
> 
> width: 1200; column-gap: 125; column-count: 6; /* current: 6/95 revised
> 6/95 */
> width: 1180; column-gap: 125; column-count: 6; /* current: 6/92 revised
> 6/92 */
> width: 1160; column-gap: 125; column-count: 6; /* current: 6/89 revised
> 6/89 */
> width: 1140; column-gap: 125; column-count: 6; /* current: 6/85 revised
> 6/85 */
> width: 1120; column-gap: 125; column-count: 6; /* current: 6/82 revised
> 6/82 */
> width: 1100; column-gap: 125; column-count: 6; /* current: 6/79 revised
> 6/79 */
> width: 1080; column-gap: 125; column-count: 6; /* current: 6/75 revised
> 6/75 */
> width: 1060; column-gap: 125; column-count: 6; /* current: 6/72 revised
> 6/72 */
> width: 1040; column-gap: 125; column-count: 6; /* current: 6/69 revised
> 6/69 */
> width: 1020; column-gap: 125; column-count: 6; /* current: 6/65 revised
> 6/65 */
> width: 1000; column-gap: 125; column-count: 6; /* current: 6/62 revised
> 6/62 */
> width: 980; column-gap: 125; column-count: 6; /* current: 6/59 revised
> 6/59 */
> width: 960; column-gap: 125; column-count: 6; /* current: 6/55 revised
> 6/55 */
> width: 940; column-gap: 125; column-count: 6; /* current: 6/52 revised
> 6/52 */
> width: 920; column-gap: 125; column-count: 6; /* current: 6/49 revised
> 6/49 */
> width: 900; column-gap: 125; column-count: 6; /* current: 6/45 revised
> 6/45 */
> width: 880; column-gap: 125; column-count: 6; /* current: 6/42 revised
> 6/42 */
> width: 860; column-gap: 125; column-count: 6; /* current: 6/39 revised
> 6/39 */
> width: 840; column-gap: 125; column-count: 6; /* current: 6/35 revised
> 6/35 */
> width: 820; column-gap: 125; column-count: 6; /* current: 6/32 revised
> 6/32 */
> width: 800; column-gap: 125; column-count: 6; /* current: 6/29 revised
> 6/29 */
> width: 780; column-gap: 125; column-count: 6; /* current: 6/25 revised
> 6/25 */
> width: 760; column-gap: 125; column-count: 6; /* current: 6/22 revised
> 6/22 */
> width: 740; column-gap: 125; column-count: 6; /* current: 6/19 revised
> 6/19 */
> width: 720; column-gap: 125; column-count: 6; /* current: 6/15 revised
> 6/15 */
> width: 700; column-gap: 125; column-count: 6; /* current: 6/12 revised
> 6/12 */
> width: 680; column-gap: 125; column-count: 6; /* current: 6/9 revised 6/9
> */
> width: 660; column-gap: 125; column-count: 6; /* current: 6/5 revised 6/5
> */
> width: 640; column-gap: 125; column-count: 6; /* current: 6/2 revised 6/2
> */
> width: 620; column-gap: 125; column-count: 6; /* current: 4/61 revised
> 5/24 */
> width: 600; column-gap: 125; column-count: 6; /* current: 4/56 revised
> 5/20 */
> width: 580; column-gap: 125; column-count: 6; /* current: 4/51 revised
> 5/16 */
> width: 560; column-gap: 125; column-count: 6; /* current: 4/46 revised
> 5/12 */
> width: 540; column-gap: 125; column-count: 6; /* current: 4/41 revised 5/8
> */
> width: 520; column-gap: 125; column-count: 6; /* current: 4/36 revised 5/4
> */
> width: 500; column-gap: 125; column-count: 6; /* current: 4/31 revised 5/0
> */
> width: 480; column-gap: 125; column-count: 6; /* current: 3/76 revised
> 4/26 */
> width: 460; column-gap: 125; column-count: 6; /* current: 3/70 revised
> 4/21 */
> width: 440; column-gap: 125; column-count: 6; /* current: 3/63 revised
> 4/16 */
> width: 420; column-gap: 125; column-count: 6; /* current: 3/56 revised
> 4/11 */
> width: 400; column-gap: 125; column-count: 6; /* current: 3/50 revised 4/6
> */
> width: 380; column-gap: 125; column-count: 6; /* current: 3/43 revised 4/1
> */
> width: 360; column-gap: 125; column-count: 6; /* current: 2/117 revised
> 3/36 */
> width: 340; column-gap: 125; column-count: 6; /* current: 2/107 revised
> 3/30 */
> width: 320; column-gap: 125; column-count: 6; /* current: 2/97 revised
> 3/23 */
> width: 300; column-gap: 125; column-count: 6; /* current: 2/87 revised
> 3/16 */
> width: 280; column-gap: 125; column-count: 6; /* current: 2/77 revised
> 3/10 */
> width: 260; column-gap: 125; column-count: 6; /* current: 2/67 revised 3/3
> */
> width: 240; column-gap: 125; column-count: 6; /* current: 1/240 revised
> 2/57 */
> width: 220; column-gap: 125; column-count: 6; /* current: 1/220 revised
> 2/47 */
> width: 200; column-gap: 125; column-count: 6; /* current: 1/200 revised
> 2/37 */
> width: 180; column-gap: 125; column-count: 6; /* current: 1/180 revised
> 2/27 */
> width: 160; column-gap: 125; column-count: 6; /* current: 1/160 revised
> 2/17 */
> width: 140; column-gap: 125; column-count: 6; /* current: 1/140 revised
> 2/7 */
> width: 120; column-gap: 125; column-count: 6; /* current: 1/120 revised
> 1/120 */
> width: 100; column-gap: 125; column-count: 6; /* current: 1/100 revised
> 1/100 */
> width: 80; column-gap: 125; column-count: 6; /* current: 1/80 revised 1/80
> */
> width: 60; column-gap: 125; column-count: 6; /* current: 1/60 revised 1/60
> */
> width: 40; column-gap: 125; column-count: 6; /* current: 1/40 revised 1/40
> */
> width: 20; column-gap: 125; column-count: 6; /* current: 1/20 revised 1/20
> */
> width: 0; column-gap: 125; column-count: 6; /* current: 1/0 revised 1/0 */
> 
> In both cases, we will have to deal with very narrow colunmns. 
That is a rather generous statement given cases like this:

> width: 360; column-gap: 125; column-count: 6; /* current: 2/117 revised
> 3/36 */

The revised algorithm shrinks the column width by 70% ! In general, the proposed
revision is worst as the number of columns goes down as the extra gap added by
the new column is substracted from fewer columns.


> I doubt that there's much to gain. 
I'm not worried about gaining right now. I'm worried about losing quite a bit of
Content space for a poorer result.

> 
> However, I agree it's one of the options. Let's try list the options:
> 
> 1) keep the current algorithm
> 
>    + easy
>    - gives us abrupt changes (6 -> 4) in #columns

I don't understand why abrupt changes in number of columns is an issue. The solution
you propose can result in drastic changes in the amount of space available for content.
Why isn't that a relevant factor ?

> 
> 2) revise line 24 (by adding 1)
> 
>    + no abrupt changes in #columns
>    + more consistant column widths
>    - more situations where columns are narrow

See above. The result is less space available for content. 

> 3) always honor column-count
> 
>    + that'll teach'em
>    + easy
>    - more situationw where column widths are zero

I'll assume this is here for completeness.

> 4) go to 1 column as soon as column-width reaches zero
> 
>    + easy
>    - abrupt chance

So by abrupt you really mean, 'furthest from specified column-count'. 

> 5) try adjust column-gap as the width decreases
> 
>    + smooth, if we find the right formula
>    - complex?
>    - doesn't honor 'column-gap'

Agree with those. My suggestion was to treat column-gap as a max-column-gap.
I assume the content of the multicol is the most important part for the author
and the user, so when available space is scarce column-gap always loses.

> 6) introduce min-column-width (probably in combination with 2)
> 
>    + fewer narrow columns
>    - would bring us back to last call
>    - more complex to implement
>    - there would still be lots of clipping

Definitely more complex; #5 seems less complex and achieve some of this by
allowing column-gaps to shrink.
Received on Friday, 11 February 2011 00:23:24 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:37 GMT