:first-letter

:first-letter

[4] ::first-letter 擬似要素要素の最初の letter を表します。 これは initial caps (drop caps) を実現するのに便利です。 >>5

仕様書

適用対象

[19] ::first-letter 擬似要素CSS ではブロック水準包含子 (ブロックlist-itemtable-celltable-captioninline-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.
... となります >>5div の最初のテキストp 内にあるので、架空開始タグもその中となります。 p擬似要素div擬似要素の内側となります。

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

[12] 「最初の letter」が他の要素にまたがる場合には一方または両方の要素から ::first-letter 擬似要素を作成しても構いませんし、擬似要素を作成しなくても構いません。 >>5

[13] 例えば

<p>'<em>T...
... は「'T」が ::first-element に含まれるべきところですが、子要素にまたがっているので、 どちらか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

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

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

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

CSS2

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

メモ

[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

[49] 怪獣少女オオサカさんはTwitterを使っています 「『206便消滅す』のトドラは東宝怪獣マグマの改造だが目や髭、腹の色に違いがある。作中で万丈目が巨大なアザラシと言い原色怪獣怪人大百科でもアザラシとトドのハーフと記載されているがセイウチの口髭を無くし鼻ヒゲを加えた外見。絵物語ではセイウチそのままのトドラが描かれている。 #ウルトラQ https://t.co/4x8Dw5pCGo」 / Twitter, , https://twitter.com/osakaayumu/status/1442499476740927488

片仮名1文字目。 2文字目の「」や「」は1文字目と分離されてる。