Skip to content

Commit ee47d4c

Browse files
fantasaifantasai
committed
Add language variant handling per RFC4647
1 parent 20c86dd commit ee47d4c

2 files changed

Lines changed: 150 additions & 72 deletions

File tree

‎selectors4/Overview.html‎

Lines changed: 111 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,13 @@
1919

2020
<h1 id=title>Selectors Level 4</h1>
2121

22-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 3 January 2012</h2>
22+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 January
23+
2012</h2>
2324

2425
<dl>
2526
<dt>This version: <!--
26-
<dd><a href="http://www.w3.org/TR/2012/ED-selectors4-20120103/">
27-
http://www.w3.org/TR/2012/WD-selectors4-20120103/</a>
27+
<dd><a href="http://www.w3.org/TR/2012/ED-selectors4-20120123/">
28+
http://www.w3.org/TR/2012/WD-selectors4-20120123/</a>
2829
2930
<dt>Editor's draft:
3031
-->
@@ -688,10 +689,11 @@ <h2 id=overview><span class=secno>2. </span> Selectors Overview</h2>
688689
<td>4
689690

690691
<tr>
691-
<td><code>E:lang(fr, en)</code>
692+
<td><code>E:lang(zh, *-hant)</code>
692693

693-
<td>an element of type E in either language "fr" or language "en" (the
694-
document language specifies how language is determined)
694+
<td>an element of type E tagged as being either in Chinese (any dialect
695+
or writing system) or othewise written with traditional Chinese
696+
characters
695697

696698
<td><a href="#lang-pseudo">The :lang() pseudo-class</a>
697699

@@ -2428,33 +2430,36 @@ <h3 id=lang-pseudo><span class=secno>10.2. </span> The language
24282430
is determined, it is possible to write selectors that represent an element
24292431
based on its language. The <code>:lang()</code> pseudo-class represents an
24302432
element that is in one of the languages listed in its argument. It accepts
2431-
a comma-separated list of one or more language identifiers as its
2432-
argument. Each language identifier in <code>:lang()</code> must be a valid
2433-
CSS <a
2433+
a comma-separated list of one or more <i>language ranges</i> as its
2434+
argument. Each <dfn id=language-identifier>language identifier</dfn> in
2435+
<code>:lang()</code> must be a valid CSS <a
24342436
href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifier</a>
2435-
for the selector to be valid. <a href="#CSS21"
2436-
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
2437-
2438-
<p>The language of an element is defined by the document language. For
2439-
example, in HTML <a href="#HTML401"
2440-
rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, the language is
2441-
determined by a combination of the <code>lang</code> attribute,
2442-
information from <code>meta</code> elements, and possibly also the
2443-
protocol (e.g. from HTTP headers). XML languages can use the
2444-
<code>xml:lang</code> attribute to indicate language information for an
2445-
element.
2446-
2447-
<p>The element's language matches a language identifier if the element's
2448-
language value (normalized to BCP 47 syntax if necessary) either is equal
2449-
to the language identifier or begins with the identifier and is
2450-
immediately followed by "-" (U+002D). The matching is performed
2451-
case-insensitively within the ASCII range. The language identifier does
2452-
not need to be a valid language code to perform this comparison.
2437+
<a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> or consist
2438+
of an asterisk (* U+002A) immediately followed by an identifier beginning
2439+
with an ASCII hyphen (U+002D) for the selector to be valid.
2440+
2441+
<p>The <dfn id=language>language</dfn> of an element is defined by the
2442+
document language. For example, in HTML <a href="#HTML401"
2443+
rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, the <a
2444+
href="#language"><i>language</i></a> is determined by a combination of the
2445+
<code>lang</code> attribute, information from <code>meta</code> elements,
2446+
and possibly also the protocol (e.g. from HTTP headers). XML languages can
2447+
use the <code>xml:lang</code> attribute to indicate language information
2448+
for an element.
2449+
2450+
<p>The element's <i>language matches</i> a <i>language range</i> if the
2451+
element's <a href="#language"><i>language</i></a> (normalized to BCP 47
2452+
syntax if necessary) matches the given <i>language range</i> in an
2453+
<i>extended filtering</i> operation per <a href="#RFC4647"
2454+
rel=biblioentry>[RFC4647]<!--{{RFC4647}}--></a> <cite>Matching of Language
2455+
Tags</cite> (section 3.3.2). The matching is performed case-insensitively
2456+
within the ASCII range. The language identifier does not need to be a
2457+
valid language code to perform this comparison.
24532458

