Re: 縦横混在時の auto 値の解釈

村上です。

縦横混在時の width/height の auto 値の解釈ですが、CSS2.1 仕様での float や inline-block の width の auto 値の解釈方法である "shrink-to-fit width" を元にして考えるのが CSS 仕様として自然ではないかと思っています。

http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins
10.3 Calculating widths and margins
...
  10.3.5 Floating, non-replaced elements
...
   If 'width' is computed as 'auto', the used value is the "shrink-to-fit"
   width.

   Calculation of the shrink-to-fit width is similar to calculating the
   width of a table cell using the automatic table layout algorithm.
   Roughly: calculate the preferred width by formatting the content
   without breaking lines other than where explicit line breaks occur, and
   also calculate the preferred minimum width, e.g., by trying all
   possible line breaks. CSS 2.1 does not define the exact algorithm.
   Thirdly, find the available width: in this case, this is the width of
   the containing block minus the used values of 'margin-left',
   'border-left-width', 'padding-left', 'padding-right',
   'border-right-width', 'margin-right', and the widths of any relevant
   scroll bars.

   Then the shrink-to-fit width is: min(max(preferred minimum width,
   available width), preferred width).
...
  10.3.9 'Inline-block', non-replaced elements in normal flow

   If 'width' is 'auto', the used value is the shrink-to-fit width as for
   floating elements.
...

この shrink-to-fit width の計算式が、縦横混在時の logical width の auto の解釈に使えるだろうと思います。

正確を期するため、width を logical width に直して計算式を書きます：

shrink-to-fit logical width =
           min(max(preferred minimum logical width, 
                   available logical width),
               preferred logical width)

この式での preferred logical width と preferred minimum logical width については、上記 CSS2.1 に書かれているとおりでよいと思います。
preferred logical width は、強制改行以外で改行しない場合に必要な寸法、
preferred minimum logical width は、改行可能なすべての箇所で改行した場合に必要な寸法。（長い分割不可能な単語があればその長さになる）

問題は available logical width をどう定義するかということになります。
これも CSS2.1 の inline-block の場合を考えると参考になると思います。

<p>
  AAA
  <span style="display: inline-block">
    BBB<br/>
    BBBBBBBBBBBBBB<br/>
    BBBBBB BBBBBB BBBBBB
  </span>
  CCC
</p>

CSS2.1 の定義ではこの場合の available width は containing block の幅から、inline-block の margin、border、padding、scroll bar（もしあれば）の分の幅を引いた幅です。
この例では containing block の幅とは p のブロックの幅ということになります。（"AAA" や "CCC" の存在は無関係）

横書きの中の縦書きのブロックの available logical width は、inline-block の場合と同様に考えた場合、containing block の height から margin/border/paddingなどの分を引いた大きさということになります。

<div style='height: 200px; width: 300px; writing-mode: horizontal-tb;'>
 AAA
 <div style='writing-mode: vertical-rl;'>
    BBB<br/>
    BBBBBBBBBBB<br/>
    BBBBBB BBBBBB BBBBBB
 </div>
 CCC
</div>

この例のように、height が明示的に指定されていれば、それを使うので問題ないと思います。
問題は、containing block の height が明示的に指定されていない場合です。その場合は、containing block の height の代わりに、viewport height (100vh) を使うということにすると良いのではないでしょうか。
（基本となる書字方向が縦書きで、縦書きの中の横書きのブロックが問題になる場合は、width と height が逆であり viewport width (100vw）を使う）

ページ媒体の場合、viewport の大きさというのは、ページのマージン領域を除いた本文領域の大きさということになるので、この大きさを使うようにすれば、縦書き／横書きが切り替わったブロックが複数ページに渡るときも問題がありません。

いかがでしょうか。

--
村上 真雄 (MURAKAMI Shinyu)
Twitter: http://twitter.com/MurakamiShinyu
Blog: http://blog.antenna.co.jp/CSSPage/
Antenna House Formatter:
http://www.antenna.co.jp/AHF/

Received on Friday, 7 January 2011 04:41:55 UTC