Skip to content

Commit 45b82e9

Browse files
fantasaifantasai
committed
Rearrange ::first-letter section to split out CSS-specific stuff (in response to Anton Prowse <http://lists.w3.org/Archives/Public/www-style/2009Mar/0148.html> comment 8
1 parent 121594e commit 45b82e9

1 file changed

Lines changed: 125 additions & 124 deletions

File tree

‎selectors3/Overview.html‎

Lines changed: 125 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -2095,14 +2095,134 @@ <h5 id="first-formatted-line"><dfn>First formatted line</dfn> definition in CSS<
20952095
<h4><a name=first-letter>7.2. The ::first-letter pseudo-element</a></h4>
20962096

20972097
<p>The <code>::first-letter</code> pseudo-element represents the first
2098-
letter of the first line of a block, if it is not preceded by any
2098+
letter of an element, if it is not preceded by any
20992099
other content (such as images or inline tables) on its line. The
21002100
::first-letter pseudo-element may be used for "initial caps" and "drop
2101-
caps", which are common typographical effects. In CSS this type of initial
2102-
letter is similar to an inline-level element if its 'float' property
2103-
is 'none'; otherwise, it is similar to a floated element.</p>
2101+
caps", which are common typographical effects.</p>
21042102

2105-
<p>In CSS, these are the properties that apply to <code>::first-letter</code>
2103+
<p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps),
2104+
"close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po)
2105+
punctuation classes), that precedes or follows the first letter should
2106+
be included. <a href="#refsUNICODE">[UNICODE]</a></p>
2107+
2108+
<div class="figure">
2109+
<P><img src="first-letter2.gif" alt="Quotes that precede the
2110+
first letter should be included."></p>
2111+
</div>
2112+
2113+
<p>The <code>::first-letter</code> also applies if the first letter is
2114+
in fact a digit, e.g., the "6" in "67 million dollars is a lot of
2115+
money."</p>
2116+
2117+
<p class="note"><strong>Note:</strong>
2118+
In some cases the <code>::first-letter</code> pseudo-element should include
2119+
more than just the first non-punctuation character on a line. For
2120+
example, combining characters must be kept with their base character.
2121+
Additionally, some languages may have specific rules about how to
2122+
treat certain letter combinations. The UA definition of
2123+
<code>::first-letter</code> should include at least the default grapheme
2124+
cluster as defined by UAX29 and may include more than that as appropriate.
2125+
In Dutch, for example, if the letter combination "ij" appears at the
2126+
beginning of an element, both letters should be considered within the
2127+
<code>::first-letter</code> pseudo-element. <a href="#refsUAX29">[UAX29]</a>
2128+
2129+
<p>If the letters that would form the <code>::first-letter</code> are not in the
2130+
same element, such as "'T" in <code>&lt;p>'&lt;em>T...</code>, the UA
2131+
may create a <code>::first-letter</code> pseudo-element from one of the elements,
2132+
both elements, or simply not create a pseudo-element.</p>
2133+
2134+
<p>Similarly, if the first letter(s) of the block are not at the start
2135+
of the line (for example due to bidirectional reordering), then the UA
2136+
need not create the pseudo-element(s).
2137+
2138+
<div class="example">
2139+
<p>Example:</p>
2140+
<p><a name="overlapping-example">The following CSS and HTML example</a> illustrates
2141+
how overlapping pseudo-elements may interact. The first letter of
2142+
each P element will be green with a font size of '24pt'. The rest of
2143+
the first formatted line will be 'blue' while the rest of the
2144+
paragraph will be 'red'.</p>
2145+
2146+
<pre>p { color: red; font-size: 12pt }
2147+
p::first-letter { color: green; font-size: 200% }
2148+
p::first-line { color: blue }
2149+
2150+
&lt;P&gt;Some text that ends up on two lines&lt;/P&gt;</pre>
2151+
2152+
<p>Assuming that a line break will occur before the word "ends", the
2153+
<span class="index-inst" title="fictional tag sequence">fictional tag
2154+
sequence</span> for this fragment might be:</p>
2155+
2156+
<pre>&lt;P&gt;
2157+
&lt;P::first-line&gt;
2158+
&lt;P::first-letter&gt;
2159+
S
2160+
&lt;/P::first-letter&gt;ome text that
2161+
&lt;/P::first-line&gt;
2162+
ends up on two lines
2163+
&lt;/P&gt;</pre>
2164+
2165+
<p>Note that the <code>::first-letter</code> element is inside the <code>::first-line</code>
2166+
element. Properties set on <code>::first-line</code> are inherited by
2167+
<code>::first-letter</code>, but are overridden if the same property is set on
2168+
<code>::first-letter</code>.</p>
2169+
</div>
2170+
2171+
<p>The first letter must occur on the <a
2172+
href="#first-formatted-line">first formatted line.</a> For example, in
2173+
this HTML fragment: <code>&lt;p&gt&lt;br&gt;First...</code> the first line
2174+
doesn't contain any letters and <code>::first-letter</code> doesn't
2175+
match anything (assuming the default style for <code>br</code> in HTML
2176+
4). In particular, it does not match the "F" of "First."
2177+
2178+
<h5>Application in CSS</h5>
2179+
2180+
<p>In CSS, the <code>::first-letter</code> pseudo-element applies to
2181+
block-like containers such as block, list-item, table-cell, table-caption,
2182+
and inline-block elements.
2183+
<span class="note"><strong>Note:</strong> A future version
2184+
of this specification may allow this pseudo-element to apply to more
2185+
display types.</span></p>
2186+
2187+
<p>The <code>::first-letter</code> pseudo-element can be used with all
2188+
such elements that contain text, or that have a descendant in the same
2189+
flow that contains text. A UA should act as if the fictional start tag
2190+
of the ::first-letter pseudo-element is just before the first text of
2191+
the element, even if that first text is in a descendant. </p>
2192+
2193+
<div class="example">
2194+
<p>Example:</p>
2195+
<p>The fictional tag sequence for this HTML fragment:
2196+
<pre>&lt;div>
2197+
&lt;p>The first text.</pre>
2198+
<p>is:
2199+
<pre>&lt;div>
2200+
&lt;p>&lt;div::first-letter>&lt;p::first-letter>T&lt;/...>&lt;/...>he first text.</pre>
2201+
</div>
2202+
2203+
<p>In CSS the first letter of a table-cell or inline-block cannot be the
2204+
first letter of an ancestor element. Thus, in <code>&lt;DIV&gt;&lt;P
2205+
STYLE="display: inline-block">Hello&lt;BR&gt;Goodbye&lt;/P&gt;
2206+
etcetera&lt;/DIV&gt;</code> the first letter of the <code>DIV</code> is not the
2207+
letter "H". In fact, the <code>DIV</code> doesn't have a first letter.
2208+
2209+
<p>If an element is a list item ('display: list-item'), the
2210+
<code>::first-letter</code> applies to the first letter in the
2211+
principal box after the marker. UAs may ignore
2212+
<code>::first-letter</code> on list items with 'list-style-position:
2213+
inside'. If an element has <code>::before</code> or
2214+
<code>::after</code> content, the <code>::first-letter</code> applies
2215+
to the first letter of the element <em>including</em> that content.
2216+
2217+
<div class="example">
2218+
<p>Example:</p>
2219+
<p>After the rule <code>p::before {content: "Note: "}</code>, the selector
2220+
<code>p::first-letter</code> matches the "N" of "Note".</p>
2221+
</div>
2222+
2223+
<p>In CSS a ::first-line pseudo-element is similar to an inline-level element
2224+
if its 'float' property is 'none'; otherwise, it is similar to a floated element.
2225+
The following properties that apply to <code>::first-letter</code>
21062226
pseudo-elements: font properties, 'text-decoration', 'text-transform',
21072227
'letter-spacing', 'word-spacing' (when appropriate), 'line-height',
21082228
'float', 'vertical-align' (only if 'float' is 'none'), margin
@@ -2186,125 +2306,6 @@ <h4><a name=first-letter>7.2. The ::first-letter pseudo-element</a></h4>
21862306
may approximate font sizes, for example to align baselines. Also, the
21872307
glyph outline may be taken into account when formatting.</p>
21882308

