Re: ルビと行間についてご意見ください

Masayuki Nakano <masayuki@d-toybox.com> wrote on 2010/12/19 17:48:33
> On 2010/12/19 13:49, Koji Ishii wrote:
> > 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のソースコードを読んでみましたがまだ理解できていま
> せん。

body の font-size が 12pt、使用されるフォントのA(Ascender)とD(Descender)が、A=0.8em、D=0.2em と仮定して計算してみます。

body の line-height = 1em = 12pt（この値が span にも継承される）

span の font-size = 400% = 48pt
span の inline box の大きさ：
        A = 0.8 * 48pt = 38.4pt
        D = 0.2 * 48pt = 9.6pt
        AD = A + D = 48pt
        L = line-height - AD = 12pt - 48pt = -36pt
        ベースラインより上の高さ A' = A + L/2 = 38.4pt + (-36pt)/2 = 20.4pt
        ベースラインより下の深さ D' = D + L/2 = 9.6pt + (-36pt)/2 = -8.4pt

span 以外の inline box の大きさ：
        A = 0.8 * 12pt = 9.6pt
        D = 0.2 * 12pt = 2.4pt
        AD = A + D = 12pt
        L = line-height - AD = 12pt - 12pt = 0pt
        ベースラインより上の高さ A' = A + L/2 = 9.6pt + 0pt/2 = 9.6pt
        ベースラインより下の深さ D' = D + L/2 = 2.4pt + 0pt/2 = 2.4pt

以上から、この line box の大きさは、
        ベースラインより上の高さ A'(max) = 20.4pt
        ベースラインより下の深さ D'(max) = 2.4pt
        合計 L' = A'(max) + D'(max) = 20.4pt + 2.4pt = 22.8pt

ということで、この行の高さは 22.8pt と、ほかの行 12pt の2倍近くになっているということです。ブラウザの表示とだいたい一致すると思います（実際の A、D の値はフォントによりいくらか変わります）。

--
村上 真雄 (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 Sunday, 19 December 2010 11:09:52 UTC