Re: [css3-multicol] Nested multicolumn elements rendering

"Gérard Talbot" <www-style@gtalbot.org> writes:

> Hello,
>
> http://www.gtalbot.org/BrowserBugsSection/CSS3Multi-Columns/Opera/multicol-height-block-child-001-GT.xht
>
> I'm trying to better understand nested multi-columns. Can anyone please
> explain to me what would be the expected layout of this test ? And give
> me some hints about the logic of such rendering.

See http://www.w3.org/TR/css3-multicol/#the-multi-column-model and what
it has to say about rows. You'll end up creating one row in the inner
multicol for each outer column (in your test, all the text actually fits
in the first outer column, but the inner multicol itself is taller, so
it takes up space in the second outer column as well; whether there is a
content-less row there or just no content is probably unknown and
irrelevant). The spec says "paginated" and "page" all the time, but it
should apply just as much to outer multicol containers, and even
regions.

Example:

<div style="columns:2; column-fill:auto; column-rule:thin solid; height:4em; line-height:1em;">
  <div style="columns:2;">
    aaa<br>
    bbb<br>
    ccc<br>
    ddd<br>
    eee<br>
    fff<br>
    ggg<br>
    hhh<br>
    iii<br>
    jjj<br>
    kkk<br>
    lll<br>
  </div>
</div>

This should render like this:

aaa      eee    | iii      kkk
bbb      fff    | jjj      lll
ccc      ggg    |
ddd      hhh    |

> IE10 and Opera 12.16 render it identically: only the 3 trios of
> "m" are rendered. The 3 trios of "z" are unexpectedly clipped.
>
> Firefox 23 and Prince9
> http://www.gtalbot.org/BrowserBugsSection/CSS3Multi-Columns/Opera/multicol-height-block-child-001-GT.pdf
> render it identically.
>
> Chrome 28.0.1500.95 renders the test differently from all 4 others.

To answer your comment in the file:

> <!-- why do we see only the 3 lines of mmm in Opera 12.16 and IE10 ? -->

Because the inner multicol is set to be exactly as wide as the outer
multicol. Since there are two columns, the right half of the inner
multicol will end up outside the outer column boxes' bounds. The last
three words will end up in a second inner column (still in the first
outer column), which will get clipped, since there are two outer
columns. There are two outer columns because the inner multicol has a
height of 8em, which there isn't room for in the first outer column,
since there's already some "aaa" content there.

So IE10 and Opera (Presto) do it right.

Gecko decides to move the entire inner multicol to a new outer
column. That seems unnecessary, although in this particular case it does
make more content visible. :) Oh, it actually appears that Gecko doesn't
allow/support fragmentation of multicol containers at all.

The WebKit/Blink implementation of nested multicol is basically missing
(I'm working on it), and what you see is really just the effect of NOT
supporting nested multicol.

> I've added vendor-prefixes and web-embedded Ahem font to make the test
> easier to check in different browsers.

Ah, an opportunity for my daily Ahem rant... :)

Ahem makes text unreadable! (well, duh)

Rather than using Ahem in the test, you could set line-height and only
use explicit line breaks, and not provide any automatic line break
opportunities (avoid white-space altogether, or set
white-space:nowrap). Then it would be easier see the "mmm"s and so
on. :)

-- 
---- Morten Stenshorne, developer, Opera Software ASA ----
------------------ http://www.opera.com/ -----------------

Received on Thursday, 8 August 2013 09:55:13 UTC