[4] ::first-letter
擬似要素は要素の最初の letter を表します。
これは initial caps (drop caps) を実現するのに便利です。 >>5
[19] ::first-letter
擬似要素は
CSS ではブロック水準包含子 (ブロック、list-item、table-cell、
table-caption、inline-block など) に適用されます。 >>5
[20] ::first-letter
擬似要素はテキストを含むか、同じフローにあってテキストを含む子孫を持つ要素で使うことができます。
>>5
[9] 「最初の letter」でいう letter には数字 も含まれます。 >>5
[6] 要素の最初が画像や行内表や inline-block など文字以外の内容なら、「最初の letter」 はありません。 >>5
[24] 例えば
<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>... は最初の文字に当たる部分が inline-block であるため、
::first-letter
擬似要素が存在しません >>5。[17] 「最初の letter」は「最初の書式付き行」 (::first-line
)
に含まれているものです。 >>5
[7] 最初の letter の前後に句読点 (Ps, Pe, Pi, Pf, Po の文字) があるなら、これも含めるべきです。 >>5
[8] 最初の letter の前の引用符も含めるべきです。 >>5
[10] 結合文字や言語ごとの規則などにより、句読点でない最初の文字の後に来る文字も含めるべきであることもあります。 「最初の letter」には少なくても default grapheme cluster UAX #29 を含めるべきであり、 必要なら更に後まで含めても構いません。 >>5
[21] ::first-letter
擬似要素も ::first-line
擬似要素と同じ架空タグ列により適用される範囲が説明されています。
[22] ::first-letter
擬似要素の架空開始タグは最初のテキストの直前にあるものとするべきです
>>5。
[23] 例えば
<div> <p>The first text.... の架空タグ列は
<div> <p>div::first-letterp::first-letterT</p::first-letter></div::first-letter>he first text.... となります >>5。
div
の最初のテキストは
p
内にあるので、架空開始タグもその中となります。
p
の擬似要素は div
の擬似要素の内側となります。[12] 「最初の letter」が他の要素にまたがる場合には一方または両方の要素から ::first-letter
擬似要素を作成しても構いませんし、擬似要素を作成しなくても構いません。 >>5
[13] 例えば
<p>'<em>T...... は「'T」が
::first-letter
に含まれるべきところですが、子要素にまたがっているので、
どちらか1文字だけ、2文字とも、あるいは擬似要素なしのいずれかを利用者エージェントは選ぶことができます。
>>5[14] 最初の letter が (bidi などの理由で) 行の先頭に来ない時も、 擬似要素を作らなくても構いません。 >>5
[25] 'list-item'
では、 principle box の最初の letter が ::first-letter
となります。 marker は ::first-letter
ではありません。 >>5
[26] ただし 'list-style-position: inside'
のときは
::first-letter
擬似要素を無視して構いません >>5。
[15] 継承は ::first-line
同様に架空タグ列によって説明されています。
擬似要素はそれが含まれる擬似要素や要素から継承します。
[16] 例えば
<P>Some text that ends up on two lines</P>... に
p { color: red; font-size: 12pt } p::first-letter { color: green; font-size: 200% } p::first-line { color: blue }... が適用されると、架空タグ列は
<P> P::first-line P::first-letter S </P::first-letter>ome text that </P::first-line> ends up on two lines </P>... となります。「S」は 24pt、青色でレンダリングされます。 >>5
[29] 'float'
特性の値が 'none'
であれば、
行内水準要素と同様に扱われます。 >>5
[30] 'float'
特性の値がそれ以外なら、浮動要素と同様に扱われます。
>>5
'text-decoration'
'text-transform'
'letter-spacing'
'word-spacing'
(適当な場合のみ)'line-height'
'float'
'vertical-align'
(>>29 のみ)[32] drop cap / initial cap の適切なレンダリングのために、 line-height, width, height を普通の要素とは違って letter の形に基づき決定して構いません。 フォントの大きさを近似して構いません。 書式付けに当たってグリフの輪郭を考慮して構いません。 >>5
[40] >>39 で :initial
擬似クラスとして追加されました。
(当時は擬似要素はありませんでした。)
[42] >>41 で :first-letter
擬似クラスに改称されました。
p { line-height: 1.1 } p::first-letter { font-size: 3em; font-weight: normal } span { font-weight: bold }... と HTML
<p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br> Erbarremt over my en mijn benaeuwde vesten<br> En arme burgery, en op mijn volcx gebed<br> En dagelix geschrey de bange stad ontzet.... を組み合わせると http://www.w3.org/TR/selectors/initial-cap.png のようにレンダリングされます。
架空開始タグは「H」の直前に挿入されるので、継承順序より「H」は 'font-weight: normal'
となります。またその 'line-height'
は本来 '1.1'
ですが、 >>32
より適切な必要十分の行間でレンダリングされます。 >>5
P { font-size: 12pt; line-height: 1.2 } P::first-letter { font-size: 200%; font-weight: bold; float: left } SPAN { text-transform: uppercase }... と HTML
<P><SPAN>The first</SPAN> few words of an article in The Economist.</P>... は http://www.w3.org/TR/selectors/first-letter.png のようにレンダリングされます。 >>5
'float'
によって「T」は最初の行と2行目にまたがってレンダリングされるようになります。
'line-height'
は本来 '1.2'
ですが、やはり >>32 により必要十分なだけの行間になります。
[1] hail2u.net - Weblog - :first-letter擬似要素と各擬似クラス絡みのInternet Explorer 6のバグ http://hail2u.net/blog/webdesign/first-letter-and-msie-6.html (名無しさん 2006-08-23 00:10:27 +00:00)
[2]
TextノードをDOMツリーから取り除いたとき、first-letter擬似要素内の文字として扱われている文字だけ残る (2007-03-08 17:44:44 +09:00
版) http://quaa.jf.land.to/opera/first-letter
(名無しさん 2007-03-08 11:36:59 +00:00)
[3] IEでfirst-letter疑似要素のセレクタが変:メモランダム ( 版) http://mynotes.jp/blog/2007/03/ie_first_letter
[43] CSS Values and Units Module Level 3 ( ( 版)) http://dev.w3.org/csswg/css-values/#common-keywords
[44] CSS Cascading and Inheritance Level 3 ( ( 版)) http://dev.w3.org/csswg/css-cascade/#initial
[45] [css-pseudo-4] Remove special float case of ::first-letter per WG res… ( (fantasai著, )) https://github.com/w3c/csswg-drafts/commit/74154b526a68af559988829c1a2daa2b1ffa45bc
[46] [css-pseudo-4] `::nth-letter` pseudo-element · Issue #3208 · w3c/csswg-drafts () https://github.com/w3c/csswg-drafts/issues/3208
::first-line
はブロックである要素の内側で行内水準要素よりは外側に架空開始タグを挿入しますが、::first-letter
はより内側に架空開始タグを挿入することになります。