テキスト装飾
“text-decoration”プロパティなどによってテキストに引かれる下線、上線、取り消し線や影、圏点はまとめて“テキスト装飾(Text Decoration)”と呼ばれます。このうち、下線、上線、取り消し線のみを指す場合は“ライン装飾(Line Decoration)”とも言います。
“text-decoration”プロパティや他の“text-decoration-*”各プロパティがインライン・ボックスに指定されるか伝播するとそのボックスは装飾のためのボックスである“装飾ボックス(Decorating Box)”となります。装飾はこの装飾ボックスのすべての断片に適用されます。装飾はさらにそのインライン・ボックスを分割しているフロー内のブロック・レベルのボックスにも伝播します。
“text-decoration”プロパティや他の“text-decoration-*”各プロパティがインライン整形コンテキストを生成するブロック・コンテナに指定されるか伝播すると装飾はブロック・コンテナのすべてのフロー内のインライン・レベルの子を内包するインライン・レベルのアノニマス・ボックスに伝播します。
“text-decoration”プロパティや他の“text-decoration-*”各プロパティがルビ・コンテナに指定されるか伝播すると装飾はルビ・ベースだけに伝播します。
“text-decoration”プロパティや他の“text-decoration-*”各プロパティが上記以外の種類のボックスでは装飾はボックスのすべてのフロー内の子に伝播します。
下線、上線、取り消し線は非置換要素であるインライン・ボックスにのみ引かれ、そのコンテンツであるすべてのテキストに引かれます。下線、上線、取り消し線はホワイトスペースや文字間、単語間の空白にも引かれますが、行の先頭もしくは最後のホワイトスペースや空白には引かれません。装飾ボックスのマージン、ボーダー、パディングの部分は装飾の対象になりますが、装飾ボックスの子孫となるインライン・ボックスのマージン、ボーダー、パディングの部分は装飾の対象になります。
画像やインライン・ブロック(“display: inline-block;”)などのアトミック・インラインはテキスト装飾の対象にはなりません。
“text-shadow”プロパティによる影や“text-emphasis”プロパティによる圏点はライン装飾とは異なり、継承によって子孫ボックスに適用されます。
装飾ボックスの子孫ボックスを相対位置指定(“position: relative;”)によって移動させると適用されたテキスト装飾は子孫ボックスとともに移動されますが、テキスト装飾の初期位置の計算には影響しません。“visibility”プロパティや“text-shadow”プロパティ、“filter”プロパティなどの視覚効果はこれらが適用されているテキストの一部としてテキスト装飾の見た目に影響します。これはテキスト装飾が祖先ボックスに適用されている場合も同様ですが、テキスト装飾の初期位置や太さ計算には影響しません。
Oct.27th, 2021
