Smart Communication Design Company
ホーム > ナレッジ > Blog > Web標準Blog > 2010年12月 > 匿名ボックスに対するtext-indentプロパティの継承

Web標準Blog

Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。

2010年12月3日

匿名ボックスに対する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 インデントする