24542459
<p class=note><strong>Note:</strong> It is recommended that documents and
24552460
protocols indicate language using codes from BCP 47 <a href="#BCP47"
24562461
rel=biblioentry>[BCP47]<!--{{BCP47}}--></a> or its successor, and by means
2457-
of "xml:lang" attributes in the case of XML-based documents <a
2462+
of <code>xml:lang</code> attributes in the case of XML-based documents <a
24582463
href="#XML10" rel=biblioentry>[XML10]<!--{{XML10}}--></a>. See <a
24592464
href="http://www.w3.org/International/questions/qa-lang-2or3.html"> "FAQ:
24602465
Two-letter or three-letter language codes."</a>
@@ -2490,12 +2495,43 @@ <h3 id=lang-pseudo><span class=secno>10.2. </span> The language
24902495
&lt;/body></pre>
24912496
</div>
24922497

2498+
<div class=example>
2499+
<p>Another difference between <code>:lang(C)</code> and the &lsquo;<code
2500+
class=css>|=</code>&rsquo; operator is that <code>:lang(C)</code>
2501+
performs implicit wildcard matching. For example,
2502+
<code>:lang(de-DE)</code> will match all of &lsquo;<code
2503+
class=css>de-DE</code>&rsquo;, &lsquo;<code
2504+
class=css>de-DE-1996</code>&rsquo;, &lsquo;<code
2505+
class=css>de-Latn-DE</code>&rsquo;, &lsquo;<code
2506+
class=css>de-Latf-DE</code>&rsquo;, &lsquo;<code
2507+
class=css>de-Latn-DE-1996</code>&rsquo;, whereas of those
2508+
<code>[lang|=de-DE]</code> will only match &lsquo;<code
2509+
class=css>de-DE</code>&rsquo; and &lsquo;<code
2510+
class=css>de-DE-1996</code>&rsquo;.
2511+
2512+
<p>To perform wildcard matching on the first subtag (the primary
2513+
language), an asterisk must be used: <code>*-CH</code> will match all of
2514+
&lsquo;<code class=css>de-CH</code>&rsquo;, &lsquo;<code
2515+
class=css>it-CH</code>&rsquo;, &lsquo;<code
2516+
class=css>fr-CH</code>&rsquo;, and &lsquo;<code
2517+
class=css>rm-CH</code>&rsquo;.
2518+
2519+
<p>Note that asterisks are not allowed anywhere else in
2520+
<code>:lang()</code>&lsquo;<code class=css>s language range syntax: they
2521+
only have meaning, and are therefore only allowed, at the beginning.
2522+
</code>
2523+
</div>
2524+
2525+
<p class=note>Wildcard language matching is new in Level 4.
2526+
24932527
<h2 id=ui-states-pseudos><span class=secno>11. </span> The UI states
24942528
pseudo-classes</h2>
24952529

2496-
<h3 id=enableddisabled><span class=secno>11.1. </span> The &lsquo;<code
2497-
class=css>:enabled</code>&rsquo; and &lsquo;<code
2498-
class=css>:disabled</code>&rsquo; pseudo-classes</h3>
2530+
<h3 id=enableddisabled><span class=secno>11.1. </span> The
2531+
&rsquo;&lsquo;<code class=css>:enabled</code>&rsquo;&lsquo;<code
2532+
class=css> and </code>&rsquo;&lsquo;<code
2533+
class=css>:disabled</code>&rsquo;&lsquo;<code class=css>
2534+
pseudo-classes</code></h3>
24992535

25002536
<p>The <code>:enabled</code> pseudo-class represents user interface
25012537
elements that are in an enabled state; such elements have a corresponding
@@ -2516,7 +2552,8 @@ <h3 id=enableddisabled><span class=secno>11.1. </span> The &lsquo;<code
25162552
no effect on the enabled/disabled state of an element.
25172553

25182554
<h3 id=checked><span class=secno>11.2. </span> The selected-option
2519-
pseudo-class &lsquo;<code class=css>:checked</code>&rsquo;</h3>
2555+
pseudo-class &rsquo;&lsquo;<code
2556+
class=css>:checked</code>&rsquo;&lsquo;<code class=css></code></h3>
25202557

25212558
<p>Radio and checkbox elements can be toggled by the user. Some menu items
25222559
are "checked" when the user selects them. When such elements are toggled
@@ -2540,8 +2577,8 @@ <h3 id=checked><span class=secno>11.2. </span> The selected-option
25402577
</div>
25412578

25422579
<h3 id=indeterminate><span class=secno>11.3. </span> The
2543-
indeterminate-value pseudo-class &lsquo;<code
2544-
class=css>:indeterminate</code>&rsquo;</h3>
2580+
indeterminate-value pseudo-class &rsquo;&lsquo;<code
2581+
class=css>:indeterminate</code>&rsquo;&lsquo;<code class=css></code></h3>
25452582

