[css3-lists] Rewrite the counters section *again*, because I don't actually need the 'scope' concept.

--HG--
extra : rebase_source : 42a1c1f1608235deadc90221706535752d1eb95a

Author: tabatkins

css3-lists/Overview.html

@@ -25,12 +25,12 @@
 
    <h1>CSS Lists and Counters Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 25 August 2012</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 August 2012</h2>
 
    <dl>
     <dt>This version:
 
-    <dd><!--<a href="http://www.w3.org/TR/2012/WD-css3-lists-20120825">http://www.w3.org/TR/2012/WD-css3-lists-20120825</a>-->
+    <dd><!--<a href="http://www.w3.org/TR/2012/WD-css3-lists-20120827">http://www.w3.org/TR/2012/WD-css3-lists-20120827</a>-->
      <a
      href="http://dev.w3.org/csswg/css3-lists/">http://dev.w3.org/csswg/css3-lists/</a>
 
@@ -176,15 +176,22 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
       class=property>marker-side</code>’ property</a>
     </ul>
 
-   <li><a href="#counter"><span class=secno>8. </span> Automatic Counters and
-    Numbering: the ‘<code class=property>counter-increment</code>’,
-    ‘<code class=property>counter-set</code>’ and ‘<code
-    class=property>counter-reset</code>’ properties</a>
+   <li><a href="#counter"><span class=secno>8. </span> Automatic Numbering
+    With Counters</a>
     <ul class=toc>
-     <li><a href="#nested-counters"><span class=secno>8.1. </span> Nested
-      counters and scope</a>
+     <li><a href="#counter-properties"><span class=secno>8.1. </span>
+      Manipulating Counters: the ‘<code
+      class=property>counter-increment</code>’, ‘<code
+      class=property>counter-set</code>’ and ‘<code
+      class=property>counter-reset</code>’ properties </a>
 
-     <li><a href="#counters-without-boxes"><span class=secno>8.2. </span>
+     <li><a href="#creating-counters"><span class=secno>8.2. </span> Creating
+      and Inheriting Counters</a>
+
+     <li><a href="#nested-counters"><span class=secno>8.3. </span> Nested
+      Counters</a>
+
+     <li><a href="#counters-without-boxes"><span class=secno>8.4. </span>
       Counters in elements that do not generate boxes</a>
     </ul>
 
@@ -1543,28 +1550,33 @@ <h3 id=marker-side><span class=secno>7.2. </span> The ‘<a
   </div>
   <!-- ===================================================================== -->
 
-  <h2 id=counter><span class=secno>8. </span> Automatic Counters and
-   Numbering: the ‘<a href="#counter-increment"><code
-   class=property>counter-increment</code></a>’, ‘<a
-   href="#counter-set"><code class=property>counter-set</code></a>’ and
-   ‘<a href="#counter-reset"><code
-   class=property>counter-reset</code></a>’ properties</h2>
-
-  <p> A <dfn id=counter0>counter</dfn> is a special numeric object used,
-   among other things, to automatically number list items in CSS.
+  <h2 id=counter><span class=secno>8. </span> Automatic Numbering With
+   Counters</h2>
 
-  <p> A <a href="#counter0"><i>counter</i></a> has an integer value and a <a
-   href="#scope"><i>scope</i></a> which dictates which elements share a given
-   counter. The value of a <a href="#counter0"><i>counter</i></a> can be
-   different on different elements in the document, allowing list items to
-   generate successive numbers in their markers. They are created and
+  <p> A <dfn id=counter0>counter</dfn> is a special object used, among other
+   things, to automatically number list items in CSS. They are created and
    manipulated with the ‘<a href="#counter-increment"><code
    class=property>counter-increment</code></a>’, ‘<a
    href="#counter-set"><code class=property>counter-set</code></a>’ and
    ‘<a href="#counter-reset"><code
    class=property>counter-reset</code></a>’ properties, and used with the
    ‘<a href="#counter0"><code class=css>counter()</code></a>’ and