2189-
<p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps),
2190-
"close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po)
2191-
punctuation classes), that precedes or follows the first letter should
2192-
be included. <a href="#refsUNICODE">[UNICODE]</a></p>
2193-
2194-
<div class="figure">
2195-
<P><img src="first-letter2.gif" alt="Quotes that precede the
2196-
first letter should be included."></p>
2197-
</div>
2198-
2199-
<p>The <code>::first-letter</code> also applies if the first letter is
2200-
in fact a digit, e.g., the "6" in "67 million dollars is a lot of
2201-
money."</p>
2202-
2203-
<p>In CSS, the <code>::first-letter</code> pseudo-element applies to
2204-
block-like containers such as block, list-item, table-cell, table-caption,
2205-
and inline-block elements.
2206-
<span class="note"><strong>Note:</strong> A future version
2207-
of this specification may allow this pseudo-element to apply to more
2208-
element types.</span></p>
2209-
2210-
<p>The <code>::first-letter</code> pseudo-element can be used with all
2211-
such elements that contain text, or that have a descendant in the same
2212-
flow that contains text. A UA should act as if the fictional start tag
2213-
of the ::first-letter pseudo-element is just before the first text of
2214-
the element, even if that first text is in a descendant.</p>
2215-
2216-
<div class="example">
2217-
<p>Example:</p>
2218-
<p>The fictional tag sequence for this HTML fragment:
2219-
<pre>&lt;div>
2220-
&lt;p>The first text.</pre>
2221-
<p>is:
2222-
<pre>&lt;div>
2223-
&lt;p>&lt;div::first-letter>&lt;p::first-letter>T&lt;/...>&lt;/...>he first text.</pre>
2224-
</div>
2225-
2226-
<p>In CSS the first letter of a table-cell or inline-block cannot be the
2227-
first letter of an ancestor element. Thus, in <code>&lt;DIV&gt;&lt;P
2228-
STYLE="display: inline-block">Hello&lt;BR&gt;Goodbye&lt;/P&gt;
2229-
etcetera&lt;/DIV&gt;</code> the first letter of the <code>DIV</code> is not the
2230-
letter "H". In fact, the <code>DIV</code> doesn't have a first letter.
2231-
2232-
<p>The first letter must occur on the <a
2233-
href="#first-formatted-line">first formatted line.</a> For example, in
2234-
this HTML fragment: <code>&lt;p&gt&lt;br&gt;First...</code> the first line
2235-
doesn't contain any letters and <code>::first-letter</code> doesn't
2236-
match anything (assuming the default style for <code>br</code> in HTML
2237-
4). In particular, it does not match the "F" of "First."
2238-
2239-
<p>In CSS, if an element is a list item ('display: list-item'), the
2240-
<code>::first-letter</code> applies to the first letter in the
2241-
principal box after the marker. UAs may ignore
2242-
<code>::first-letter</code> on list items with 'list-style-position:
2243-
inside'. If an element has <code>::before</code> or
2244-
<code>::after</code> content, the <code>::first-letter</code> applies
2245-
to the first letter of the element <em>including</em> that content.
2246-
2247-
<div class="example">
2248-
<p>Example:</p>
2249-
<p>After the rule <code>p::before {content: "Note: "}</code>, the selector
2250-
<code>p::first-letter</code> matches the "N" of "Note".</p>
2251-
</div>
2252-
2253-
<p class="note"><strong>Note:</strong>
2254-
In some cases the <code>::first-letter</code> pseudo-element should include
2255-
more than just the first non-punctuation character on a line. For
2256-
example, combining characters must be kept with their base character.
2257-
Additionally, some languages may have specific rules about how to
2258-
treat certain letter combinations. The UA definition of
2259-
<code>::first-letter</code> should include at least the default grapheme
2260-
cluster as defined by UAX29 and may include more than that as appropriate.
2261-
In Dutch, for example, if the letter combination "ij" appears at the
2262-
beginning of an element, both letters should be considered within the
2263-
<code>::first-letter</code> pseudo-element. <a href="#refsUAX29">[UAX29]</a>
2264-
2265-
<p>If the letters that would form the <code>::first-letter</code> are not in the
2266-
same element, such as "'T" in <code>&lt;p>'&lt;em>T...</code>, the UA
2267-
may create a <code>::first-letter</code> pseudo-element from one of the elements,
2268-
both elements, or simply not create a pseudo-element.</p>
2269-
2270-
<p>Similarly, if the first letter(s) of the block are not at the start
2271-
of the line (for example due to bidirectional reordering), then the UA
2272-
need not create the pseudo-element(s).
2273-
2274-
<div class="example">
2275-
<p>Example:</p>
2276-
<p><a name="overlapping-example">The following CSS and HTML example</a> illustrates
2277-
how overlapping pseudo-elements may interact. The first letter of
2278-
each P element will be green with a font size of '24pt'. The rest of
2279-
the first formatted line will be 'blue' while the rest of the
2280-
paragraph will be 'red'.</p>
2281-
2282-
<pre>p { color: red; font-size: 12pt }
2283-
p::first-letter { color: green; font-size: 200% }
2284-
p::first-line { color: blue }
2285-
2286-
&lt;P&gt;Some text that ends up on two lines&lt;/P&gt;</pre>
2287-
2288-
<p>Assuming that a line break will occur before the word "ends", the
2289-
<span class="index-inst" title="fictional tag sequence">fictional tag
2290-
sequence</span> for this fragment might be:</p>
2291-
2292-
<pre>&lt;P&gt;
2293-
&lt;P::first-line&gt;
2294-
&lt;P::first-letter&gt;
2295-
S
2296-
&lt;/P::first-letter&gt;ome text that
2297-
&lt;/P::first-line&gt;
2298-
ends up on two lines
2299-
&lt;/P&gt;</pre>
2300-
2301-
<p>Note that the <code>::first-letter</code> element is inside the <code>::first-line</code>
2302-
element. Properties set on <code>::first-line</code> are inherited by
2303-
<code>::first-letter</code>, but are overridden if the same property is set on
2304-
<code>::first-letter</code>.</p>
2305-
</div>
2306-
2307-
23082309
<h4><a name=UIfragments>7.3.</a> <a name=selection>Blank</a></h4>
23092310

23102311
<p>This section intentionally left blank. (This section previously

0 commit comments

Comments
 (0)