Re: [css3-writing-modes] auto logical width in orthogonal flows

On Thu, Jan 6, 2011 at 1:09 AM, Koji Ishii <kojiishi@gluesoft.co.jp> wrote:
> There's a few e-mails going on in Japanese ML about 'auto' logical width in orthogonal flows, the issue mentioned in writing modes spec[1]. One person preferred 100vh option, but I'd like to understand the results of each option better.
>
> <div id="A" style='width: 300px; writing-mode: horizontal-tb;'>
>  AAA
>  <div id="B" style='writing-mode: vertical-rl;'>BBB</div>
>  CCC
> </div>
>
> B has 'auto' logical width here, so the actual height will be:
> * max-content-size: the height of the string "BBB"
> * 100vh: the height of the viewport, so there will be vertical scroll
> * same logical width: 300px
> I suppose this is correct understanding, but I'd appreciate if anyone can confirm.

I believe it should either shrink-wrap (your first choice) or be
100vh.  Either seem to be sensical choices in the absence of a
containing block with that dimension set.


> Next, add the height property to the div A:
>
> <div id="A" style='width: 300px; height: 200px; writing-mode: horizontal-tb;'>
>  AAA
>  <div id="B" style='writing-mode: vertical-rl;'>BBB</div>
>  CCC
> </div>
>
> B's height will be:
> * max-content-size: the height of the string "BBB". If (the height of "BBB" + heights of "AAA" and "CCC") exceeds 200px, div A will overflow.
> * 100vh: the height of the viewport, so div A will overflow (assuming your screen is higher than 200px).
> * same logical width: 300px, so div A will overflow.
>
> I would like div B has (200px - the height of "AAA" - the height of "CCC") as the maximum logical width (height) in this case, but if I understand the current spec correctly, none of the options mentioned there give this behavior.
>
> Do I misunderstand the spec?
>
>
> [1] http://dev.w3.org/csswg/css3-writing-modes/#orthogonal-flows

While I see the appeal of making the vertical block take up as much
space as possible without overflowing, I believe it's too magical.
For example, what would happen if you were to add an additional
vertical <div> after the CCC?  Should the BBB block still take up all
the space?  Should it split it equally with the new DDD block?

This case illustrates that using 100vh as the default in the absence
of a container width is probably bad, though, as it produces a really
bad display here.  We should probably shrink-wrap, with a max of
100vh.

This seems like the most reasonable behavior for vertical flexboxes, too.

~TJ

Received on Friday, 4 March 2011 16:49:26 UTC