/
259.txt
278 lines (218 loc) · 12 KB
/
259.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
[4] [DFN[[CODE(CSS)@en[[[::first-letter]]]]]] [[擬似要素]]は[[要素]]の最初の [[letter]] を表します。
これは [[initial caps]] ([[drop caps]]) を実現するのに便利です。 [SRC[>>5]]
* 仕様書
[REFS[
- [47] [CITE@en[CSS Pseudo-Elements Module Level 4]], [TIME[2020-12-05T08:14:37.000Z]], [TIME[2020-12-06T02:44:06.607Z]] <https://drafts.csswg.org/css-pseudo/#selectordef-first-letter>
]REFS]
* 適用対象
[19] [CODE(CSS)@en[[[::first-letter]]]] [[擬似要素]]は
[[CSS]] では[[ブロック水準包含子]] ([[ブロック]]、[[list-item]]、[[table-cell]]、
[[table-caption]]、[[inline-block]] など) に適用されます。 [SRC[>>5]]
[20] [CODE(CSS)@en[[[::first-letter]]]] [[擬似要素]]は[[テキスト]]を含むか、同じ[[フロー]]にあって[[テキスト]]を含む[[子孫]]を持つ[[要素]]で使うことができます。
[SRC[>>5]]
* 最初の letter
[9] 「最初の [[letter]]」でいう [[letter]] には[RUBYB[[[数字]]]@en[digit]] も含まれます。 [SRC[>>5]]
[6] [[要素]]の最初が[[画像]]や[[行内表]]や [[inline-block]] など[[文字]]以外の[[内容]]なら、「最初の [[letter]]」
はありません。 [SRC[>>5]]
[EG[
[24] 例えば
[PRE(HTML example code)[
<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>
]PRE]
... は最初の文字に当たる部分が [[inline-block]] であるため、 [CODE(CSS)@en[[[::first-letter]]]]
[[擬似要素]]が存在しません [SRC[>>5]]。
]EG]
[17] 「最初の [[letter]]」は「[[最初の書式付き行]]」 ([CODE(CSS)@en[[[::first-line]]]])
に含まれているものです。 [SRC[>>5]]
[EG[
[18] 例えば
[PRE(HTML example code)[
<p><br>First...
]PRE]
... は最初の行が空で何も [[letter]] を含まないので、 [CODE(CSS)@en[[[::first-letter]]]]
[[擬似要素]]は作られません。 [SRC[>>5]]
]EG]
[7] 最初の [[letter]] の前後に[RUBYB[[[句読点]]]@en[punctuation]]
([[Ps]], [[Pe]], [[Pi]], [[Pf]], [[Po]] の[[文字]]) があるなら、これも含める[['''べきです''']]。
[SRC[>>5]]
[8] 最初の [[letter]] の前の[[引用符]]も含める[['''べきです''']]。 [SRC[>>5]]
[10] [[結合文字]]や[[言語]]ごとの規則などにより、句読点でない最初の[[文字]]の後に来る文字も含めるべきであることもあります。
「最初の [[letter]]」には少なくても [[default grapheme cluster]] [SRC[[[UAX #29]]]] を含めるべきであり、
必要なら更に後まで含めても構いません。 [SRC[>>5]]
[EG[
[11] 例えば[[ドイツ語]]では[[要素]]のはじめが「ij」ならこの2文字を共に「最初の [[letter]]」
として扱うべきです。 [SRC[>>5]]
]EG]
* 架空タグ列
[21] [CODE(CSS)@en[[[::first-letter]]]] [[擬似要素]]も [CODE(CSS)@en[[[::first-line]]]]
[[擬似要素]]と同じ[[架空タグ列]]により適用される範囲が説明されています。
[22] [CODE(CSS)@en[[[::first-letter]]]] [[擬似要素]]の[[架空開始タグ]]は最初の[[テキスト]]の直前にあるものとする[['''べきです''']]
[SRC[>>5]]。
[EG[
[23] 例えば
[PRE(HTML example code)[
<div>
<p>The first text.
]PRE]
... の[[架空タグ列]]は
[PRE(HTML example code)[
<div>
<p><div::first-letter><p::first-letter>T</p::first-letter></div::first-letter>he first text.
]PRE]
... となります [SRC[>>5]]。 [CODE(HTMLe)@en[[[div]]]] の最初の[[テキスト]]は
[CODE(HTMLe)@en[[[p]]]] 内にあるので、架空開始タグもその中となります。
[CODE(HTMLe)@en[[[p]]]] の[[擬似要素]]は [CODE(HTMLe)@en[[[div]]]] の[[擬似要素]]の内側となります。
]EG]
;; [35] [CODE(CSS)@en[[[::first-line]]]] は[[ブロック]]である要素の内側で[[行内水準要素]]よりは外側に[[架空開始タグ]]を挿入しますが、
[CODE(CSS)@en[[[::first-letter]]]] はより内側に[[架空開始タグ]]を挿入することになります。
[12] 「最初の [[letter]]」が他の[[要素]]にまたがる場合には一方または両方の[[要素]]から [CODE(CSS)@en[[[::first-letter]]]]
[[擬似要素]]を作成しても構いませんし、[[擬似要素]]を作成しなくても構いません。 [SRC[>>5]]
[EG[
[13] 例えば
[PRE(HTML example code)[
<p>'<em>T...
]PRE]
... は「'T」が [CODE(CSS)@en[[[::first-element]]]] に含まれるべきところですが、[[子要素]]にまたがっているので、
どちらか1文字だけ、2文字とも、あるいは[[擬似要素]]なしのいずれかを[[利用者エージェント]]は選ぶことができます。
[SRC[>>5]]
]EG]
[14] 最初の [[letter]] が ([[bidi]] などの理由で) [[行]]の先頭に来ない時も、
[[擬似要素]]を作らなくても構いません。 [SRC[>>5]]
* 他の擬似要素との関係
[25] [CODE(CSS)@en['[[list-item]]']] では、 [[principle box]] の最初の [[letter]] が [CODE(CSS)@en[[[::first-letter]]]]
となります。 [[marker]] は [CODE(CSS)@en[[[::first-letter]]]] ではありません。 [SRC[>>5]]
[26] ただし [CODE(CSS)@en['[[list-style-position]]: [[inside]]']] のときは
[CODE(CSS)@en[[[::first-letter]]]] [[擬似要素]]を無視して[['''構いません''']] [SRC[>>5]]。
[27] [CODE(CSS)@en[[[::before]]]] や [CODE(CSS)@en[[[::after]]]] は、最初の [[letter]]
の対象に含まれています。 [SRC[>>5]]
[EG[
[28] 例えば
[PRE(CSS example code)[
p::before {content: "Note: "}
]PRE]
... が適用される[[要素]]の [CODE(CSS)@en[[[::first-letter]]]] には「N」が含まれます。 [SRC[>>5]]
]EG]
* 継承
[15] [[継承]]は [CODE(CSS)@en[[[::first-line]]]] 同様に[[架空タグ列]]によって説明されています。
[[擬似要素]]はそれが含まれる[[擬似要素]]や[[要素]]から[[継承]]します。
[EG[
[16] 例えば
[PRE(HTML example code)[
<P>Some text that ends up on two lines</P>
]PRE]
... に
[PRE(CSS example code)[
p { color: red; font-size: 12pt }
p::first-letter { color: green; font-size: 200% }
p::first-line { color: blue }
]PRE]
... が適用されると、[[架空タグ列]]は
[PRE(HTML example code)[
<P>
<P::first-line>
<P::first-letter>
S
</P::first-letter>ome text that
</P::first-line>
ends up on two lines
</P>
]PRE]
... となります。「S」は 24pt、青色でレンダリングされます。 [SRC[>>5]]
]EG]
* レンダリング
[29] [CODE(CSS)@en['[[float]]']] [[特性]]の値が [CODE(CSS)@en['[[none]]']] であれば、
[[行内水準要素]]と同様に扱われます。 [SRC[>>5]]
[30] [CODE(CSS)@en['[[float]]']] [[特性]]の値がそれ以外なら、[[浮動要素]]と同様に扱われます。
[SRC[>>5]]
[31] 次の[[特性]]が適用されます。 [SRC[>>5]]
- [[フォント特性]]
- [CODE(CSS)@en['[[text-decoration]]']]
- [CODE(CSS)@en['[[text-transform]]']]
- [CODE(CSS)@en['[[letter-spacing]]']]
- [CODE(CSS)@en['[[word-spacing]]']] (適当な場合のみ)
- [CODE(CSS)@en['[[line-height]]']]
- [CODE(CSS)@en['[[float]]']]
- [CODE(CSS)@en['[[vertical-align]]']] (>>29 のみ)
- [[余白特性]]
- [[枠線特性]]
- [[色特性]]
- [[背景特性]]
- 他の[[特性]]を適用して[['''構いません''']]。
[32] [[drop cap]] / [[initial cap]] の適切な[[レンダリング]]のために、 [[line-height]], [[width]],
[[height]] を普通の[[要素]]とは違って [[letter]] の形に基づき決定して[['''構いません''']]。
[[フォント]]の大きさを近似して[['''構いません''']]。
書式付けに当たって[[グリフ]]の輪郭を考慮して[['''構いません''']]。 [SRC[>>5]]
* 歴史
** CSS1
[REFS[
- [39] [CITE[Cascading Style Sheets, level 1]] ([TIME[1999-02-05 02:57:01 +09:00]] 版) <http://www.w3.org/TR/WD-css1-951209.html#typo>
- [41] [CITE[Cascading Style Sheets, level 1]] ([TIME[1999-02-05 02:57:03 +09:00]] 版) <http://www.w3.org/TR/WD-css1-951222.html#typo>
- [38] [CITE[Cascading Style Sheets, level 1]] ([TIME[2008-04-10 02:23:32 +09:00]] 版) <http://www.w3.org/TR/CSS1/#the-first-line-pseudo-element>
]REFS]
[40] >>39 で [DFN[[CODE(CSS)@en[[[:initial]]]]]] [[擬似クラス]]として追加されました。
(当時は[[擬似要素]]はありませんでした。)
[42] >>41 で [CODE(CSS)@en[[[:first-letter]]]] [[擬似クラス]]に改称されました。
[37] [[CSS1中核]]では[[特性]]の一部または全部を[[無視]]してもよいとされていました。
** CSS2
[REFS[
- [36] [CITE@en[Selectors]] ([TIME[2011-06-07 22:09:52 +09:00]] 版) <http://www.w3.org/TR/CSS2/selector.html#first-letter>
- [48] [CITE@en[CSS 2]], [TIME[2020-12-05T08:16:39.000Z]], [TIME[2020-12-06T02:45:01.465Z]] <https://drafts.csswg.org/css2/#ctrlchars>
]REFS]
* 例
[EG[
[33] [[CSS]]
[PRE(CSS example code)[
p { line-height: 1.1 }
p::first-letter { font-size: 3em; font-weight: normal }
span { font-weight: bold }
]PRE]
... と [[HTML]]
[PRE(HTML example code)[
<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.
]PRE]
... を組み合わせると <http://www.w3.org/TR/selectors/initial-cap.png> のようにレンダリングされます。
[[架空開始タグ]]は「H」の直前に挿入されるので、継承順序より「H」は [CODE(CSS)@en['[[font-weight]]: [[normal]]']]
となります。またその [CODE(CSS)@en['[[line-height]]']] は本来 [CODE(CSS)@en['1.1']] ですが、 >>32
より適切な必要十分の行間でレンダリングされます。 [SRC[>>5]]
]EG]
[EG[
[34] [[CSS]]
[PRE(CSS example code)[
P { font-size: 12pt; line-height: 1.2 }
P::first-letter { font-size: 200%; font-weight: bold; float: left }
SPAN { text-transform: uppercase }
]PRE]
... と [[HTML]]
[PRE(HTML example code)[
<P><SPAN>The first</SPAN> few words of an article
in The Economist.</P>
]PRE]
... は <http://www.w3.org/TR/selectors/first-letter.png> のようにレンダリングされます。 [SRC[>>5]]
[CODE(CSS)@en['[[float]]']] によって「T」は最初の行と2行目にまたがってレンダリングされるようになります。
[CODE(CSS)@en['[[line-height]]']] は本来 [CODE(CSS)['1.2']] ですが、やはり >>32 により必要十分なだけの行間になります。
]EG]
* メモ
[1]
[CITE[hail2u.net - Weblog - :first-letter擬似要素と各擬似クラス絡みのInternet Explorer 6のバグ]] <http://hail2u.net/blog/webdesign/first-letter-and-msie-6.html>
([[名無しさん]] [WEAK[2006-08-23 00:10:27 +00:00]])
[2]
[CITE@ja[TextノードをDOMツリーから取り除いたとき、first-letter擬似要素内の文字として扱われている文字だけ残る]] ([CODE[2007-03-08 17:44:44 +09:00]] 版) <http://quaa.jf.land.to/opera/first-letter>
([[名無しさん]] [WEAK[2007-03-08 11:36:59 +00:00]])
[3]
[CITE@ja[IEでfirst-letter疑似要素のセレクタが変:メモランダム]] ([TIME[2007-04-03 04:17:47 +09:00]] 版) <http://mynotes.jp/blog/2007/03/ie_first_letter>
[43] [CITE@en[CSS Values and Units Module Level 3]]
( ([TIME[2013-08-23 23:29:23 +09:00]] 版))
<http://dev.w3.org/csswg/css-values/#common-keywords>
[44] [CITE@en[CSS Cascading and Inheritance Level 3]]
( ([TIME[2013-08-23 11:38:39 +09:00]] 版))
<http://dev.w3.org/csswg/css-cascade/#initial>
[45] [CITE@en['''['''css-pseudo-4''']''' Remove special float case of ::first-letter per WG res…]]
( ([[fantasai]]著, [TIME[2016-06-03 06:53:55 +09:00]]))
<https://github.com/w3c/csswg-drafts/commit/74154b526a68af559988829c1a2daa2b1ffa45bc>
[46] [CITE@en['''['''css-pseudo-4''']''' `::nth-letter` pseudo-element · Issue #3208 · w3c/csswg-drafts]]
([TIME[2018-10-27 02:01:48 +09:00]])
<https://github.com/w3c/csswg-drafts/issues/3208>
- [5] [CITE@en[Selectors Level 3]] ([TIME[2011-09-29 22:16:17 +09:00]] 版) <http://www.w3.org/TR/selectors/#first-letter>