[css-counter-styles-3] Add a 'width' descriptor to @counter-style.

Author: tabatkins

css-counter-styles-3/Overview.html

@@ -10,11 +10,11 @@
 
   <meta content="CSS Counter Styles Level 3" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-02-11 name=dcterms.issued>
+  <meta content=2013-02-19 name=dcterms.issued>
   <meta content="http://dev.w3.org/csswg/css-counter-styles-3/"
    name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
-  <meta content="http://www.w3.org/TR/2013/ED-css-counter-styles-3-20130211/"
+  <meta content="http://dev.w3.org/csswg/css-counter-styles-3/"
    name=dcterms.identifier>
   <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
   <link href="../default.css" rel=stylesheet type="text/css">
@@ -32,13 +32,13 @@
 
    <h1>CSS Counter Styles Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 11 February
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 February
     2013</h2>
 
    <dl>
     <dt>This version:
 
-    <dd><!--<a href="http://www.w3.org/TR/2013/ED-css-counter-styles-3-20130211/">http://www.w3.org/TR/2013/WD-css-counter-styles-3-20130211/</a>-->
+    <dd><!--<a href="http://www.w3.org/TR/2013/ED-css-counter-styles-3-20130219/">http://www.w3.org/TR/2013/WD-css-counter-styles-3-20130219/</a>-->
      <a
      href="http://dev.w3.org/csswg/css-counter-styles-3/">http://dev.w3.org/csswg/css-counter-styles-3/</a>
 
@@ -229,15 +229,19 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
       Limiting the counter scope: the ‘<code class=property>range</code>’
       descriptor</a>
 
-     <li><a href="#counter-style-fallback"><span class=secno>3.6. </span>
+     <li><a href="#counter-style-width"><span class=secno>3.6. </span>
+      Constant-width Representations: the ‘<code
+      class=property>width</code>’ descriptor</a>
+
+     <li><a href="#counter-style-fallback"><span class=secno>3.7. </span>
       Defining fallback: the ‘<code class=property>fallback</code>’
       descriptor</a>
 
-     <li><a href="#counter-style-symbols"><span class=secno>3.7. </span>
+     <li><a href="#counter-style-symbols"><span class=secno>3.8. </span>
       Marker characters: the ‘<code class=property>symbols</code>’ and
       ‘<code class=property>additive-symbols</code>’ descriptors</a>
 
-     <li><a href="#counter-style-speak-as"><span class=secno>3.8. </span>
+     <li><a href="#counter-style-speak-as"><span class=secno>3.9. </span>
       Speech Synthesis: the ‘<code class=property>speak-as</code>’
       descriptor</a>
     </ul>
@@ -789,41 +793,6 @@ <h4 id=alphabetic-system><span class=secno>3.1.4. </span> Bijective
     correctly.
   </div>
 
-  <div class=example>
-   <p>Alphabetic styles may also be used to simulate a fixed-width numeric
-    style:
-
-   <pre>
-@counter-style <dfn id=fixed-decimal>fixed-decimal</dfn> {
-	system: alphabetic;
-	symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
-}
-
-ol { 
-	list-style: fixed-decimal;
-	counter-reset: list-item 1111; 
-}
-		</pre>
-
-   <p>This will produce lists that look like:
-
-   <pre>
-0001.  One
-0002.  Two
-0003.  Three
-0004.  Four
-0005.  Five
-0006.  Six
-		</pre>
-
-   <p>Two-digit numbers start at value 11, three-digit numbers start at value
-    111, etc..
-
-   <p class=issue>Should I instead explicitly provide a fixed-width numeric
-    counter system? I'd like to see if this sort of numbering is used in the
-    wild first.
-  </div>
-
   <p> If there are <var>N</var> <i>counter symbols</i>, the representation is
    a base <var>N</var> alphabetic number using the <i>counter symbols</i> as
    digits. To construct the representation, run the following algorithm:
@@ -1207,7 +1176,67 @@ <h3 id=counter-style-range><span class=secno>3.5. </span> Limiting the
    limits. Should we require UAs to support all values in a signed 2-byte
    int, or a signed 4-byte int?
 
