Skip to content

Commit 4cf8a84

Browse files
committed
Rearranged/reworded several things related to generating a representation of a counter value, to make them refer to a central algorithm and make the custom styles properly hook into the set of descriptors.
1 parent ba7d933 commit 4cf8a84

2 files changed

Lines changed: 105 additions & 94 deletions

File tree

css3-lists/Overview.html

Lines changed: 64 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -182,16 +182,12 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
182182
<ul class=toc>
183183
<li><a href="#glyph-counters"><span class=secno>8.1. </span> Glyphs</a>
184184

185-
<li><a href="#complex-counters"><span class=secno>8.2. </span> Complex
186-
counter styles</a>
187-
<ul class=toc>
188-
<li><a href="#ethiopic-numeric"><span class=secno>8.2.1. </span> The
189-
&lsquo;<code class=property>ethiopic-numeric</code>&rsquo; counter
190-
style</a>
185+
<li><a href="#ethiopic-numeric"><span class=secno>8.2. </span> The
186+
&lsquo;<code class=property>ethiopic-numeric</code>&rsquo; counter
187+
style </a>
191188

192-
<li><a href="#cjk-counter-styles"><span class=secno>8.2.2. </span> The
193-
Chinese longhand counter styles</a>
194-
</ul>
189+
<li><a href="#cjk-counter-styles"><span class=secno>8.3. </span> The
190+
Chinese longhand counter styles </a>
195191
</ul>
196192

197193
<li><a href="#counter-style"><span class=secno>9. </span> Defining Custom
@@ -993,14 +989,15 @@ <h3 id=content-property><span class=secno>6.1. </span> Generating the
993989
href="#list-style-type"><code
994990
class=property>list-style-type</code></a>&rsquo; is the name of a counter
995991
style, then the computed value of the &lsquo;<code
996-
class=property>content</code>&rsquo; property is &lsquo;<code
997-
class=css>counter(list-item, <a
998-
href="#ltcounter-style"><i>&lt;counter-style></i></a>)</code>&rsquo;,
999-
where <a href="#ltcounter-style"><i>&lt;counter-style></i></a> is the
992+
class=property>content</code>&rsquo; property is
993+
<code>&lt;counter-prefix> counter(list-item, &lt;counter-name>)
994+
&lt;counter-suffix></code>, where <i>&lt;counter-name></i> is the
1000995
computed value of the &lsquo;<a href="#list-style-type"><code
1001-
class=property>list-style-type</code></a>&rsquo; property, followed by a
1002-
string that is the suffix for the counter style in question (which may be
1003-
empty). <span class=issue>Fix this.</span>
996+
class=property>list-style-type</code></a>&rsquo; property and
997+
<i>&lt;counter-prefix></i> and <i>&lt;counter-suffix></i> are the values
998+
of the <a href="#prefix"><i title=counter-prefix>prefix</i></a> and <a
999+
href="#suffix"><i title=counter-suffix>suffix</i></a> descriptors for the
1000+
counter style with that name.
10041001

10051002
<li>Otherwise the computed value is &lsquo;<a href="#none"><code
10061003
class=css>none</code></a>&rsquo;.
@@ -1089,6 +1086,14 @@ <h2 id=predefined-counters><span class=secno>8. </span> Predefined Counter
10891086
require special handling beyond what can be expressed in a stylesheet,
10901087
though. Those counter styles are described in this section.
10911088

1089+
<p>The counter styles specified in this section have custom <a
1090+
href="#algorithm"><i title=counter-algorithm>algorithms for generating
1091+
counter values</i></a>, but are otherwise identical to a counter style
1092+
defined via the &lsquo;<code class=css>@counter-style</code>&rsquo; rule,
1093+
described below. For example, an author can reference one of these styles
1094+
in an &lsquo;<code class=property>override</code>&rsquo; type, reusing the
1095+
algorithm but swapping out some of the other descriptors.
1096+
10921097
<h3 id=glyph-counters><span class=secno>8.1. </span> Glyphs</h3>
10931098