25462583
<p>The <code>:indeterminate</code> pseudo-class applies to UI elements
25472584
whose value is in an indeterminate state. For example, radio and checkbox
@@ -2556,7 +2593,8 @@ <h3 id=indeterminate><span class=secno>11.3. </span> The
25562593
even in a static display.
25572594

25582595
<h3 id=default-pseudo><span class=secno>11.4. </span> The default option
2559-
pseudo-class &lsquo;<code class=css>:default</code>&rsquo;</h3>
2596+
pseudo-class &rsquo;&lsquo;<code
2597+
class=css>:default</code>&rsquo;&lsquo;<code class=css></code></h3>
25602598

25612599
<p>The <dfn id=default-pseudo-class><code>:default</code>
25622600
pseudo-class</dfn> applies to the one or more UI elements that are the
@@ -2569,8 +2607,10 @@ <h3 id=default-pseudo><span class=secno>11.4. </span> The default option
25692607
a selection of pizza toppings for example.
25702608

25712609
<h3 id=validity-pseudos><span class=secno>11.5. </span> The validity
2572-
pseudo-classes &lsquo;<code class=css>:valid</code>&rsquo; and
2573-
&lsquo;<code class=css>:invalid</code>&rsquo;</h3>
2610+
pseudo-classes &rsquo;&lsquo;<code
2611+
class=css>:valid</code>&rsquo;&lsquo;<code class=css> and
2612+
</code>&rsquo;&lsquo;<code class=css>:invalid</code>&rsquo;&lsquo;<code
2613+
class=css></code></h3>
25742614

25752615
<p>An element is <code id=valid-pseudo>:valid</code> or <code
25762616
id=invalid-pseudo>:invalid</code> when its contents or value is,
@@ -2585,8 +2625,10 @@ <h3 id=validity-pseudos><span class=secno>11.5. </span> The validity
25852625
<code>:valid</code>.
25862626

25872627
<h3 id=range-pseudos><span class=secno>11.6. </span> The range
2588-
pseudo-classes &lsquo;<code class=css>:in-range</code>&rsquo; and
2589-
&lsquo;<code class=css>:out-of-range</code>&rsquo;</h3>
2628+
pseudo-classes &rsquo;&lsquo;<code
2629+
class=css>:in-range</code>&rsquo;&lsquo;<code class=css> and
2630+
</code>&rsquo;&lsquo;<code
2631+
class=css>:out-of-range</code>&rsquo;&lsquo;<code class=css></code></h3>
25902632

25912633
<p>The <code id=in-range-psuedo>:in-range</code> and <code
25922634
id=out-of-range-pseudo>:out-of-range</code> pseudo-classes apply only to
@@ -2602,8 +2644,10 @@ <h3 id=range-pseudos><span class=secno>11.6. </span> The range
26022644
"C".
26032645

26042646
<h3 id=opt-pseudos><span class=secno>11.7. </span> The optionality
2605-
pseudo-classes &lsquo;<code class=css>:required</code>&rsquo; and
2606-
&lsquo;<code class=css>:optional</code>&rsquo;</h3>
2647+
pseudo-classes &rsquo;&lsquo;<code
2648+
class=css>:required</code>&rsquo;&lsquo;<code class=css> and
2649+
</code>&rsquo;&lsquo;<code class=css>:optional</code>&rsquo;&lsquo;<code
2650+
class=css></code></h3>
26072651

26082652
<p>A form element is <code id=required-pseudo>:required</code> or <code
26092653
id=optional-pseudo>:optional</code> if a value for it is, respectively,
@@ -2612,8 +2656,10 @@ <h3 id=opt-pseudos><span class=secno>11.7. </span> The optionality
26122656
optional.
26132657

26142658
<h3 id=rw-pseudos><span class=secno>11.8. </span> The mutability
2615-
pseudo-classes &lsquo;<code class=css>:read-only</code>&rsquo; and
2616-
&lsquo;<code class=css>:read-write</code>&rsquo;</h3>
2659+
pseudo-classes &rsquo;&lsquo;<code
2660+
class=css>:read-only</code>&rsquo;&lsquo;<code class=css> and
2661+
</code>&rsquo;&lsquo;<code class=css>:read-write</code>&rsquo;&lsquo;<code
2662+
class=css></code></h3>
26172663