-  <h3 id=counter-style-fallback><span class=secno>3.6. </span> Defining
+  <h3 id=counter-style-width><span class=secno>3.6. </span> Constant-width
+   Representations: the ‘<a href="#descdef-width"><code
+   class=property>width</code></a>’ descriptor</h3>
+
+  <table class=descdef>
+   <tbody>
+    <tr>
+     <th>Name:
+
+     <td><dfn id=descdef-width>width</dfn>
+
+    <tr>
+     <th>Value:
+
+     <td><var>&lt;integer></var> &amp;&amp; <a
+      href="#ltsymbol"><var>&lt;symbol></var></a>
+
+    <tr>
+     <th>Initial:
+
+     <td>0 ""
+  </table>
+
+  <p> The ‘<a href="#descdef-width"><code
+   class=property>width</code></a>’ descriptor allows an author to specify
+   a "fixed-width" counter style, where representations shorter than the
+   width are padded with a particular character.
+
+  <dl>
+   <dt>auto
+
+   <dd> This descriptor has no effect on counter representations.
+
+   <dt><var>&lt;integer></var> &amp;&amp; <a
+    href="#ltsymbol"><var>&lt;symbol></var></a>
+
+   <dd> The <var>&lt;integer></var> specifies a minimum width that all
+    counter representations must reach. If a counter representation would be
+    generated using less <a href="#ltsymbol"><var>&lt;symbol></var></a>s than
+    the specified <var>&lt;integer></var> (before adding
+    prefixes/suffixes/negatives), pad the front of the representation with
+    copies of the specified <a href="#ltsymbol"><var>&lt;symbol></var></a>
+    until the number of symbols reaches the specified width.
+    <p> If the counter value is negative, reduce the width by one or two,
+     depending on whether the second <var>&lt;string></var> value is omitted
+     or provided, respectively, in the ‘<a href="#descdef-negative"><code
+     class=property>negative</code></a>’ descriptor for the given counter
+     style.
+  </dl>
+
+  <div class=example> The most common example of "fixed-width" numbering is
+   zero-padded decimal numbering. If an author knows that the numbers used
+   will be less than a thousand, for example, it can be zero-padded with a
+   simple ‘<code class=css>width: 3 "0";</code>’ descriptor, ensuring
+   that all of the representations are 3 digits wide.
+   <p> This will cause, for example, 1 to be represented as "001", 20 to be
+    represented as "020", 300 to be represented as "300", and -4 to be
+    represented as "-04".
+  </div>
+
+  <h3 id=counter-style-fallback><span class=secno>3.7. </span> Defining
    fallback: the ‘<a href="#descdef-fallback"><code
    class=property>fallback</code></a>’ descriptor</h3>
 
@@ -1260,7 +1289,7 @@ <h3 id=counter-style-fallback><span class=secno>3.6. </span> Defining
    significantly easier for implementations to just detect and reject
    circular fallback graphs, that would probably be acceptable.
 
-  <h3 id=counter-style-symbols><span class=secno>3.7. </span> Marker
+  <h3 id=counter-style-symbols><span class=secno>3.8. </span> Marker
    characters: the ‘<a href="#descdef-symbols"><code
    class=property>symbols</code></a>’ and ‘<a
    href="#descdef-additive-symbols"><code
@@ -1276,7 +1305,7 @@ <h3 id=counter-style-symbols><span class=secno>3.7. </span> Marker
     <tr>
      <th>Value:
 
-     <td>[ &lt;string> | &lt;image> | &lt;identifier> ]+
+     <td><a href="#ltsymbol"><var>&lt;symbol></var></a>+
 
     <tr>
      <th>Initial:
@@ -1294,14 +1323,18 @@ <h3 id=counter-style-symbols><span class=secno>3.7. </span> Marker
     <tr>
      <th>Value:
 
-     <td>[ &lt;integer> && [ &lt;string> | &lt;image> | &lt;identifier> ] ]#
+     <td>[ <var>&lt;integer></var> &amp;&amp; <a
+      href="#ltsymbol"><var>&lt;symbol></var></a> ]#
 
     <tr>
      <th>Initial:
 
      <td>N/A
   </table>
 
+  <pre class=prod><dfn
+   id=ltsymbol>&lt;symbol></dfn> = &lt;string> | &lt;image> | &lt;identifier></pre>
+
   <p>The ‘<a href="#descdef-symbols"><code
    class=property>symbols</code></a>’ and ‘<a
    href="#descdef-additive-symbols"><code
