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

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

From: Koji Ishii <kojiishi@gluesoft.co.jp>
Date: Thu, 6 Jan 2011 04:09:02 -0500
To: "www-style@w3.org" <www-style@w3.org>
Message-ID: <A592E245B36A8949BDB0A302B375FB4E0AA8B1C2CB@MAILR001.mail.lan>
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.

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


Regards,
Koji
Received on Thursday, 6 January 2011 09:07:40 GMT

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