-   ‘<code class=css>counters()</code>’ functions.
+   ‘<code class=css>counters()</code>’ functions. Counters have an
+   integer value, a creator element, and possibly another counter nested
+   inside themselves.
+
+  <p> Each element has a collection of zero or more counters. Counters
+   inherit between elements in a way similar to other CSS values, but they
+   can inherit from previous siblings in addition to the normal behavior of
+   inheriting from parents. Counters can also "nest" inside of each other,
+   which makes it easier to number nested lists.
+
+  <h3 id=counter-properties><span class=secno>8.1. </span> Manipulating
+   Counters: the ‘<a href="#counter-increment"><code
+   class=property>counter-increment</code></a>’, ‘<a
+   href="#counter-set"><code class=property>counter-set</code></a>’ and
+   ‘<a href="#counter-reset"><code
+   class=property>counter-reset</code></a>’ properties</h3>
 
   <table class=propdef>
    <tbody>
@@ -1610,25 +1622,24 @@ <h2 id=counter><span class=secno>8. </span> Automatic Counters and
   </table>
 
   <p> The ‘<a href="#counter-reset"><code
-   class=property>counter-reset</code></a>’ property creates new counters,
-   with new associated <a href="#scope"><i>scopes</i></a>. Its values are
-   defined as follows:
+   class=property>counter-reset</code></a>’ property <a
+   href="#create-a-new-counter"><i title="create a new counter">creates new
+   counters</i></a> on an element. Its values are defined as follows:
 
   <dl>
    <dt>none
 
-   <dd> This element does not establish any new counters.
+   <dd> This element does not create any new counters.
 
    <dt><code>&lt;ident> &lt;integer>?</code>
 
-   <dd> The element <a href="#establishes-a-counter"><i
-    title="establishes a counter">establishes one or more new
-    counters</i></a>. Each <code>&lt;ident></code> names a new counter which
-    is created.
+   <dd> The element <a href="#create-a-new-counter"><i
+    title="create a new counter">creates one or more new counters</i></a>.
+    Each <code>&lt;ident></code> names a new counter to be created.
     <p> If an <code>&lt;integer></code> is provided after an
-     <code>&lt;ident></code>, the newly established counter's value is set to
-     that integer.. Otherwise, the starting value of the new counter is
-     ‘<code class=css>0</code>’.
+     <code>&lt;ident></code>, the starting value of the new counter is that
+     integer. Otherwise, the starting value of the new counter is ‘<code
+     class=css>0</code>’.
   </dl>
 
   <table class=propdef>
@@ -1734,20 +1745,20 @@ <h2 id=counter><span class=secno>8. </span> Automatic Counters and
 
    <dd> The element alters the value of one or more counters on it. If there
     is not currently a counter of the given name on the element, the element
-    <a href="#establishes-a-counter"><i>establishes a counter</i></a> of the
-    given name and initally sets its value to ‘<code class=css>0</code>’
-    (though it may then immediately set or increment that value to something
-    different).
+    <i>creates a new counter</i> of the given name with a starting value of
+    ‘<code class=css>0</code>’ (though it may then immediately set or
+    increment that value to something different).
     <p> If an <code>&lt;integer></code> is provided after an
-     <code>&lt;ident></code>, it sets the named counter to that integer (for
-     ‘<a href="#counter-set"><code
+     <code>&lt;ident></code>, it sets the innermost counter of the given name
+     to that integer (for ‘<a href="#counter-set"><code
      class=property>counter-set</code></a>’) or increments the value of the
-     named counter by that integer (for ‘<a href="#counter-increment"><code
-     class=property>counter-increment</code></a>’). Otherwise, the
-     counter's value is set to ‘<code class=css>0</code>’ (for ‘<a
-     href="#counter-set"><code class=property>counter-set</code></a>’) or
-     incremented by ‘<code class=css>1</code>’ (for ‘<a
+     innermost counter of the given name by that integer (for ‘<a
      href="#counter-increment"><code
+     class=property>counter-increment</code></a>’). Otherwise, the
+     innermost counter of the given name's value is set to ‘<code
+     class=css>0</code>’ (for ‘<a href="#counter-set"><code
+     class=property>counter-set</code></a>’) or incremented by ‘<code
+     class=css>1</code>’ (for ‘<a href="#counter-increment"><code
      class=property>counter-increment</code></a>’).
   </dl>
 
@@ -1767,9 +1778,9 @@ <h2 id=counter><span class=secno>8. </span> Automatic Counters and
 }</pre>
   </div>
 