@@ -1360,7 +1393,7 @@ <h3 id=counter-style-symbols><span class=secno>3.7. </span> Marker
    separate it from the following one, or else they'll be considered
    adjacent, and part of the same identifier.
 
-  <h3 id=counter-style-speak-as><span class=secno>3.8. </span> Speech
+  <h3 id=counter-style-speak-as><span class=secno>3.9. </span> Speech
    Synthesis: the ‘<a href="#descdef-speak-as"><code
    class=property>speak-as</code></a>’ descriptor</h3>
 
@@ -3636,7 +3669,7 @@ <h2 class=no-num id=descriptor-index>Descriptor index</h2>
      <th><a class=property
       href="#descdef-additive-symbols">additive-symbols</a>
 
-     <td>[ &lt;integer> && [ &lt;string> | &lt;image> | &lt;identifier> ] ]#
+     <td>[ &lt;integer> &amp;&amp; &lt;symbol> ]#
 
      <td>N/A
 
@@ -3685,7 +3718,7 @@ <h2 class=no-num id=descriptor-index>Descriptor index</h2>
     <tr>
      <th><a class=property href="#descdef-symbols">symbols</a>
 
-     <td>[ &lt;string> | &lt;image> | &lt;identifier> ]+
+     <td>&lt;symbol>+
 
      <td>N/A
 
@@ -3696,6 +3729,13 @@ <h2 class=no-num id=descriptor-index>Descriptor index</h2>
       &lt;integer>?] | [ override &lt;counter-style-name> ]
 
      <td>symbolic
+
+    <tr>
+     <th><a class=property href="#descdef-width">width</a>
+
+     <td>&lt;integer> &amp;&amp; &lt;symbol>
+
+     <td>0 ""
   </table>
   <!--end-descriptors-->
 
@@ -3707,16 +3747,16 @@ <h2 class=no-num id=index>Index</h2>
     href="#additive" title="section 3.1.6."><strong>3.1.6.</strong></a>
 
    <li>additive-symbols, <a href="#descdef-additive-symbols"
-    title="section 3.7."><strong>3.7.</strong></a>
+    title="section 3.8."><strong>3.8.</strong></a>
 
    <li>additive tuple, <a href="#additive-tuple"
-    title="section 3.7."><strong>3.7.</strong></a>
+    title="section 3.8."><strong>3.8.</strong></a>
 
    <li>‘<a href="#speak-as-alphabetic"><code
     class=css>alphabetic</code></a>’, <a href="#alphabetic"
     title="section 3.1.4."><strong>3.1.4.</strong></a>, <a
     href="#speak-as-alphabetic"
-    title="section 3.8."><strong>3.8.</strong></a>
+    title="section 3.9."><strong>3.9.</strong></a>
 
    <li>‘<a href="#armenian"><code class=css>armenian</code></a>’, <a
     href="#armenian" title="section 5.1."><strong>5.1.</strong></a>
@@ -3725,20 +3765,20 @@ <h2 class=no-num id=index>Index</h2>
     title="section ??"><strong>??</strong></a>
 
    <li>‘<a href="#speak-as-auto"><code class=css>auto</code></a>’, <a
-    href="#speak-as-auto" title="section 3.8."><strong>3.8.</strong></a>
+    href="#speak-as-auto" title="section 3.9."><strong>3.9.</strong></a>
 
    <li>box-corner, <a href="#box-corner"
     title="section 3.1.2."><strong>3.1.2.</strong></a>
 
    <li>‘<a href="#speak-as-symbolic"><code class=css>bullet</code></a>’,
     <a href="#speak-as-symbolic"
-    title="section 3.8."><strong>3.8.</strong></a>
+    title="section 3.9."><strong>3.9.</strong></a>
 
    <li>‘<a href="#circle"><code class=css>circle</code></a>’, <a
     href="#circle" title="section 5.3."><strong>5.3.</strong></a>
 
    <li>circled-lower-latin, <a href="#circled-lower-latin"
-    title="section 3.8."><strong>3.8.</strong></a>
+    title="section 3.9."><strong>3.9.</strong></a>
 
    <li>‘<a href="#cjk-decimal"><code class=css>cjk-decimal</code></a>’,
     <a href="#cjk-decimal" title="section 5.1."><strong>5.1.</strong></a>
