W3C home > Mailing lists > Public > public-css-commits@w3.org > November 2011

csswg/css3-lists Overview.html,1.93,1.94 Overview.src.html,1.140,1.141

From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 18 Nov 2011 03:06:08 +0000
To: public-css-commits@w3.org
Message-Id: <E1RREmG-0004Qx-5Z@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-lists
In directory hutz:/tmp/cvs-serv17014

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Rewrite of several of the example to use reduced HTML.  Slight tweaks to some examples.

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-lists/Overview.html,v
retrieving revision 1.93
retrieving revision 1.94
diff -u -d -r1.93 -r1.94
--- Overview.html	18 Nov 2011 02:31:55 -0000	1.93
+++ Overview.html	18 Nov 2011 03:06:05 -0000	1.94
@@ -332,25 +332,15 @@
     and style sheet:</p>
 
    <pre>
-&lt;!doctype html>
-&lt;html>
- &lt;head>
-  &lt;title>Creating a list with markers&lt;/title>
-  &lt;style>
-   li<code
-    class=css>::marker</code> { content: "(" counter(list-item, lower-roman) ")"; }
-   li { display: list-item; }
-  &lt;/style>
- &lt;/head>
- &lt;body>
-  &lt;ol>
-   &lt;li>This is the first item.&lt;/li>
-   &lt;li>This is the second item.&lt;/li>
-   &lt;li>This is the third item.&lt;/li>
-  &lt;/ol>
- &lt;/body>
-&lt;/html>
-		</pre>
+&lt;style>
+li::marker { content: "(" counter(list-item, lower-roman) ")"; }
+li { display: list-item; }
+&lt;/style>
+&lt;ol>
+	&lt;li>This is the first item.&lt;/li>
+	&lt;li>This is the second item.&lt;/li>
+	&lt;li>This is the third item.&lt;/li>
+&lt;/ol></pre>
 
    <p>should produce something like this:</p>
 
@@ -841,7 +831,8 @@
    class=css>none</code></a>&rsquo; in the shorthand must be applied to
    whichever of the two properties aren't otherwise set by the shorthand.
 
-  <pre class="example css-example">
+  <div class=example>
+   <pre>
 list-style: none disc;
 /* Sets the image to "none" and the type to "disc". */
 
@@ -852,15 +843,16 @@
 /* Sets both image and type to "none". */
 
 list-style: none disc url(bullet.png);
-/* Syntax error */
-	</pre>
+/* Syntax error */</pre>
+  </div>
 
   <p>Although authors may specify &lsquo;<a href="#list-style"><code
    class=property>list-style</code></a>&rsquo; information directly on list
    item elements (e.g., LI in HTML), they should do so with care. Consider
    the following rules:
 
-  <pre class=example>
+  <div class=example>
+   <pre>
 ol.alpha li { list-style: lower-alpha; }
 ul li       { list-style: disc; }
 /* These won't work as expected.  If you nest a &lt;ul>
@@ -875,6 +867,7 @@
 ul       { list-style: disc; }
 /* So do these, since inheritance will transfer the 
 'list-style' value to the list items. */</pre>
+  </div>
   <!-- ====================================================================== -->
 
   <h2 id=marker-pseudo-element><span class=secno>6. </span> Markers: The
@@ -904,33 +897,23 @@
    <p>In the following example, the content is centered within a marker box
     of a fixed width. This document:</p>
 
-   <pre class=html-example>
-&lt;!doctype html>
-&lt;html>
- &lt;head>
-  &lt;title>Content alignment in the marker box&lt;/title>
-  &lt;style>
-   LI<code
-    class=css>::marker</code> { 
-     content: "(" counter(counter) ")";
-     width: 6em;
-     text-align: center;
-   }
-   LI {
-     display: list-item;
-     counter-increment: counter;
-   }
-  &lt;/style>
- &lt;/head>
- &lt;body>
-  &lt;ol>
-   &lt;li>This is the first item.&lt;/li>
-   &lt;li>This is the second item.&lt;/li>
-   &lt;li>This is the third item.&lt;/li>
-  &lt;/ol>
- &lt;/body>
-&lt;/html>
-		</pre>
+   <pre>
+&lt;style>
+li::marker { 
+  content: "(" counter(counter) ")";
+  width: 6em;
+  text-align: center;
+}
+li {
+  display: list-item;
+  counter-increment: counter;
+}
+&lt;/style>
+&lt;ol>
+	&lt;li>This is the first item.&lt;/li>
+	&lt;li>This is the second item.&lt;/li>
+	&lt;li>This is the third item.&lt;/li>
+&lt;/ol></pre>
 
    <p>should render something like this:</p>
 