-  <p> Resetting a counter must be done <em>before</em> setting a counter,
-   which must be done <em>before</em> incrementing a counter, which must be
-   done <em>before</em> using a counter (for example, in the ‘<code
+  <p> Resetting counters must be done <em>before</em> setting counters, which
+   must be done <em>before</em> incrementing counters, which must be done
+   <em>before</em> using counters (for example, in the ‘<code
    class=property>content</code>’ property).
 
   <div class=note>
@@ -1795,40 +1806,52 @@ <h2 id=counter><span class=secno>8. </span> Automatic Counters and
     class=property>counter-increment</code></a>’ properties.
   </div>
 
-  <h3 id=nested-counters><span class=secno>8.1. </span> Nested counters and
-   scope</h3>
-
-  <p> Every <a href="#counter0"><i>counter</i></a> is associated with a <dfn
-   id=scope title="scope|scopes">scope</dfn>, which defines which elements in
-   the document share a given counter.
-
-  <p> <a href="#scope"><i>Scopes</i></a> have a name, which is the same as
-   their associated counter, a root element, which is the element that
-   establishes the counter, and a set of contained elements, which are the
-   elements that share the given counter. When an element <dfn
-   id=establishes-a-counter>establishes a counter</dfn>, it creates a counter
-   and scope of the given name, sets the scope's root element to the element
-   that establishes it, and sets the contained elements to the element and
-   its descendants, all following siblings of the root element up to but not
-   including the first sibling that establishes a counter of the same name,
-   and all descendants of those siblings.
-
-  <p> The value of a counter can change across its scope. Whenever an element
-   sets the value of a counter, the altered value is what is seen by all
-   elements contained in the scope that are later in document order (unless,
-   of course, another element between the two further alters the counter's
-   value).
-
-  <p> Counters are "self-nesting"; establishing a counter in an element
-   already contained in the scope of another counter of the same name simply
-   creates a new instance of the counter. This is important for situations
-   like lists in HTML, where lists can be nested inside lists to arbitrary
-   depth. It would be impossible to define uniquely named counters for each
-   level. As explained in a later section, the ‘<a href="#counter0"><code
-   class=css>counter()</code></a>’ function only uses the innermost counter
-   of a given name on the element, but the ‘<code
-   class=css>counters()</code>’ function uses all counters of a given name
-   that contain the element.
+  <h3 id=creating-counters><span class=secno>8.2. </span> Creating and
+   Inheriting Counters</h3>
+
+  <p> Every element has a (possibly empty) set of counters. Like many other
+   CSS values, an element can inherit counters from another element. Unlike
+   many other CSS values, elements can inherit counters from their previous
+   sibling as well as their parent.
+
+  <p> If an element has a previous sibling, it inherits all of the sibling's
+   counters (both those the sibling inherited, and ones the sibling created).
+   Otherwise, if an element has a parent, it inherits all of the parent's
+   counters. Otherwise, the element starts with an empty set of counters.
+
+  <p> Elements can create additional counters on themselves, which can then
+   be passed onto siblings or children. To <dfn
+   id=create-a-new-counter>create a new counter</dfn>, specify an element
+   that's creating it, a name, and a starting value. The effect depends on
+   what other counters of that name exist on the element:
+
+  <ul>
+   <li> If no counters of that name exist on the element, create a new
+    counter with that name on the element.
+
+   <li> Otherwise, if a counter of the name exists on the element, and it was
+    created by a preceding sibling, replace the innermost counter of that
+    name on the element with a newly-created counter with that name.
+
+   <li> Otherwise, create a new counter with that name and nest it inside of
+    the innermost counter with that name.
+  </ul>
+
+  <p> Regardless, the value of the new counter is set to the provided
+   starting value.
+
+  <h3 id=nested-counters><span class=secno>8.3. </span> Nested Counters</h3>
+
+  <p> Counters are "self-nesting"; <a href="#create-a-new-counter"><i
+   title="create a new counter">creating a new counter</i></a> in an element
+   which already has a counter with the same name simply creates a new
+   counter of the same name, nested inside the existing counter. This is
+   important for situations like lists in HTML, where lists can be nested
+   inside lists to arbitrary depth. It would be impossible to define uniquely
+   named counters for each level. As explained in a later section, the
+   ‘counter()’ function only uses the innermost counter of a given name
+   on the element, but the ‘counters()’ function uses all counters of a
+   given name that contain the element.
 
   <div class=example>
    <p> Thus, the following suffices to number nested list items. The result
@@ -1877,7 +1900,7 @@ <h3 id=nested-counters><span class=secno>8.1. </span> Nested counters and
     visually.
   </div>
 
-  <h3 id=counters-without-boxes><span class=secno>8.2. </span> Counters in
+  <h3 id=counters-without-boxes><span class=secno>8.4. </span> Counters in
    elements that do not generate boxes</h3>
 
   <p>An element that does not generate a box (for example, an element with
@@ -3673,7 +3696,7 @@ <h2 class=no-num id=index>Index</h2>
     title="&lt;counter-function>"><strong>9.</strong></a>
 
    <li>counter-increment, <a href="#counter-increment"
-    title=counter-increment><strong>8.</strong></a>
+    title=counter-increment><strong>8.1.</strong></a>
 
    <li>counter-name, <a href="#name"
     title=counter-name><strong>10.</strong></a>
@@ -3688,10 +3711,10 @@ <h2 class=no-num id=index>Index</h2>
     title=counter-range><strong>10.</strong></a>
 
    <li>counter-reset, <a href="#counter-reset"
-    title=counter-reset><strong>8.</strong></a>
+    title=counter-reset><strong>8.1.</strong></a>
 
    <li>counter-set, <a href="#counter-set"
-    title=counter-set><strong>8.</strong></a>
+    title=counter-set><strong>8.1.</strong></a>
 
    <li>&lt;counters-function>, <a href="#ltcounters-function"
     title="&lt;counters-function>"><strong>9.</strong></a>
@@ -3708,6 +3731,9 @@ <h2 class=no-num id=index>Index</h2>
    <li>counter symbol, <a href="#counter-symbol"
     title="counter symbol"><strong>10.7.</strong></a>
 
+   <li>create a new counter, <a href="#create-a-new-counter"
+    title="create a new counter"><strong>8.2.</strong></a>
+
    <li>CSSCounterStyleRule, <a href="#csscounterstylerule"
     title=CSSCounterStyleRule><strong>13.2.</strong></a>
 
@@ -3729,9 +3755,6 @@ <h2 class=no-num id=index>Index</h2>
 
    <li>disc, <a href="#disc" title=disc><strong>12.</strong></a>
 
-   <li>establishes a counter, <a href="#establishes-a-counter"
-    title="establishes a counter"><strong>8.1.</strong></a>
-
    <li>fallback, <a href="#descdef-fallback"
     title=fallback><strong>10.6.</strong></a>
 
@@ -3819,10 +3842,6 @@ <h2 class=no-num id=index>Index</h2>
    <li>range, <a href="#descdef-range" title=range><strong>10.5.</strong></a>
 
 
-   <li>scope, <a href="#scope" title=scope><strong>8.1.</strong></a>
-
-   <li>scopes, <a href="#scope" title=scopes><strong>8.1.</strong></a>
-
    <li>square, <a href="#square" title=square><strong>12.</strong></a>
 
    <li>&lt;string>, <a href="#list-style-type-string"