- From: Masayuki Nakano <masayuki@d-toybox.com>
- Date: Wed, 22 Dec 2010 15:01:19 +0900
- CC: public-html-ig-jp@w3.org
中野です。 解説ありがとうございます。 ・行内にあるnon-replaced inline boxはそのline-heightではなくcontent heightが行高に影響する というあたりがこの計算結果の奇妙な表示結果の原因なのですね。今更変えるわ けにもいきませんが、line-height値の方がADより小さいときのleadingの計算式 が、意味のないものを算出しているように見えます。 vertical-alignとの絡みも考えると、line-heightの方が大きい時に通用する公 式のみで処理した方がシンプルでよかったのかもしれませんが…… On 2010/12/19 20:09, MURAKAMI Shinyu wrote: > 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/ > > -- Masayuki Nakano <masayuki@d-toybox.com> Manager, Internationalization, Mozilla Japan.
Received on Wednesday, 22 December 2010 06:01:54 UTC