Skip to content

Commit 84bd204

Browse files
committed
Added example about using alphabetic lists as a hack for fixed-width numeric lists.
1 parent 9bdb395 commit 84bd204

2 files changed

Lines changed: 87 additions & 14 deletions

File tree

css3-lists/Overview.html

Lines changed: 52 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@
2424

2525
<h1>CSS Lists and Counters Module Level 3</h1>
2626

27-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 April 2011</h2>
27+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 April 2011</h2>
2828

2929
<dl>
3030
<dt>This version:
3131

32-
<dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-lists-20110423">http://www.w3.org/TR/2011/WD-css3-lists-20110423</a></dd> -->
32+
<dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-lists-20110426">http://www.w3.org/TR/2011/WD-css3-lists-20110426</a></dd> -->
3333
<a
3434
href="http://dev.w3.org/csswg/css3-lists/">http://dev.w3.org/csswg/css3-lists/</a>
3535

@@ -686,13 +686,14 @@ <h4 id=ethiopic-numeric><span class=secno>4.3.1. </span> The &lsquo;<code
686686
<li>Concatenate the groups into one string.
687687
</ol>
688688

689-
<p>This system is defined for all numbers greater than zero. For zero and
690-
negative numbers, instead construct the representation of the counter
691-
value using the &lsquo;<code class=css>decimal</code>&rsquo; style.
689+
<p>For this system, the <a href="#lower-range-bound"><i
690+
title=counter-lower-bound>lower range bound descriptor</i></a> is 1, the
691+
<a href="#upper"><i title=counter-upper-bound>upper range bound
692+
descriptor</i></a> is infinity, and the rest of the descriptors have their
693+
initial value.
692694

693-
<p>The suffix for the ethiopic-numeric numbering systems is a dot (. U+002E
694-
FULL STOP). <span class=issue>Is there a better suffix to use? <strong>The
695-
alphabetic ethiopic systems use a different suffix.</strong></span>
695+
<p class=issue>Is there a better suffix to use than the initial (".")? The
696+
alphabetic ethiopic systems use a different suffix.
696697

697698
<div class=example>
698699
<p>The decimal number 100, in ethiopic, is ፻ U+137B <!-- odd --></p>
@@ -829,12 +830,14 @@ <h4 id=cjk-counter-styles><span class=secno>4.3.2. </span> The CJK longhand
829830
counter value.
830831
</ol>
831832

832-
<p>For all of these counter styles, the suffix is "、" U+3001, the prefix
833-
is the empty string, the fallback style is &lsquo;<code
834-
class=css>cjk-decimal</code>&rsquo;, and the upper range bound is 9999
835-
9999 9999 9999 (one less than 10<sup>16</sup>). For the Chinese and
836-
Japanese styles, the lower range bound is -9999 9999 9999 9999 (one more
837-
than -10<sup>16</sup>); for the Korean styles the lower range bound is 0.
833+
<p>For all of these counter styles, the <a href="#suffix"><i
834+
title=counter-suffix>suffix descriptor</i></a> is "、" U+3001 and the <a
835+
href="#fallback-style"><i title=counter-fallback>fallback
836+
descriptor</i></a> is &lsquo;<code class=css>cjk-decimal</code>&rsquo;.
837+
For Chinese and Japanese, the <i title=counter-lower-range>lower range
838+
bound descriptor</i> is -9999 9999 9999 9999 (-10<sup>16</sup>+1), while
839+
for Korean it's 0. For all of them, the <i title=counter-upper-range>upper
840+
range bound descriptor</i> is 9999 9999 9999 9999 (10<sup>16</sup>-1).
838841

839842
<p>The following tables define the characters used in these styles:
840843

@@ -2571,6 +2574,41 @@ <h4 id=alphabetic><span class=secno>10.1.3. </span> alphabetic</h4>
25712574
correctly.</p>
25722575
</div>
25732576

2577+
<div class=example>
2578+
<p>Alphabetic styles may also be used to simulate a fixed-width numeric
2579+
style:</p>
2580+
2581+
<pre>
2582+
@counter-style fixed-decimal {
2583+
type: alphabetic;
2584+
glyphs: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
2585+
}
2586+
2587+
ol {
2588+
list-style: fixed-decimal;
2589+
counter-reset: list-item: 1111;
2590+
}
2591+
</pre>
2592+
2593+
<p>This will produce lists that look like:</p>
2594+
2595+
<pre>
2596+
0001. One
2597+
0002. Two
2598+
0003. Three
2599+
0004. Four
2600+
0005. Five
2601+
0006. Six
2602+
</pre>
2603+
2604+
<p>Two-digit numbers start at value 11, three-digit numbers start at value
2605+
111, etc..</p>
2606+
2607+
<p class=issue>Should I instead explicitly provide a fixed-width numeric
2608+
counter type? I'd like to see if this sort of numbering is used in the
2609+
wild first.</p>
2610+
</div>
2611+
25742612
<h4 id=symbolic><span class=secno>10.1.4. </span> symbolic</h4>
25752613

25762614
<p>If the type is &lsquo;<code class=css>symbolic</code>&rsquo;, the

css3-lists/Overview.src.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1826,6 +1826,41 @@ <h4>
18261826
correctly.</p>
18271827
</div>
18281828

1829+
<div class='example'>
1830+
<p>Alphabetic styles may also be used to simulate a fixed-width numeric
1831+
style:</p>
1832+
1833+
<pre>
1834+
@counter-style fixed-decimal {
1835+
type: alphabetic;
1836+
glyphs: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
1837+
}
1838+
1839+
ol {
1840+
list-style: fixed-decimal;
1841+
counter-reset: list-item: 1111;
1842+
}
1843+
</pre>
1844+
1845+
<p>This will produce lists that look like:</p>
1846+
1847+
<pre>
1848+
0001. One
1849+
0002. Two
1850+
0003. Three
1851+
0004. Four
1852+
0005. Five
1853+
0006. Six
1854+
</pre>
1855+
1856+
<p>Two-digit numbers start at value 11, three-digit numbers start at
1857+
value 111, etc..</p>
1858+
1859+
<p class='issue'>Should I instead explicitly provide a fixed-width numeric
1860+
counter type? I'd like to see if this sort of numbering is used in the
1861+
wild first.</p>
1862+
</div>
1863+
18291864

18301865
<h4>
18311866
symbolic</h4>

0 commit comments

Comments
 (0)