匿名ボックスに対するtext-indentプロパティの継承
つい先頃、Google Chromeのバージョンが8にあがりました。Operaは11のBeta、Firefoxは4 Beta 7、IE9はPP7が登場するなど、最新のWebブラウザをとりまく環境は日々変化し続けています。
さて、今日はCSS 2.1の実装、具体的には匿名ブロックボックス (Anonymous block boxes) に継承されるtext-indent
プロパティの実装にまつわる細かい話をします。
結論からいえば、text-indent
プロパティが適用されたブロックボックス以降に登場する匿名ボックスの先頭行には、次に列挙した差異がありました。
使用ブラウザ | 結果 |
---|---|
Firefox 3.6.12 | インデントしない |
Opera 10.63 | インデントしない |
IE8 (IE8 Standards Mode) | インデントする |
Safari 5.0.3 | インデントする |
Google Chrome 8.0.552.215 | インデントする |
具体例
次の(X)HTML断片を例とします:
<p style="text-indent:1em;border:1px solid #000;">
foo
<span style="display:block;border:1px dashed #00f;">bar</span>
baz
</p>
次のp
要素は、前述した(X)HTML断片のレンダリング例です:
foobarbaz
ご覧になっているブラウザによって、baz
のインデント状態が異なっていることでしょう。
CSS 2.1の意図する実装はどれ?
今のところ、どの実装がCSS 2.1仕様の意図した通りのものか(筆者は)判断できていません。折をみて、より詳細な検証を試みたいと考えています。
匿名ブロックボックス、匿名インラインボックス (anonymous inline boxes)、text-indent
の適用条件、ブロック整形文脈 (block formatting contexts) 、インライン整形文脈 (inline formatting context)、行ボックス (line box) 周辺の定義を包括しながら考える必要がありそうです。
参考:エントリ執筆時点における各ブラウザ最新ビルドでの結果
使用ブラウザ | 結果 |
---|---|
mozilla-central Nightly Build Gecko/20101202 Build ID: 20101202030316 |
インデントしない |
Opera 11.0 Beta 1 Presto/2.7.39 Build 1111 |
インデントしない |
IE9 Platform Preview 7 9.0.8023.6000 |
インデントする |
WebKit r72866 | インデントする |