Re: line-height の挙動についての質問 (was RE: ルビと行間についてご意見ください

On 2010/12/19 13:49, Koji Ishii wrote:
> 中野さん、詳しい解説、ほんとうにありがとうございます。実は私もまだline-heightの細かい挙動については勉強中で、とても勉強になりました。
> 
> 本題から大きくずれてしまうのですが、CSS2仕様を読んでいてなかなか理解できない部分があるので質問させてもらってもいいでしょうか？
> 
>> specified value、computed valueは変わっていません。line-heightをblock
>> boxに指定した場合、単に最低値を指定しているだけなんです。inline boxに指
>> 定した場合を無視して分かりやすい名前をつけるなら、min-line-heightプロパ
>> ティなんです。この件についてはline-heightプロパティの定義の最初の段落で
>> 説明されています。
>> http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height
>>
>> # 各valueの定義は仕様書にあります
>> # http://www.w3.org/TR/CSS21/cascade.html#value-stages
> 
> 私も「最低値」なんだと思っていましたが、
> 
> data:text/html,<body style="line-height:1em;">first<br>line<br>line<br>line<br>second<span style="border:blue 1px solid;font-size:400%;">big</span><br>third line</body>
> 
> これをIE以外で表示すると、「最低値」とは異なる挙動になります。絶対値でもないように見えます。
> 
> FireFoxとSafariで同じ表示になるので、どこかを読めばこの挙動の説明が理解できるんだろうと思うんですが、まだ理解できていません。
> 
> もしご存知でしたら、なぜこういう挙動になるか、教えていただけますでしょうか？

私もline stackingは完全には理解できていないので、指摘されたテストケース
のレンダリング結果に関しては完全には説明できません。

最低値に見えないのは"big"が他の行と重なっているからだと思いますが、これ
は最低値を割り込んで重なったわけではありません。<body>でline-height:
1em;としているので、<body>のfont-sizeから計算された、デフォルトのフォン
トサイズの大きさが<span>にそのまま継承されます。つまり、<span>には暗黙で
line-height: 0.25em;が指定されているような状況です。

ただ、ルールがこれだけだと、<span>要素を無視して全ての行が等間隔でレイア
ウトされなくてはいけないように思えますが実際にはどのブラウザでも(IEでも
<!DOCTYPE html>を入れて標準準拠モードにすると他のブラウザと同様の表示に
なります)明らかに<span>のある行の行高が拡張されています。この理由は
ちょっと仕様書とGeckoのソースコードを読んでみましたがまだ理解できていま
せん。

-- 
Masayuki Nakano <masayuki@d-toybox.com>
Manager, Internationalization, Mozilla Japan.

Received on Sunday, 19 December 2010 08:48:57 UTC