text-decoration の子要素への適用のされかた

公開

更新

第11回 W3C CSS Module 仕様書もくもく会@東京は残念ながら台風の影響でリモートでの参加になりましたが、もくもくした結果をまとめておきます。

読んだところ

ほぼ text-decorationしか読めませんでしたね...

学んだり確認したこと - text-decorationの適用されかた

text-decorationは、Inherited: No(継承: なし)ですが

プロパティはその要素によって生成されるすべてのボックスに影響を与え、そしてさらにインラインを分割する任意のブロックレベルボックスフロー内に伝播される

https://momdo.github.io/css2/text.html#decoration

ので、プロパティとして継承はされませんが、子要素のテキストにも装飾が適用されます。

装飾に使用される色はtext-decorationプロパティがセットされた要素のcolorプロパティの値を使用するので、子要素でcolorプロパティが違う要素であっても装飾の色にはtext-decorationがセットされた要素のcolorが使用されます。

テキスト装飾に要求される色は、'text-decoration'が設定される要素の'color'プロパティ値から算出されなければならない。たとえ子孫要素が異なる'color'値を持つ場合でも、装飾の色は同じままでなければならない。

https://momdo.github.io/css2/text.html#decoration
実例 : color: #d30;の下線も通常テキストの色になっている
text-decoration: underline; color: #d30;
<span style="text-decoration: underline">
text-decoration: underline;
<span style="color: #d30;">color: #d30;</span>
</span>

またテキスト以外(画像やインラインブロック要素)には、装飾はレンダリングされません。

ユーザーエージェントは、テキストでないコンテンツにこれらのテキスト装飾をレンダリングしてはならない。たとえば、画像やインラインブロックに下線を引いてはならない。

https://momdo.github.io/css2/text.html#decoration
実例 : style="display: inline-block;"なテキストには下線がレンダリングされない
text-decoration: underline; display: inline-block;
<span style="text-decoration: underline">
text-decoration: underline;
<span style="display: inline-block">display: inline-block</span>
</span>

CSS Text Decoration Module Level 3 では、text-decoration-skipというプロパティが新しくできていて、そのプロパティの初期値がobjects(画像やインラインブロック)となっていて分かりやすくなったように思いました。

またテキストであれば、空白のテキストノードにも装飾が適用されてしまいますが、将来的には上述のtext-decoration-skipの値をspacesにしてやれば、空白には装飾があたらなくなるので記憶の片隅にでもいれておこうかと。


それにしてもせっかく東京に来ていて久々にオフライン参加できそうだったのに、台風のせいでリモート参加になってしまい残念でした。台風恨めしい... 次回は、9/13(火)とのことですが、東京にいる可能性はちょっと少なめかなあ...