@@ -940,43 +923,32 @@
   (2)    This is the 
          second item.
   (3)    This is the 
-         third item.
-		</pre>
+         third item.</pre>
   </div>
 
-  <p>The next example uses markers to number notes (paragraphs).
-
   <div class=example>
-   <p>The following document:</p>
+   <p>In this example, markers are used to number paragraphs that are
+    designated as "notes":</p>
 
-   <pre class=html-example>
-&lt;!doctype html>
-&lt;html>
- &lt;head>
-  &lt;title>Markers to create numbered notes&lt;/title>
-  &lt;style>
-   P { margin-left: 12 em; }
-   P.Note<code
-    class=css>::marker</code> { 
-      content: url("note.gif") "Note " counter(note-counter) ":";
-      text-align: left;
-      width: 10em;
-   }
-   P.Note {
-     display: list-item;
-     counter-increment: note-counter;
-   }
-  &lt;/style>
- &lt;/head>
- &lt;body>
-  &lt;p>This is the first paragraph in this document.&lt;/p>
-  &lt;p class="Note">This is a very short document.&lt;/p>
-  &lt;p>This is the end.&lt;/p>
- &lt;/body>
-&lt;/html>
+   <pre>
+&lt;style>
+p { margin-left: 12 em; }
+p.note::marker { 
+  content: "Note " counter(note-counter) ":";
+  text-align: left;
+  width: 10em;
+}
+p.note {
+ display: list-item;
+ counter-increment: note-counter;
+}
+&lt;/style>
+&lt;p>This is the first paragraph in this document.&lt;/p>
+&lt;p class="note">This is a very short document.&lt;/p>
+&lt;p>This is the end.&lt;/p>
 		</pre>
 
-   <p>should render something like this:</p>
+   <p>It should render something like this:</p>
 
    <pre>
             This is the first paragraph 
@@ -985,53 +957,47 @@
   Note 1:   This is a very short 
             document.
            
-            This is the end.
-</pre>
+            This is the end.</pre>
   </div>
 
   <div class=example>
-   <p>The following example illustrates how markers may be offset from their
-    element. This HTML application and style sheet:</p>
+   <p>By using the <code class=css>::marker</code> pseudo-element, a list's
+    markers can be positioned much more flexibly, and even be styled
+    independently from the text of the list item itself:</p>
 
-   <pre class=html-example>
-&lt;!doctype html>
-&lt;html>
- &lt;head>
-  &lt;title>Marker example&lt;/title>
-  &lt;style>
-   P { margin-left: 8em } /* Make space for counters */
-   LI<code
-    class=css>::marker</code> { margin: 0 3em 0 0; content: counter(list-item, lower-roman) "."; }
-   LI { display: list-item }
-  &lt;/style>
- &lt;/head>
- &lt;body>
-  &lt;p>This is a long preceding paragraph ...&lt;/p>
-  &lt;ol>
-   &lt;li>This is the first item.&lt;/li>
-   &lt;li>This is the second item.&lt;/li>
-   &lt;li>This is the third item.&lt;/li>
-  &lt;/ol>
-  &lt;p>This is a long following paragraph ...&lt;/p>
- &lt;/body>
-&lt;/html>
-		</pre>
+   <pre>
+&lt;style>
+p { margin-left: 8em } /* Make space for counters */
+li { list-style-type: lower-roman; }
+li::marker { margin: 0 3em 0 0; font-weight: bold; }
+&lt;/style>
+&lt;p>This is a long preceding paragraph ...&lt;/p>
+&lt;ol>
+	&lt;li>This is the first item.&lt;/li>
+	&lt;li>This is the second item.&lt;/li>
+	&lt;li>This is the third item.&lt;/li>
+&lt;/ol>
+&lt;p>This is a long following paragraph ...&lt;/p></pre>
 