@@ -3774,13 +3814,13 @@ <h2 class=no-num id=index>Index</h2>
    <li><a
     href="#speak-as-counter-style"><var>&lt;counter-style-name></var></a>, <a
     href="#speak-as-counter-style"
-    title="section 3.8."><strong>3.8.</strong></a>
+    title="section 3.9."><strong>3.9.</strong></a>
 
    <li>counter-suffix, <a href="#suffix"
     title="section 2."><strong>2.</strong></a>
 
    <li>counter symbol, <a href="#counter-symbol"
-    title="section 3.7."><strong>3.7.</strong></a>
+    title="section 3.8."><strong>3.8.</strong></a>
 
    <li>CSSCounterStyleRule, <a href="#csscounterstylerule"
     title="section 7.2."><strong>7.2.</strong></a>
@@ -3820,17 +3860,14 @@ <h2 class=no-num id=index>Index</h2>
     title="section 6.2."><strong>6.2.</strong></a>
 
    <li>fallback, <a href="#descdef-fallback"
-    title="section 3.6."><strong>3.6.</strong></a>
+    title="section 3.7."><strong>3.7.</strong></a>
 
    <li>first symbol value, <a href="#first-symbol-value"
     title="section 3.1.2."><strong>3.1.2.</strong></a>
 
    <li>‘<a href="#fixed"><code class=css>fixed</code></a>’, <a
     href="#fixed" title="section 3.1.2."><strong>3.1.2.</strong></a>
 
-   <li>fixed-decimal, <a href="#fixed-decimal"
-    title="section 3.1.4."><strong>3.1.4.</strong></a>
-
    <li>footnote, <a href="#footnote"
     title="section 3.1.3."><strong>3.1.3.</strong></a>
 
@@ -3903,7 +3940,7 @@ <h2 class=no-num id=index>Index</h2>
 
    <li>‘<a href="#speak-as-numeric"><code class=css>numeric</code></a>’,
     <a href="#numeric" title="section 3.1.5."><strong>3.1.5.</strong></a>, <a
-    href="#speak-as-numeric" title="section 3.8."><strong>3.8.</strong></a>
+    href="#speak-as-numeric" title="section 3.9."><strong>3.9.</strong></a>
 
    <li>‘<a href="#override"><code class=css>override</code></a>’, <a
     href="#override" title="section 3.1.7."><strong>3.1.7.</strong></a>
@@ -3928,7 +3965,7 @@ <h2 class=no-num id=index>Index</h2>
     title="section 6.1.2."><strong>6.1.2.</strong></a>
 
    <li>speak-as, <a href="#descdef-speak-as"
-    title="section 3.8."><strong>3.8.</strong></a>
+    title="section 3.9."><strong>3.9.</strong></a>
 
    <li>‘<a href="#square"><code class=css>square</code></a>’, <a
     href="#square" title="section 5.3."><strong>5.3.</strong></a>
@@ -3942,11 +3979,14 @@ <h2 class=no-num id=index>Index</h2>
    <li>suffix, <a href="#descdef-suffix"
     title="section 3.4."><strong>3.4.</strong></a>
 
+   <li>&lt;symbol>, <a href="#ltsymbol"
+    title="section 3.8."><strong>3.8.</strong></a>
+
    <li>‘<a href="#symbolic"><code class=css>symbolic</code></a>’, <a
     href="#symbolic" title="section 3.1.3."><strong>3.1.3.</strong></a>
 
    <li>symbols, <a href="#descdef-symbols"
-    title="section 3.7."><strong>3.7.</strong></a>
+    title="section 3.8."><strong>3.8.</strong></a>
 
    <li>&lt;symbols-function>, <a href="#type-symbols-function"
     title="section 4."><strong>4.</strong></a>
@@ -3981,6 +4021,9 @@ <h2 class=no-num id=index>Index</h2>
 
    <li>‘<a href="#upper-roman"><code class=css>upper-roman</code></a>’,
     <a href="#upper-roman" title="section 5.1."><strong>5.1.</strong></a>
+
+   <li>width, <a href="#descdef-width"
+    title="section 3.6."><strong>3.6.</strong></a>
   </ul>
   <!--end-index-->
   <!--