10941099
<p>CSS 2.1 defined three single-glyph counter styles (&lsquo;<code
@@ -1123,23 +1128,8 @@ <h3 id=glyph-counters><span class=secno>8.1. </span> Glyphs</h3>
11231128
<dd>A filled square, similar to ■ U+25A0 BLACK SQUARE.
11241129
</dl>
11251130

1126-
<h3 id=complex-counters><span class=secno>8.2. </span> Complex counter
1127-
styles</h3>
1128-
1129-
<p>Nearly all counter styles can be described using the small set of
1130-
algorithms described by the &lsquo;<a href="#type"><code
1131-
class=property>type</code></a>&rsquo; descriptor. A small handful, though,
1132-
require more complex handling which is too specialized to warrant crafting
1133-
a generalized algorithm to use in &lsquo;<a href="#type"><code
1134-
class=property>type</code></a>&rsquo;. Instead, their algorithms are
1135-
described here. Just like a counter style defined with the @counter-style
1136-
rule, these counter styles can be overridden by creating another
1137-
@counter-style rule with the same name, or can be used in the &lsquo;<code
1138-
class=property>override</code>&rsquo; type to alter their descriptors
1139-
while keeping the algorithms described here.
1140-
1141-
<h4 id=ethiopic-numeric><span class=secno>8.2.1. </span> The &lsquo;<code
1142-
class=property>ethiopic-numeric</code>&rsquo; counter style</h4>
1131+
<h3 id=ethiopic-numeric><span class=secno>8.2. </span> The &lsquo;<code
1132+
class=property>ethiopic-numeric</code>&rsquo; counter style</h3>
11431133

11441134
<p>The Ethiopian numbering system is defined for all positive non-zero
11451135
numbers. The following algorithm converts decimal digits to ethiopic
@@ -1328,8 +1318,8 @@ <h4 id=ethiopic-numeric><span class=secno>8.2.1. </span> The &lsquo;<code
13281318
U+137B <!-- odd --> U+137A U+136A. <!-- 90 2 --></p>
13291319
</div>
13301320

1331-
<h4 id=cjk-counter-styles><span class=secno>8.2.2. </span> The Chinese
1332-
longhand counter styles</h4>
1321+
<h3 id=cjk-counter-styles><span class=secno>8.3. </span> The Chinese
1322+
longhand counter styles</h3>
13331323

13341324
<p>Chinese, Japanese, and Korean have longhand counter styles, which have a
13351325
structure similar to "one hundred thirteen thousand and twenty-three" in
@@ -1383,9 +1373,6 @@ <h4 id=cjk-counter-styles><span class=secno>8.2.2. </span> The Chinese
13831373
<li>If the counter value is 0, the representation is the character for 0
13841374
specified for the given counter style. Skip the rest of this algorithm.
13851375

1386-
<li>If the counter value is negative, run the rest of this algorithm with
1387-
the absolute value of the counter value instead.
1388-
13891376
<li>Initially represent the counter value as a decimal number. For each
13901377
digit that is not 0, append the appropriate digit marker to the digit.
13911378
The ones digit has no marker.
@@ -1396,12 +1383,6 @@ <h4 id=cjk-counter-styles><span class=secno>8.2.2. </span> The Chinese
13961383
<li>Drop any trailing zeros and collapse any remaining zeros into a single
13971384
zero digit.
13981385

1399-
<li>For the Korean styles, insert a space (" " U+0020) between each group.
1400-
1401-
<li>If the <var>negative flag</var> was set to true earlier in the
1402-
algorithm, prepend the appropriate negative sign for the given counter
1403-
style to the string.
1404-
14051386
<li>Replace the digits 0-9 with the appropriate character for the given
14061387
counter style. Return the resultant string as the representation of the
14071388
counter value.
@@ -1412,8 +1393,10 @@ <h4 id=cjk-counter-styles><span class=secno>8.2.2. </span> The Chinese
14121393
href="#fallback-style"><i title=counter-fallback>fallback
14131394
descriptor</i></a> is &lsquo;<code class=css>cjk-decimal</code>&rsquo;,
14141395
the <i title=counter-lower-range>lower range bound descriptor</i> is
1415-
-9999, and the <i title=counter-upper-range>upper range bound
1416-
descriptor</i> is 9999.
1396+
-9999, the <i title=counter-upper-range>upper range bound descriptor</i>
1397+
is 9999, and the <a href="#negative-sign"><i
1398+
title=counter-negative>negative sign</i></a> is given in the table of
1399+
glyphs for each style.
14171400

14181401
<p>The following tables define the characters used in these styles:
14191402

@@ -1809,7 +1792,37 @@ <h2 id=counter-style><span class=secno>9. </span> Defining Custom Counter
18091792
href="#glyphs"><code class=css>glyphs</code></a>&rsquo;, and &lsquo;<a
18101793
href="#additive-glyphs"><code class=css>additive-glyphs</code></a>&rsquo;
18111794
properties, but some counter styles instead have their algorithm
1812-
explicitly defined.
1795+
explicitly defined in the <a href="#predefined-counters">Predefined
1796+
Counter Styles</a> section.
1797+
1798+
<p>When asked to <i title=generate-a-counter>generate a counter
1799+
representation</i> using a particular counter style for a particular
1800+
counter value, follow these steps:
1801+
1802+
<ol>
1803+
<li>If the counter value is less than the <a href="#lower-range-bound"><i
1804+
title=counter-lower-bound>lower bound</i></a> or greater than the <a
1805+
href="#upper"><i title=counter-upper-bound>upper bound</i></a> of the
1806+
counter style, exit this algorithm and instead <i
1807+
title=generate-a-counter>generate a counter representation</i> using the
1808+
counter style's fallback style and the same counter value.
1809+
1810+
<li>If the counter value is negative, set the <a
1811+
href="#negative"><var>negative</var></a> flag and run the rest of this
1812+
algorithm with the counter value set to its absolute value instead.
1813+
1814+
<li>Using the counter value and the <a href="#algorithm"><i
1815+
title=counter-algorithm>counter algorithm</i></a> for the counter style,
1816+
generate an initial representation for the counter value.
1817+
1818+
<li>If the <a href="#negative"><var>negative</var></a> flag is set, wrap
1819+
the initial representation in the counter style's <a
1820+
href="#negative-sign"><i title=counter-negative>negative sign</i></a>, as
1821+
specified in the section for the <a
1822+
href="#counter-style-negative">negative descriptor</a>.
1823+
1824+
<li>Return the representation.
1825+
</ol>
18131826

18141827
<p>The general form of an &lsquo;<code
18151828
class=css>@counter-style</code>&rsquo; rule is:
@@ -1949,10 +1962,6 @@ <h4 id=numeric><span class=secno>9.1.2. </span> numeric</h4>
19491962
<li>If <var>I</var> is 0, append <var>glyph(0)</var> to <var>S</var> and
19501963
return <var>S</var>.
19511964

1952-
<li>If <var>I</var> is negative, set <a
1953-
href="#negative"><var>negative</var></a> to true and <var>I</var> to its
1954-
absolute value.
1955-
19561965
<li>While <var>I</var> is not equal to 0:
19571966
<ol>
19581967
<li>Prepend <var>glyph( <var>I</var> mod <var>N</var> )</var> to
@@ -1962,10 +1971,6 @@ <h4 id=numeric><span class=secno>9.1.2. </span> numeric</h4>
19621971
)</code>.
19631972
</ol>
19641973