-   <p>should render something like this:</p>
+   <p>The preceding document should render something like this:</p>
 
    <pre>
         This is a long preceding
         paragraph ...
       
-   i.   This is the first item.
-  ii.   This is the second item.
- iii.   This is the third item.
+   <b>i.</b>   This is the first item.
+  <b>ii.</b>   This is the second item.
+ <b>iii.</b>   This is the third item.
 
         This is a long following
-        paragraph ...
-</pre>
+        paragraph ...</pre>
 
-   <p>(Note the use of the implicit counter increment.)</p>
+   <p>Previously the only way to style a marker was through inheritance; one
+    had to put the desired marker styling on the list item, and then revert
+    that on a wrapper element around the list item's actual contents.
+    Non-inherited properties like &lsquo;<code
+    class=property>margin</code>&rsquo; couldn't be adjusted at all on the
+    marker.</p>
   </div>
   <!-- ====================================================================== -->
 
@@ -1078,14 +1044,11 @@
    <pre>
 li { display: list-item; list-style-type: decimal /* initial value */; }
 li<code
-    class=css>::marker</code> { content: normal /* initial value */; }
-		</pre>
+    class=css>::marker</code> { content: normal /* initial value */; }</pre>
 
    <p>And the following document fragment:</p>
 
-   <pre>
-&lt;li>List Item&lt;/li>
-		</pre>
+   <pre>&lt;li>List Item&lt;/li></pre>
 
    <p>The computed value of the &lsquo;<code
     class=property>content</code>&rsquo; property on the <code

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-lists/Overview.src.html,v
retrieving revision 1.140
retrieving revision 1.141
diff -u -d -r1.140 -r1.141
--- Overview.src.html	18 Nov 2011 02:31:55 -0000	1.140
+++ Overview.src.html	18 Nov 2011 03:06:06 -0000	1.141
@@ -97,28 +97,18 @@
 
 	<div class="html-example">
 
-		<p>For instance, the following example illustrates how markers may be used to add parentheses around
-		each numbered list item. This HTML application and style sheet:</p>
+		<p>For instance, the following example illustrates how markers may be used to add parentheses around each numbered list item. This HTML application and style sheet:</p>
 
 		<pre>
-&lt;!doctype html>
-&lt;html>
- &lt;head>
-  &lt;title>Creating a list with markers&lt;/title>
-  &lt;style>
-   li<code class=css>::marker</code> { content: "(" counter(list-item, lower-roman) ")"; }
-   li { display: list-item; }
-  &lt;/style>
- &lt;/head>
- &lt;body>
-  &lt;ol>
-   &lt;li>This is the first item.&lt;/li>
-   &lt;li>This is the second item.&lt;/li>
-   &lt;li>This is the third item.&lt;/li>
-  &lt;/ol>
- &lt;/body>
-&lt;/html>
-		</pre>
+&lt;style>
+li::marker { content: "(" counter(list-item, lower-roman) ")"; }
+li { display: list-item; }
+&lt;/style>
+&lt;ol>
+	&lt;li>This is the first item.&lt;/li>
+	&lt;li>This is the second item.&lt;/li>
+	&lt;li>This is the third item.&lt;/li>
+&lt;/ol></pre>
 
 		<p>should produce something like this: </p>
 
@@ -129,8 +119,7 @@
 </pre>
 	</div>
 
-	<p>With descendant selectors and child selectors, it's possible to specify different marker types
-	depending on the depth of embedded lists.</p>
+	<p>With descendant selectors and child selectors, it's possible to specify different marker types depending on the depth of embedded lists.</p>
 
 	<p class="issue">A future release of this module will probably include ways to render tree
 	lists.</p>
@@ -231,6 +220,7 @@
 	<div class="example">
 		<p>The following example sets the marker at the beginning of each list item to
 		be the image "ellipse.png".</p>
+
 		<pre>LI { list-style-image: url("http://www.example.com/ellipse.png") }</pre>
 	</div>
 
