擬似要素の範囲と架空的タグ列
[7] 仕様書は ::first-line 擬似要素のはたらきを架空タグ列によって説明しています。
[8] CSS で
p::first-line { text-transform: uppercase }... のように最初の行を大文字にするように指定してあったとすると、 HTML<P>This is a somewhat long HTML
paragraph that will be broken into several
lines.</P>
... の架空タグ列は、<P>P::first-line This is a somewhat long HTML
paragraph that </P::first-line> will be broken into several
lines.</P>
... となります。これは例えばTHIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines.
... のようにレンダリングされます。 >>6[9] 擬似要素に含まれる (架空のタグに囲まれる) 範囲は、文字の大きさや利用可能な幅など様々な要因によって、
どこまでが1行目に収まるかによって変わります。したがって文書として予め1行目の範囲を確定しておくことは困難なので、
要素ではなく擬似要素として表すのですね。
[12] HTML のソースコード上の改行の位置は ('white-space: pre' などでもなければ)
関係ありません。[37] ::before や ::after による生成内容も最初の書式付き行に含まれることがあります。
>>6
[13] 擬似要素は子要素を分断させる効果をもたらすこともあります >>6。
[14] 例えば元の HTML が
<P><SPAN class="test"> This is a somewhat long HTML
paragraph that will be broken into several
lines.</SPAN> ...</P>
... であったとしましょう。その架空タグ列は、<P>P::first-line<SPAN class="test"> This is a
somewhat long HTML
paragraph that will </SPAN></P::first-line><SPAN class="test"> be
broken into several
lines.</SPAN> ...</P>
... のように SPAN 要素を P:first-child
擬似要素がいったん閉じて再度開かせる形となっています。 >>6
レンダリング上の行は子要素の境界とは無関係に決まるため、 SPAN
要素が行をまたがることがあり、従って ::first-line 擬似要素とは互い違いになってしまうのですが、
CSS のレンダリングは木構造を前提に規定されているので、このように調整するわけです。[28] 利用者エージェントは架空の開始タグは最も内側のブロック水準要素のすぐ内側にあるものとして扱うべきです。
ただし CSS 2.0 までこの状況について規定していなかったので、著者はこの動作に依存するべきではありません。 >>6
[29] 例えば
<DIV>
<P>First paragraph</P>
<P>Second paragraph</P>
</DIV>
... の架空タグ列は<DIV>
<P>DIV::first-lineP::first-lineFirst paragraph</P::first-line></DIV::first-line></P>
<P>P::first-lineSecond paragraph</P::first-line></P>
</DIV>
... です。 >>6[18] 要素の「最初の書式付けされた行」は同じフローに属するブロック水準の子孫
(つまり浮動や位置付けによってフロー外に置かれていないブロック水準の子孫)
の中に出現するかもしれません。 >>6
[19] 例えば、
<DIV><P>hoge fuga ...</P></DIV>
... の架空タグ列は<DIV><P>DIV:;first-lineP::first-linehoge fuga</P::first-line></DIV::first-line> ...</P></DIV>
... となります。[23] table-cell や inline-block の最初の行は、先祖の最初の書式付けされた行としては扱われません。
>>6
[24] inline-block はそれ全体が行に含まれているので、 inline-block 内の最初の行だけではなく全体が
(更に弟が inline-block と同じ行にあればそれも) ::first-line の後にあるものとして扱われます。
'inline-table' も同様です。
- [20] http://suika.suikawiki.org/gate/2007/cssom/viewer?c=div%3A%3Afirst-line%20%7B%20color%3A%20blue%20%7D;h=%3Cdiv%3E%3Cp%20style%3D%22display%3Ainline-block%22%3Eblue%3Cbr%3Eblue%3C%2FP%3E%20blue%3Cbr%3Eblack;p=n;x=style-element;i=html-div
[25] table-cell はそれが 'display: table' に含まれていれば行の一部となっているわけではないので、
::first-line には含まれません。 ::first-line に相当する部分に
'table' があるなら、 ::first-line は存在しません。
'table-caption' でも同様です。
- [21] http://suika.suikawiki.org/gate/2007/cssom/viewer?c=div%3A%3Afirst-line%20%7B%20color%3A%20blue%20%7D;h=%3Cdiv%3E%3Ctable%3E%3Ctr%3E%3Ctd%3Eblack%3Cbr%3Eblack%3C%2Ftable%3E%20black%3Cbr%3Eblack;p=n;x=style-element;i=html-div
- [22] http://suika.suikawiki.org/gate/2007/cssom/viewer?c=div%3A%3Afirst-line%20%7B%20color%3A%20blue%20%7D;h=%3Cdiv%3E%3Ctable%3E%3Ccaption%3Eblack%3C%2Fcaption%3E%3Ctr%3E%3Ctd%3Eblack%3Cbr%3Eblack%3C%2Ftable%3E%20black%3Cbr%3Eblack;p=n;x=style-element;i=html-div
[26] 最初の書式付けされた行は空の行となることもあります。 >>6
[27] 例えば、
<p><br>hoge
... の最初の行は br までの空の行です。[35] 空要素で行が存在しないときには ::first-line 擬似要素も作られないようです。
[36] >>27 の例のように行はあるけど空の時は ::first-line 擬似要素は存在していそうですがよくわかりません。
[33] ::first-line 擬似要素の処理モデルに関する規定は全体的に曖昧です。