1965-
<li>If <a href="#negative"><var>negative</var></a> is true, alter
1966-
<var>S</var> according to the counter style's defined <a
1967-
href="#negative-sign"><i title=counter-negative>negative sign</i></a>.
1968-
19691974
<li>Return <var>S</var>.
19701975
</ol>
19711976

@@ -3915,21 +3920,21 @@ <h2 class=no-num id=index>Index</h2>
39153920
<li>range, <a href="#range" title=range><strong>9.5.</strong></a>
39163921

39173922
<li>simp-chinese-formal, <a href="#simp-chinese-formal"
3918-
title=simp-chinese-formal><strong>8.2.2.</strong></a>
3923+
title=simp-chinese-formal><strong>8.3.</strong></a>
39193924

39203925
<li>simp-chinese-informal, <a href="#simp-chinese-informal"
3921-
title=simp-chinese-informal><strong>8.2.2.</strong></a>
3926+
title=simp-chinese-informal><strong>8.3.</strong></a>
39223927

39233928
<li>&lt;string>, <a href="#ltstring"
39243929
title="&lt;string>"><strong>3.</strong></a>
39253930

39263931
<li>suffix, <a href="#suffix0" title=suffix><strong>9.4.</strong></a>
39273932

39283933
<li>trad-chinese-formal, <a href="#trad-chinese-formal"
3929-
title=trad-chinese-formal><strong>8.2.2.</strong></a>
3934+
title=trad-chinese-formal><strong>8.3.</strong></a>
39303935