@@ -435,7 +425,8 @@
 
 	<p>Using a value of ''none'' in the shorthand is potentially ambiguous, as ''none'' is a valid value for both 'list-style-image' and 'list-style-type'.  To resolve this ambiguity, a value of ''none'' in the shorthand must be applied to whichever of the two properties aren't otherwise set by the shorthand.</p>
 
-	<pre class='example css-example'>
+	<div class='example'>
+		<pre>
 list-style: none disc;
 /* Sets the image to "none" and the type to "disc". */
 
@@ -446,13 +437,13 @@
 /* Sets both image and type to "none". */
 
 list-style: none disc url(bullet.png);
-/* Syntax error */
-	</pre>
+/* Syntax error */</pre>
+	</div>
 
-	<p>Although authors may specify 'list-style' information directly on
-	list item elements (e.g., LI in HTML), they should do so with care.  Consider the following rules:</p>
+	<p>Although authors may specify 'list-style' information directly on list item elements (e.g., LI in HTML), they should do so with care.  Consider the following rules:</p>
 	
-	<pre class=example>
+	<div class=example>
+		<pre>
 ol.alpha li { list-style: lower-alpha; }
 ul li       { list-style: disc; }
 /* These won't work as expected.  If you nest a &lt;ul>
@@ -467,6 +458,7 @@
 ul       { list-style: disc; }
 /* So do these, since inheritance will transfer the 
 'list-style' value to the list items. */</pre>
+	</div>
 
 
 <!-- ====================================================================== -->
@@ -485,32 +477,23 @@
 		<p>In the following example, the content is centered within a marker
 		box of a fixed width. This document:</p>
 
-		<pre class="html-example">
-&lt;!doctype html>
-&lt;html>
- &lt;head>
-  &lt;title>Content alignment in the marker box&lt;/title>
-  &lt;style>
-   LI<code class=css>::marker</code> { 
-     content: "(" counter(counter) ")";
-     width: 6em;
-     text-align: center;
-   }
-   LI {
-     display: list-item;
-     counter-increment: counter;
-   }
-  &lt;/style>
- &lt;/head>
- &lt;body>
-  &lt;ol>
-   &lt;li>This is the first item.&lt;/li>
-   &lt;li>This is the second item.&lt;/li>
-   &lt;li>This is the third item.&lt;/li>
-  &lt;/ol>
- &lt;/body>
-&lt;/html>
-		</pre>
+		<pre>
+&lt;style>
+li::marker { 
+  content: "(" counter(counter) ")";
+  width: 6em;
+  text-align: center;
+}
+li {
+  display: list-item;
+  counter-increment: counter;
+}
+&lt;/style>
+&lt;ol>
+	&lt;li>This is the first item.&lt;/li>
+	&lt;li>This is the second item.&lt;/li>
+	&lt;li>This is the third item.&lt;/li>
+&lt;/ol></pre>
 
 		<p>should render something like this: </p>
 
@@ -520,43 +503,31 @@
   (2)    This is the 
          second item.
   (3)    This is the 
-         third item.
-		</pre>
+         third item.</pre>
 	</div>
 
-
-	<p>The next example uses markers to number notes (paragraphs).</p>
-
 	<div class="example">
-		<p>The following document:</p>
+		<p>In this example, markers are used to number paragraphs that are designated as "notes":</p>
 
-		<pre class="html-example">
-&lt;!doctype html>
-&lt;html>
- &lt;head>
-  &lt;title>Markers to create numbered notes&lt;/title>
-  &lt;style>
-   P { margin-left: 12 em; }
-   P.Note<code class=css>::marker</code> { 
-      content: url("note.gif") "Note " counter(note-counter) ":";
-      text-align: left;
-      width: 10em;
-   }
-   P.Note {
-     display: list-item;
-     counter-increment: note-counter;
-   }
-  &lt;/style>
- &lt;/head>
- &lt;body>
-  &lt;p>This is the first paragraph in this document.&lt;/p>
-  &lt;p class="Note">This is a very short document.&lt;/p>
-  &lt;p>This is the end.&lt;/p>
- &lt;/body>
-&lt;/html>
+		<pre>
+&lt;style>
+p { margin-left: 12 em; }
+p.note::marker { 
+  content: "Note " counter(note-counter) ":";
+  text-align: left;
+  width: 10em;
+}
+p.note {
+ display: list-item;
+ counter-increment: note-counter;
+}
+&lt;/style>
+&lt;p>This is the first paragraph in this document.&lt;/p>
+&lt;p class="note">This is a very short document.&lt;/p>
+&lt;p>This is the end.&lt;/p>
 		</pre>
 
