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

少し違いました。shrink-to-fitとavailable-widthの定義は村上さんのおっしゃる通りで、available-widthの定義を縦横混在時に少し変えましょう、という話でした。

●親Blockにheightがある場合、available-widthをそのheightではなくて、残りにする
●村上さんのご指摘通り、available-widthがない場合は100vh
というのがよさそうではないか、というのが今のところの状況です。

CSSのこの辺は難しいですね…


-----Original Message-----
From: public-html-ig-jp-request@w3.org [mailto:public-html-ig-jp-request@w3.org] On Behalf Of Koji Ishii
Sent: Saturday, January 15, 2011 4:15 PM
To: MURAKAMI Shinyu
Cc: public-html-ig-jp@w3.org
Subject: RE: 縦横混在時の auto 値の解釈

shrink-to-fitは、村上さんから説明を聞いた時にはoverflowする、という話だったので、私としては賛成できませんでしたが、Elikaからはoverflowしない、fit-to-contentと同じだ、という説明をしてもらいました。下で参照していただいた式を見る限り、overflowしない、が正しい解釈だと思われます。村上さんの誤解か、私が村上さんから聞き間違えたか、いずれかだと思います。

まだ仕様には反映していませんが、今のところはfit-to-contentが一番有力です。簡単に説明すると
●制約がない場合には、明示的な改行があるまで長い行になる
●制約があり、明示的な改行が制約内であれば、そのコンテンツの長さになる
●制約があり、明示的な改行が制約よりも長ければ、制約の場所によって改行が行われる
最初のケースとしては、橋本さんが以前ご指摘くださった「びっくり」になってしまうデメリットがありますが、それ以外のケースでは、他では実現できない挙動を実現でき、また想定されるユースケースにも一番合うと思います。

また、原則overflowはしない（行数が溢れるとする場合があります）ので、paged mediaの相性も良いと思います。


-----Original Message-----
From: MURAKAMI Shinyu [mailto:murakami@antenna.co.jp] 
Sent: Friday, January 07, 2011 1:41 PM
To: Koji Ishii
Cc: public-html-ig-jp@w3.org
Subject: 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 Saturday, 15 January 2011 19:15:37 UTC