26182664
<p>An element whose contents are not user-alterable is <code
26192665
id=read-only-pseudo>:read-only</code>. However, elements whose contents
@@ -2639,28 +2685,30 @@ <h2 id=structural-pseudos><span class=secno>12. </span> Tree-Structural
26392685
parent. When calculating the position of an element in the list of
26402686
children of its parent, the index numbering starts at 1.
26412687

2642-
<h3 id=root-pseudo><span class=secno>12.1. </span> &lsquo;<code
2643-
class=css>:root</code>&rsquo; pseudo-class</h3>
2688+
<h3 id=root-pseudo><span class=secno>12.1. </span> &rsquo;&lsquo;<code
2689+
class=css>:root</code>&rsquo;&lsquo;<code class=css> pseudo-class</code></h3>
26442690

26452691
<p>The <code>:root</code> pseudo-class represents an element that is the
26462692
root of the document. In HTML 4, this is always the <code>HTML</code>
26472693
element.
26482694

2649-
<h3 id=nth-child-pseudo><span class=secno>12.2. </span> &lsquo;<code
2650-
class=css>:nth-child()</code>&rsquo; pseudo-class</h3>
2695+
<h3 id=nth-child-pseudo><span class=secno>12.2. </span> &rsquo;&lsquo;<code
2696+
class=css>:nth-child()</code>&rsquo;&lsquo;<code class=css>
2697+
pseudo-class</code></h3>
26512698

26522699
<p>The <code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>
26532700
pseudo-class notation represents an element that has
26542701
<var>a</var><code>n</code>+<var>b</var>-1 siblings <strong>before</strong>
26552702
it in the document tree, for any positive integer or zero value of
26562703
<code>n</code>, and has a parent element. For values of <var>a</var> and
2657-
<var>b</var> greater than zero, this effectively divides the element's
2658-
children into groups of <var>a</var> elements (the last group taking the
2659-
remainder), and selecting the <var>b</var>th element of each group. For
2660-
example, this allows the selectors to address every other row in a table,
2661-
and could be used to alternate the color of paragraph text in a cycle of
2662-
four. The <var>a</var> and <var>b</var> values must be integers (positive,
2663-
negative, or zero). The index of the first child of an element is 1.
2704+
<var>b</var> greater than zero, this effectively divides the
2705+
element&rsquo;s children into groups of <var>a</var> elements (the last
2706+
group taking the remainder), and selecting the <var>b</var>th element of
2707+
each group. For example, this allows the selectors to address every other
2708+
row in a table, and could be used to alternate the color of paragraph text
2709+
in a cycle of four. The <var>a</var> and <var>b</var> values must be
2710+
integers (positive, negative, or zero). The index of the first child of an
2711+
element is 1.
26642712

26652713
<p>In addition to this, <code>:nth-child()</code> can take &lsquo;<code
26662714
class=css><code>odd</code></code>&rsquo; and &lsquo;<code
@@ -3885,6 +3933,15 @@ <h3 id=informative-references><span class=secno>20.2. </span> Informative
38853933
</dd>
38863934
<!---->
38873935

3936+
<dt id=RFC4647>[RFC4647]
3937+
3938+
<dd>A. Phillips; M. Davis. <a
3939+
href="http://www.ietf.org/rfc/rfc4647.txt"><cite>Matching of Language
3940+
Tags.</cite></a> September 2006. Internet RFC 4647. URL: <a
3941+
href="http://www.ietf.org/rfc/rfc4647.txt">http://www.ietf.org/rfc/rfc4647.txt</a>
3942+
</dd>
3943+
<!---->
3944+
38883945
<dt id=SELECTORS-API2>[SELECTORS-API2]
38893946

38903947
<dd>Lachlan Hunt. <a

‎selectors4/Overview.src.html‎

