[css3-lists] Rewrite one of the counter nesting examples to be visual rather than text-based.

--HG--
extra : rebase_source : 767f345f7d51049fbcee2928a78410eef98216f1

Author: tabatkins

css3-lists/Overview.html

@@ -10,10 +10,10 @@
 
   <meta content="CSS Lists and Counters Module Level 3" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2012-11-29 name=dcterms.issued>
+  <meta content=2012-11-30 name=dcterms.issued>
   <meta content="http://dev.w3.org/csswg/css3-lists/" name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
-  <meta content="http://www.w3.org/TR/2012/ED-css3-lists-20121129/"
+  <meta content="http://www.w3.org/TR/2012/ED-css3-lists-20121130/"
    name=dcterms.identifier>
   <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
   <link href="http://dev.w3.org/csswg/default.css" rel=stylesheet
@@ -36,13 +36,13 @@
 
    <h1>CSS Lists and Counters Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 November
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 30 November
     2012</h2>
 
    <dl>
     <dt>This version:
 
-    <dd><!--<a href="http://www.w3.org/TR/2012/WD-css3-lists-20121129">http://www.w3.org/TR/2012/WD-css3-lists-20121129</a>-->
+    <dd><!--<a href="http://www.w3.org/TR/2012/WD-css3-lists-20121130">http://www.w3.org/TR/2012/WD-css3-lists-20121130</a>-->
      <a
      href="http://dev.w3.org/csswg/css3-lists/">http://dev.w3.org/csswg/css3-lists/</a>
 
@@ -1479,9 +1479,9 @@ <h3 id=marker-side><span class=secno>7.2. </span> The ‘<a
       <td style="border-right: thin solid">
        <pre>
 * english one    
-     OWT WERBEH *
+		 OWT WERBEH *
 * english three  
-    RUOF WERBEH *</pre>
+		RUOF WERBEH *</pre>
 
       <td>
        <pre>
@@ -1710,13 +1710,13 @@ <h3 id=counter-properties><span class=secno>8.1. </span> Manipulating
 
    <pre>
 H1:before {
-    content: "Chapter " counter(chapter) ". ";
-    counter-increment: chapter;  /* Add 1 to chapter */
-    counter-reset: section;      /* Set section to 0 */
+		content: "Chapter " counter(chapter) ". ";
+		counter-increment: chapter;  /* Add 1 to chapter */
+		counter-reset: section;      /* Set section to 0 */
 }
 H2:before {
-    content: counter(chapter) "." counter(section) " ";
-    counter-increment: section;
+		content: counter(chapter) "." counter(section) " ";
+		counter-increment: section;
 }</pre>
   </div>
 
@@ -1777,16 +1777,16 @@ <h3 id=creating-counters><span class=secno>8.2. </span> Creating and
 
    <pre>
 &lt;ul style='counter-reset: example 0;'>
-  <b
+	<b
     class=foo>&lt;li id='foo' style='counter-increment: example;'></b>
-  	foo
-  	<b
+		foo
+		<b
     class=bar>&lt;div id='bar' style='counter-increment: example;'>bar&lt;/div></b>
-  &lt;/li>
-  <b
+	&lt;/li>
+	<b
     class=baz>&lt;li id='baz'></b>
-  	baz
-  &lt;/li>
+		baz
+	&lt;/li>
 &lt;/ul></pre>
 
    <p> Recall that "in document order" turns a document tree into an ordered
@@ -1874,38 +1874,62 @@ <h3 id=nested-counters><span class=secno>8.3. </span> Nested Counters</h3>
     OL will refer to that counter.
   </div>
 
-  <div class=example>
-   <p> If we denote by item[<var>n</var>] the <var>n</var><sup>th</sup>
-    instance of the "item" counter, and by "(" and ")"the beginning and end
-    of a scope, then the following HTML fragment will use the indicated
-    counters. (We assume the style sheet as given in the example above).
+  <div class=example id=counter-nesting-example>
+   <p> If we denote the <var>n</var><sup>th</sup> instance of the "item"
+    counter by item[<var>n</var>], then the following HTML fragment will use
+    the indicated counters. (We assume the style sheet as given in the
+    example above).
 