39313936
<li>trad-chinese-informal, <a href="#trad-chinese-informal"
3932-
title=trad-chinese-informal><strong>8.2.2.</strong></a>
3937+
title=trad-chinese-informal><strong>8.3.</strong></a>
39333938

39343939
<li>type, <a href="#type" title=type><strong>9.1.</strong></a>
39353940
</ul>

css3-lists/Overview.src.html

Lines changed: 41 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -653,10 +653,11 @@ <h3 id='content-property'>
653653

654654
<li>Otherwise, if the computed value of 'list-style-type' is the name
655655
of a counter style, then the computed value of the 'content' property
656-
is ''counter(list-item, <i>&lt;counter-style></i>)'', where
657-
<i>&lt;counter-style></i> is the computed value of the 'list-style-type'
658-
property, followed by a string that is the suffix for the counter style
659-
in question (which may be empty). <span class=issue>Fix this.</span></li>
656+
is <code>&lt;counter-prefix> counter(list-item, &lt;counter-name>) &lt;counter-suffix></code>,
657+
where <i>&lt;counter-name></i> is the computed value of the 'list-style-type'
658+
property and <i>&lt;counter-prefix></i> and <i>&lt;counter-suffix></i> are
659+
the values of the <i title='counter-prefix'>prefix</i> and <i title='counter-suffix'>suffix</i>
660+
descriptors for the counter style with that name.</li>
660661

661662
<li>Otherwise the computed value is ''none''.</li>
662663
</ol>
@@ -725,7 +726,13 @@ <h2 id='predefined-counters'>
725726
contains a required UA stylesheet which defines a large number of counter styles
726727
using the ''@counter-style'' rule. A few styles require special handling beyond
727728
what can be expressed in a stylesheet, though. Those counter styles are described
728-
in this section.
729+
in this section.</p>
730+
731+
<p>The counter styles specified in this section have custom
732+
<i title='counter-algorithm'>algorithms for generating counter values</i>, but are
733+
otherwise identical to a counter style defined via the ''@counter-style'' rule,
734+
described below. For example, an author can reference one of these styles in an
735+
'override' type, reusing the algorithm but swapping out some of the other descriptors.</p>
729736

730737

731738
<h3 id='glyph-counters'>
@@ -760,19 +767,7 @@ <h3 id='glyph-counters'>
760767

761768

762769

763-
<h3 id='complex-counters'>
764-
Complex counter styles</h3>
765-
766-
<p>Nearly all counter styles can be described using the small set of algorithms
767-
described by the 'type' descriptor. A small handful, though, require more complex
768-
handling which is too specialized to warrant crafting a generalized algorithm to
769-
use in 'type'. Instead, their algorithms are described here. Just like a counter style
770-
defined with the @counter-style rule, these counter styles can be overridden by
771-
creating another @counter-style rule with the same name, or can be used in the
772-
'override' type to alter their descriptors while keeping the algorithms described here.</p>
773-
774-
775-
<h4 id='ethiopic-numeric'>
770+
<h3 id='ethiopic-numeric'>
776771
The 'ethiopic-numeric' counter style</h4>
777772

778773
<p>The Ethiopian numbering system is defined for all positive non-zero numbers.
@@ -902,7 +897,7 @@ <h4 id='ethiopic-numeric'>
902897
U+136A. <!-- 90 2 --></p>
903898
</div>
904899

905-
<h4 id='cjk-counter-styles'>
900+
<h3 id='cjk-counter-styles'>
906901
The Chinese longhand counter styles</h4>
907902

908903
<p>Chinese, Japanese, and Korean have longhand counter styles, which have
@@ -949,9 +944,6 @@ <h4 id='cjk-counter-styles'>
949944
<li>If the counter value is 0, the representation is the character for 0
950945
specified for the given counter style. Skip the rest of this algorithm.</li>
951946