Lines changed: 39 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -246,9 +246,10 @@ <h2 id=overview>
246246
<td><a href="#dir-pseudo">The :dir() pseudo-class</a>
247247
<td>4
248248
<tr>
249-
<td><code>E:lang(fr, en)</code>
250-
<td>an element of type E in either language "fr" or language "en"
251-
(the document language specifies how language is determined)
249+
<td><code>E:lang(zh, *-hant)</code>
250+
<td>an element of type E tagged as being either in Chinese
251+
(any dialect or writing system)
252+
or othewise written with traditional Chinese characters
252253
<td><a href="#lang-pseudo">The :lang() pseudo-class</a>
253254
<td>2/4
254255
<tbody>
@@ -1704,29 +1705,32 @@ <h3 id=lang-pseudo>
17041705
represent an element based on its language.
17051706
The <code>:lang()</code> pseudo-class represents an element that
17061707
is in one of the languages listed in its argument. It accepts
1707-
a comma-separated list of one or more language identifiers as its
1708-
argument. Each language identifier in <code>:lang()</code> must be
1709-
a valid CSS <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifier</a>
1710-
for the selector to be valid. [[!CSS21]]
1711-
1712-
<p>The language of an element is defined by the document language.
1713-
For example, in HTML [[HTML401]], the language is determined by a
1708+
a comma-separated list of one or more <i>language ranges</i> as its
1709+
argument. Each <dfn>language identifier</dfn> in <code>:lang()</code>
1710+
must be a valid CSS <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifier</a>
1711+
[[!CSS21]]
1712+
or consist of an asterisk (* U+002A) immediately followed by an identifier
1713+
beginning with an ASCII hyphen (U+002D) for the selector to be valid.
1714+
1715+
<p>The <dfn>language</dfn> of an element is defined by the document language.
1716+
For example, in HTML [[HTML401]], the <i>language</i> is determined by a
17141717
combination of the <code>lang</code> attribute, information from
17151718
<code>meta</code> elements, and possibly also the protocol (e.g.
17161719
from HTTP headers). XML languages can use the <code>xml:lang</code>
17171720
attribute to indicate language information for an element.
17181721

1719-
<p>The element's language matches a language identifier if the element's
1720-
language value (normalized to BCP 47 syntax if necessary) either is equal
1721-
to the language identifier or begins with the identifier and is
1722-
immediately followed by "-" (U+002D).
1722+
<p>The element's <i>language matches</i> a <i>language range</i> if
1723+
the element's <i>language</i> (normalized to BCP 47 syntax if necessary)
1724+
matches the given <i>language range</i> in an <i>extended filtering</i>
1725+
operation per [[RFC4647]] <cite>Matching of Language Tags</cite> (section 3.3.2).
17231726
The matching is performed case-insensitively within the ASCII range.
17241727
The language identifier does not need to be a valid language code to
17251728
perform this comparison.</p>
17261729

17271730
<p class="note"><strong>Note:</strong> It is recommended that
1728-
documents and protocols indicate language using codes from BCP 47 [[BCP47]] or its successor, and by means of
1729-
"xml:lang" attributes in the case of XML-based documents [[XML10]]. See <a
1731+
documents and protocols indicate language using codes from BCP 47 [[BCP47]]
1732+
or its successor, and by means of <code>xml:lang</code> attributes in the
1733+
case of XML-based documents [[XML10]]. See <a
17301734
href="http://www.w3.org/International/questions/qa-lang-2or3.html">
17311735
"FAQ: Two-letter or three-letter language codes."</a></p>
17321736

@@ -1742,8 +1746,8 @@ <h3 id=lang-pseudo>
17421746
:lang(de) &gt; q</pre>
17431747
</div>
17441748

1745-
<p class="note">One difference between <code>:lang(C)</code> and the '|=' operator
1746-
is that the '|=' operator only performs a comparison against a given
1749+
<p class="note">One difference between <code>:lang(C)</code> and the ''|='' operator
1750+
is that the ''|='' operator only performs a comparison against a given
17471751
attribute on the element, while the <code>:lang(C)</code> pseudo-class
17481752
uses the UAs knowledge of the document's semantics to perform the
17491753
comparison.</p>
@@ -1760,6 +1764,23 @@ <h3 id=lang-pseudo>
17601764
&lt;/body></pre>
17611765
</div>
17621766

1767+
<div class=example>
1768+
<p>Another difference between <code>:lang(C)</code> and the ''|='' operator
1769+
is that <code>:lang(C)</code> performs implicit wildcard matching.
1770+
For example, <code>:lang(de-DE)</code> will match all of ''de-DE'',
1771+
''de-DE-1996'', ''de-Latn-DE'', ''de-Latf-DE'', ''de-Latn-DE-1996'',
1772+
whereas of those <code>[lang|=de-DE]</code> will only match ''de-DE'' and
1773+
''de-DE-1996''.
1774+
<p>To perform wildcard matching on the first subtag (the primary language),
1775+
an asterisk must be used: <code>*-CH</code> will match all of ''de-CH'',
1776+
''it-CH'', ''fr-CH'', and ''rm-CH''.
1777+
<p>Note that asterisks are not allowed anywhere else in <code>:lang()</code>'s
1778+
language range syntax: they only have meaning, and are therefore only allowed,
1779+
at the beginning.
1780+
</div>
1781+
1782+
<p class="note">Wildcard language matching is new in Level 4.</p>
1783+
17631784
<h2 id=ui-states-pseudos>
17641785
The UI states pseudo-classes</h2>
17651786

0 commit comments

Comments
 (0)