-   <pre>
-&lt;OL>               &lt;!-- (set item[0] to 0         -->
-  &lt;LI>item         &lt;!--  increment item[0] to 1   -->
-  &lt;LI>item         &lt;!--  increment item[0] to 2   -->
-    &lt;OL>           &lt;!--  (set item[1] to 0        -->
-      &lt;LI>item     &lt;!--   increment item[1] to 1  -->
-      &lt;LI>item     &lt;!--   increment item[1] to 2  -->
-      &lt;LI>item     &lt;!--   increment item[1] to 3  -->
-        &lt;OL>       &lt;!--   (set item[2] to 0       -->
-          &lt;LI>item &lt;!--    increment item[2] to 1 -->
-        &lt;/OL>      &lt;!--   )                       -->
-        &lt;OL>       &lt;!--   (set item[3] to 0       -->
-          &lt;LI>     &lt;!--    increment item[3] to 1 -->
-        &lt;/OL>      &lt;!--   )                       -->
-      &lt;LI>item     &lt;!--  increment item[0] to 3   -->
-  &lt;LI>item         &lt;!--  increment item[0] to 4   -->
-&lt;/OL>              &lt;!-- )                         -->
-&lt;OL>               &lt;!-- (set item[4] to 0         -->
-  &lt;LI>item         &lt;!--  increment item[4] to 1   -->
-  &lt;LI>item         &lt;!--  increment item[4] to 2   -->
-&lt;/OL>              &lt;!-- )                         --></pre>
-
-   <p class=issue> Rewrite this example as an image showing the scopes
-    visually.
+   <div class=ol>
+    <div class=ol><code>&lt;ol></code> item[0] is created, set to 0
+     <div class=li><code>&lt;li></code> item[0] is incremented to 1</div>
+
+     <div class=li><code>&lt;li></code> item[0] is incremented to 2
+      <div class=ol><code>&lt;ol></code> item[1] is created, set to 0, nested
+       in item[0]
+       <div class=li><code>&lt;li></code> item[1] is incremented to 1</div>
+
+       <div class=li><code>&lt;li></code> item[1] is incremented to 2</div>
+
+       <div class=li><code>&lt;li></code> item[1] is incremented to 3
+        <div class=ol><code>&lt;ol></code> item[2] is created, set to 0,
+         nested in item[1]
+         <div class=li><code>&lt;li></code> item[2] is incremented to 1</div>
+        </div>
+       </div>
+
+       <div class=li><code>&lt;li></code> item[1] is incremented to 4
+        <div class=ol><code>&lt;ol></code> item[3] is created, set to 0,
+         nested in item[1]
+         <div class=li><code>&lt;li></code> item[3] is incremented to 1</div>
+        </div>
+       </div>
+
+       <div class=li><code>&lt;li></code> item[1] is incremented to 5</div>
+      </div>
+     </div>
+
+     <div class=li><code>&lt;li></code> item[0] is incremented to 3</div>
+
+     <div class=li><code>&lt;li></code> item[0] is incremented to 4</div>
+    </div>
+
+    <div class=ol><code>&lt;ol></code> item[4] is created, set to 0
+     <div class=li><code>&lt;li></code> item[4] is incremented to 1</div>
+
+     <div class=li><code>&lt;li></code> item[4] is incremented to 2</div>
+    </div>
+   </div>
   </div>
 
+ <head>
+  <style>
+		#counter-nesting-example .ol { background: rgba(0,0,0,.1); margin: .5em 0; padding: .2em .5em; }
+		#counter-nesting-example .li > .ol { margin: 0 0 0 1em; }
+		#counter-nesting-example .li { list-style: none; margin-left: 1em;}
+		</style>
+
+ <body>
   <h3 id=counters-without-boxes><span class=secno>8.4. </span> Counters in
    elements that do not generate boxes</h3>
 
@@ -2032,14 +2056,14 @@ <h2 id=counter-function><span class=secno>9. </span> Printing Counters: the
 
    <pre>
 &lt;ul>
-  &lt;li>one&lt;/li>
-  &lt;li>two
-    &lt;ul>
-      &lt;li>nested one&lt;/li>
-      &lt;li>nested two&lt;/li>
-    &lt;/ul>
-  &lt;/li>
-  &lt;li>three&lt;/li>
+	&lt;li>one&lt;/li>
+	&lt;li>two
+		&lt;ul>
+			&lt;li>nested one&lt;/li>
+			&lt;li>nested two&lt;/li>
+		&lt;/ul>
+	&lt;/li>
+	&lt;li>three&lt;/li>
 &lt;/ul>
 &lt;style>
 ul { counter-reset: list-item; }
@@ -2052,8 +2076,8 @@ <h2 id=counter-function><span class=secno>9. </span> Printing Counters: the
    <pre>
 (1) one
 (2) two
-   (2.1) nested one
-   (2.2) nested two
+	 (2.1) nested one
+	 (2.2) nested two
 (3) three</pre>
   </div>
 
@@ -2086,10 +2110,10 @@ <h2 id=counter-function><span class=secno>9. </span> Printing Counters: the
 h3   { counter-increment: h3; }
 h1::before { content: counter(h1,upper-alpha) ' '; }
 h2::before { content: counter(h1,upper-alpha) '.' 
-                      counter(h2,decimal) ' '; }
+											counter(h2,decimal) ' '; }
 h3::before { content: counter(h1,upper-alpha) '.' 
-                      counter(h2,decimal) '.' 
-                      counter(h3,lower-roman) ' '; }
+											counter(h2,decimal) '.' 
+											counter(h3,lower-roman) ' '; }
 &lt;/style></pre>
 
    <p>The preceding document should render something like this:
@@ -2137,7 +2161,7 @@ <h2 id=ua-stylesheet><span class=secno>10. </span> Sample style sheet for
 ul ul { list-style-type: square; }
 ul ul ul { list-style-type: circle; }
 /* Alternately, if Values & Units Level 3 is supported, replace
-   the above three lines with: */
+	 the above three lines with: */
 ul { list-style-type: disc; }
 ul ul { list-style-type: cycle(disc, square, circle); }
 
@@ -2236,10 +2260,10 @@ <h2 class=no-num id=acknowledgments> Acknowledgments</h2>
    Randall Bart, Richard Ishida, Simon Montagu (Mozilla,
    smontagu@smontagu.org)
    <!-- see http://www.damowmow.com/temp/csswg/lists/part2.html 
-		       http://www.qsm.co.il/Hebrew/Gimatria.htm
-		       http://people.netscape.com/smontagu/writings/HebrewNumbers.html
-		       http://www.ethiopic.org/Collation/OrderedLists.html
-		       http://bugzilla.mozilla.org/show_bug.cgi?id=102252 -->
+					 http://www.qsm.co.il/Hebrew/Gimatria.htm
+					 http://people.netscape.com/smontagu/writings/HebrewNumbers.html
+					 http://www.ethiopic.org/Collation/OrderedLists.html
+					 http://bugzilla.mozilla.org/show_bug.cgi?id=102252 -->
    <!-- ====================================================================== -->
 
   <h2 class=no-num id=changes> Changes From CSS2.1</h2>