[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

最初の letter

[9] 「最初のletter」でいう letter には数字digit も含まれます。 >>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

[18] 例えば

<p><br>First...
... は最初の行が空で何も letter を含まないので、 ::first-letter 擬似要素は作られません。 >>5

[7] 最初の letter の前後に句読点punctuation (Ps, Pe, Pi, Pf, Po の文字) があるなら、これも含めるべきです。 >>5

[8] 最初の letter の前の引用符も含めるべきです。 >>5

[10] 結合文字や言語ごとの規則などにより、句読点でない最初の文字の後に来る文字も含めるべきであることもあります。 「最初の letter」には少なくても default grapheme cluster UAX #29 を含めるべきであり、 必要なら更に後まで含めても構いません。 >>5

[11] 例えばドイツ語では要素のはじめが「ij」ならこの2文字を共に「最初の letter」 として扱うべきです。 >>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 の擬似要素の内側となります。

[35] ::first-line はブロックである要素の内側で行内水準要素よりは外側に架空開始タグを挿入しますが、 ::first-letter はより内側に架空開始タグを挿入することになります。

[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。

[27] ::before や ::after は、最初の letter の対象に含まれています。 >>5

[28] 例えば 

p::before {content: "Note: "}
... が適用される要素の ::first-letter には「N」が含まれます。 >>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

[31] 次の特性が適用されます。 >>5

[32] drop cap / initial cap の適切なレンダリングのために、 line-height, width, height を普通の要素とは違って letter の形に基づき決定して構いません。 フォントの大きさを近似して構いません。 書式付けに当たってグリフの輪郭を考慮して構いません。 >>5

歴史

CSS1

  • [39] Cascading Style Sheets, level 1 ( 版) http://www.w3.org/TR/WD-css1-951209.html#typo
  • [41] Cascading Style Sheets, level 1 ( 版) http://www.w3.org/TR/WD-css1-951222.html#typo
  • [38] Cascading Style Sheets, level 1 ( 版) http://www.w3.org/TR/CSS1/#the-first-line-pseudo-element

[40] >>39 で :initial 擬似クラスとして追加されました。 (当時は擬似要素はありませんでした。)

[42] >>41 で :first-letter 擬似クラスに改称されました。

[37] CSS1中核では特性の一部または全部を無視してもよいとされていました。

CSS2

  • [36] Selectors ( 版) http://www.w3.org/TR/CSS2/selector.html#first-letter
  • [48] CSS 2, , https://drafts.csswg.org/css2/#ctrlchars

例

[33] CSS

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

[34] CSS

   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 により必要十分なだけの行間になります。

CSS 不使用の事例

[49] Claris Small Business: Contact Us, , https://web.archive.org/web/19970616123551/http://www.claris.com/smallbiz/contact/

メモ

[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