-		<p>should render something like this:</p>
+		<p>It should render something like this:</p>
 
 		<pre>
             This is the first paragraph 
@@ -565,52 +536,40 @@
   Note 1:   This is a very short 
             document.
            
-            This is the end.
-</pre>
+            This is the end.</pre>
 	</div>
 
 	<div class="example">
-		<p>The following example illustrates how markers may be offset from their element. This HTML
-		application and style sheet:</p>
+		<p>By using the <code class=css>::marker</code> pseudo-element, a list's markers can be positioned much more flexibly, and even be styled independently from the text of the list item itself:</p>
 
-		<pre class="html-example">
-&lt;!doctype html>
-&lt;html>
- &lt;head>
-  &lt;title>Marker example&lt;/title>
-  &lt;style>
-   P { margin-left: 8em } /* Make space for counters */
-   LI<code class=css>::marker</code> { margin: 0 3em 0 0; content: counter(list-item, lower-roman) "."; }
-   LI { display: list-item }
-  &lt;/style>
- &lt;/head>
- &lt;body>
-  &lt;p>This is a long preceding paragraph ...&lt;/p>
-  &lt;ol>
-   &lt;li>This is the first item.&lt;/li>
-   &lt;li>This is the second item.&lt;/li>
-   &lt;li>This is the third item.&lt;/li>
-  &lt;/ol>
-  &lt;p>This is a long following paragraph ...&lt;/p>
- &lt;/body>
-&lt;/html>
-		</pre>
+		<pre>
+&lt;style>
+p { margin-left: 8em } /* Make space for counters */
+li { list-style-type: lower-roman; }
+li::marker { margin: 0 3em 0 0; font-weight: bold; }
+&lt;/style>
+&lt;p>This is a long preceding paragraph ...&lt;/p>
+&lt;ol>
+	&lt;li>This is the first item.&lt;/li>
+	&lt;li>This is the second item.&lt;/li>
+	&lt;li>This is the third item.&lt;/li>
+&lt;/ol>
+&lt;p>This is a long following paragraph ...&lt;/p></pre>
 
-		<p>should render something like this: </p>
+		<p>The preceding document should render something like this: </p>
 
 		<pre>
         This is a long preceding
         paragraph ...
       
-   i.   This is the first item.
-  ii.   This is the second item.
- iii.   This is the third item.
+   <b>i.</b>   This is the first item.
+  <b>ii.</b>   This is the second item.
+ <b>iii.</b>   This is the third item.
 
         This is a long following
-        paragraph ...
-</pre>
+        paragraph ...</pre>
 
-		<p>(Note the use of the implicit counter increment.)</p>
+        <p>Previously the only way to style a marker was through inheritance; one had to put the desired marker styling on the list item, and then revert that on a wrapper element around the list item's actual contents.  Non-inherited properties like 'margin' couldn't be adjusted at all on the marker.</p>
 	</div>
 
 <!-- ====================================================================== -->
@@ -636,16 +595,17 @@
 
 	<div class="example">
 		<p>Given the following style sheet:</p>
+
 		<pre>
 li { display: list-item; list-style-type: decimal /* initial value */; }
-li<code class=css>::marker</code> { content: normal /* initial value */; }
-		</pre>
+li<code class=css>::marker</code> { content: normal /* initial value */; }</pre>
+
 		<p>And the following document fragment:</p>
-		<pre>
-&lt;li>List Item&lt;/li>
-		</pre>
-		<p>The computed value of the 'content' property on the <code class=css>::marker</code> 
-		pseudo-element of the list item element is:</p>
+
+		<pre>&lt;li>List Item&lt;/li></pre>
+
+		<p>The computed value of the 'content' property on the <code class=css>::marker</code> pseudo-element of the list item element is:</p>
+
 		<pre>counter(list-item, decimal) "."</pre>
 	</div>
 
Received on Friday, 18 November 2011 03:06:15 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 18 November 2011 03:06:15 GMT