952-
<li>If the counter value is negative, run the rest of this algorithm
953-
with the absolute value of the counter value instead.</li>
954-
955947
<li>Initially represent the counter value as a decimal number. For each
956948
digit that is not 0, append the appropriate digit marker to the digit.
957949
The ones digit has no marker.</li>
@@ -962,10 +954,6 @@ <h4 id='cjk-counter-styles'>
962954
<li>Drop any trailing zeros and collapse any remaining zeros into a single
963955
zero digit.</li>
964956

965-
<li>If the <var>negative flag</var> was set to true earlier in the
966-
algorithm, prepend the appropriate negative sign for the given counter
967-
style to the string.</li>
968-
969957
<li>Replace the digits 0-9 with the appropriate character for the given
970958
counter style. Return the resultant string as the representation of the
971959
counter value.</li>
@@ -974,8 +962,9 @@ <h4 id='cjk-counter-styles'>
974962
<p>For all of these counter styles, the <i title='counter-suffix'>suffix descriptor</i>
975963
is "、" U+3001, the <i title='counter-fallback'>fallback descriptor</i> is
976964
''cjk-decimal'', the <i title='counter-lower-range'>lower range bound descriptor</i>
977-
is -9999, and the <i title='counter-upper-range'>upper range bound descriptor</i>
978-
is 9999.</p>
965+
is -9999, the <i title='counter-upper-range'>upper range bound descriptor</i>
966+
is 9999, and the <i title='counter-negative'>negative sign</i> is given in the table
967+
of glyphs for each style.</p>
979968

980969
<p>The following tables define the characters used in these styles:</p>
981970

@@ -1250,7 +1239,30 @@ <h2 id='counter-style'>
12501239

12511240
<p>The algorithm is usually specified implicitly by a combination of the ''type'',
12521241
''glyphs'', and ''additive-glyphs'' properties, but some counter styles
1253-
instead have their algorithm explicitly defined.</p>
1242+
instead have their algorithm explicitly defined in the
1243+
<a href='#predefined-counters'>Predefined Counter Styles</a> section.</p>
1244+
1245+
<p>When asked to <i title='generate-a-counter'>generate a counter representation</i>
1246+
using a particular counter style for a particular counter value, follow these steps:</p>
1247+
1248+
<ol>
1249+
<li>If the counter value is less than the <i title='counter-lower-bound'>lower bound</i>
1250+
or greater than the <i title='counter-upper-bound'>upper bound</i> of the counter
1251+
style, exit this algorithm and instead <i title='generate-a-counter'>generate a counter representation</i>
1252+
using the counter style's fallback style and the same counter value.</li>
1253+
1254+
<li>If the counter value is negative, set the <var>negative</var> flag and
1255+
run the rest of this algorithm with the counter value set to its absolute value instead.</li>
1256+
1257+
<li>Using the counter value and the <i title='counter-algorithm'>counter algorithm</i>
1258+
for the counter style, generate an initial representation for the counter value.</li>
1259+
1260+
<li>If the <var>negative</var> flag is set, wrap the initial representation in the
1261+
counter style's <i title='counter-negative'>negative sign</i>, as specified in
1262+
the section for the <a href='#counter-style-negative'>negative descriptor</a>.</li>
1263+
1264+
<li>Return the representation.</li>
1265+
</ol>
12541266

12551267
<p>The general form of an ''@counter-style'' rule is:</p>
12561268

@@ -1370,9 +1382,6 @@ <h4>
13701382
<li>If <var>I</var> is 0, append <var>glyph(0)</var> to
13711383
<var>S</var> and return <var>S</var>.</li>
13721384

1373-
<li>If <var>I</var> is negative, set <var>negative</var> to
1374-
true and <var>I</var> to its absolute value.</li>
1375-
13761385
<li>While <var>I</var> is not equal to 0:
13771386

13781387
<ol>
@@ -1383,9 +1392,6 @@ <h4>
13831392
</ol>
13841393
</li>
13851394

1386-
<li>If <var>negative</var> is true, alter <var>S</var> according to the
1387-
counter style's defined <i title='counter-negative'>negative sign</i>.</li>
1388-
13891395
<li>Return <var>S</var>.</li>
13901396
</ol>
13911397

0 commit comments

Comments
 (0)