- From: Bert Bos via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 12 Mar 2011 13:01:43 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-lists
In directory hutz:/tmp/cvs-serv14896
Modified Files:
Overview.html
Log Message:
Generated. Do not edit!
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-lists/Overview.html,v
retrieving revision 1.12
retrieving revision 1.13
diff -u -d -r1.12 -r1.13
--- Overview.html 11 Mar 2011 21:46:49 -0000 1.12
+++ Overview.html 12 Mar 2011 13:01:41 -0000 1.13
@@ -4,7 +4,7 @@
<html>
<head>
<title>CSS Lists and Counters Module Level 3</title>
- <meta charset=utf-8>
+ <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<link href="http://dev.w3.org/csswg/default.css" rel=stylesheet
type="text/css">
@@ -31,13 +31,13 @@
<h1>CSS Lists and Counters Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 11 March
+ <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 12 March
2011</h2>
<dl>
<dt>This version:
- <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-lists-20110311">http://www.w3.org/TR/2011/WD-css3-lists-20110311</a></dd> -->
+ <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-lists-20110312">http://www.w3.org/TR/2011/WD-css3-lists-20110312</a></dd> -->
<a
href="http://dev.w3.org/csswg/css3-lists">http://dev.w3.org/csswg/css3-lists</a>
@@ -271,7 +271,8 @@
<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>
- <xmp>
+
+ <pre><![CDATA[
<!doctype html>
<html>
<head>
@@ -280,22 +281,24 @@
li::marker { content: "(" counter(list-item, lower-roman) ")"; }
li { display: list-item; }
</style>
+ </head>
<body>
<ol>
- <li>This is the first item.
- <li>This is the second item.
- <li>This is the third item.
+ <li>This is the first item.</li>
+ <li>This is the second item.</li>
+ <li>This is the third item.</li>
</ol>
</body>
</html>
- </xmp>
- <p>should produce something like this:
+]]></pre>
+
+ <p>should produce something like this:</p>
<pre>
(i) This is the first item.
(ii) This is the second item.
(iii) This is the third item.
- </pre>
+</pre>
</div>
<p>With descendant selectors and child selectors, it's possible to specify
@@ -1177,12 +1180,14 @@
<pre>
li { display: list-item; list-style-type: decimal /* initial value */; }
li::marker { content: normal /* initial value */; }
- </pre>
+</pre>
<p>And the following document fragment:</p>
- <xmp>
- <li>List Item</li>
- </xmp>
+
+ <pre><![CDATA[
+<li>List Item</li>
+]]></pre>
+
<p>The computed value of the ‘<code
class=property>content</code>’ property on the ‘<code
class=css>::marker</code>’ pseudo-element of the list item element
@@ -1322,9 +1327,9 @@
not ‘<code class=css>inhibit</code>’.
<div class=example>
- <p>For example:
+ <p>For example:
- <xmp>
+ <pre class=html-example><![CDATA[
<!doctype html>
<html>
<head>
@@ -1336,27 +1341,27 @@
</head>
<body>
<ul>
- <li>first list item comes first
- <li>second list item comes second
+ <li>first list item comes first</li>
+ <li>second list item comes second</li>
</ul>
-
<ul class=compact>
- <li>first list item comes first
- <li>second list item comes second
+ <li>first list item comes first</li>
+ <li>second list item comes second</li>
</ul>
</body>
</html>
- </xmp>
- <p>The above example may be formatted as:
+]]></pre>
+
+ <p>The above example may be formatted as:</p>
<div class=figure>
<p><img alt="list with bullets to the left of it and list with bullets
inside" id=img-list-inout src=list-inout.gif></p>
</div>
-
- <p>In right-to-left text, the markers would have been on the right side of
- the box.</p>
</div>
+
+ <p>In right-to-left text, the markers would have been on the right side of
+ the box.</p>
<!-- ====================================================================== -->
<h2 id=list-style-property><span class=secno>8. </span> The ‘<a
@@ -1419,7 +1424,7 @@
<pre>
UL { list-style: upper-roman inside } /* Any UL */
UL > UL { list-style: circle outside } /* Any UL child of a UL */
- </pre>
+</pre>
</div>
<p>Although authors may specify ‘<a href="#list-style"><code
@@ -1431,12 +1436,12 @@
<pre class=example>
OL.alpha LI { list-style: lower-alpha } /* Any LI descendant of an OL */
OL.alpha > LI { list-style: lower-alpha } /* Any LI child of an OL */
- </pre>
+</pre>
<p>Authors who use only the descendant selector may not achieve the results
- they expect. Consider the following rules:</p>
+ they expect. Consider the following rules:
- <xmp>
+ <pre class=html-example><![CDATA[
<!doctype html>
<html>
<head>
@@ -1450,12 +1455,13 @@
<ol class=alpha>
<li>level 1
<ul>
- <li>level 2
+ <li>level 2</li>
</ul>
+ </li>
</ol>
</body>
</html>
- </xmp>
+]]></pre>
<p>The desired rendering would have level 1 list items with ‘<code
class=property>lower-alpha</code>’ labels and level 2 items with
@@ -1467,7 +1473,7 @@
<pre class=example>
OL.alpha > LI { list-style: lower-alpha }
UL LI { list-style: disc }
- </pre>
+</pre>
<p>Another solution would be to specify ‘<a href="#list-style"><code
class=property>list-style</code></a>’ information only on the list
@@ -1476,7 +1482,7 @@
<pre class=example>
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
- </pre>
+</pre>
<p>Inheritance will transfer the ‘<a href="#list-style"><code
class=property>list-style</code></a>’ values from OL and UL elements
@@ -1488,7 +1494,7 @@
<pre>
UL { list-style: url("http://png.com/ellipse.png") disc }
- </pre>
+</pre>
<p> In the example above, the ‘<code
class=property>disc</code>’ will be used when the image is
@@ -1547,7 +1553,8 @@
<div class=html-example>
<p>In the following example, the content is centered within a marker box
of a fixed width. This document:</p>
- <xmp>
+
+ <pre class=html-example><![CDATA[
<!doctype html>
<html>
<head>
@@ -1566,16 +1573,15 @@
</head>
<body>
<ol>
- <li>This is the first item.
-
- <li>This is the second item.
-
- <li>This is the third item.
+ <li>This is the first item.</li>
+ <li>This is the second item.</li>
+ <li>This is the third item.</li>
</ol>
</body>
</html>
- </xmp>
- <p>should render something like this:
+]]></pre>
+
+ <p>should render something like this:</p>
<pre>
(1) This is the
@@ -1584,14 +1590,15 @@
second item.
(3) This is the
third item.
- </pre>
+</pre>
</div>
<p>The next example uses markers to number notes (paragraphs).
<div class=html-example>
<p>The following document:</p>
- <xmp>
+
+ <pre class=html-example><![CDATA[
<!doctype html>
<html>
<head>
@@ -1610,13 +1617,14 @@
</style>
</head>
<body>
- <p>This is the first paragraph in this document.
- <p class=Note>This is a very short document.
- <p>This is the end.
+ <p>This is the first paragraph in this document.</p>
+ <p class="Note">This is a very short document.</p>
+ <p>This is the end.</p>
</body>
</html>
- </xmp>
- <p>should render something like this:
+]]></pre>
+
+ <p>should render something like this:</p>
<pre>
This is the first paragraph
@@ -1626,13 +1634,14 @@
document.
This is the end.
- </pre>
+</pre>
</div>
<div class=html-example>
<p>The following example illustrates how markers may be offset from their
element. This HTML application and style sheet:</p>
- <xmp>
+
+ <pre class=html-example><![CDATA[
<!doctype html>
<html>
<head>
@@ -1642,18 +1651,20 @@
LI::marker { margin: 0 3em 0 0; content: counter(list-item, lower-roman) "."; }
LI { display: list-item }
</style>
+ </head>
<body>
- <p>This is a long preceding paragraph ...
+ <p>This is a long preceding paragraph ...</p>
<ol>
- <li>This is the first item.
- <li>This is the second item.
- <li>This is the third item.
+ <li>This is the first item.</li>
+ <li>This is the second item.</li>
+ <li>This is the third item.</li>
</ol>
- <p>This is a long following paragraph ...
+ <p>This is a long following paragraph ...</p>
</body>
</html>
- </xmp>
- <p>should render something like this:
+]]></pre>
+
+ <p>should render something like this:</p>
<pre>
This is a long preceding
@@ -1665,11 +1676,10 @@
This is a long following
paragraph ...
- </pre>
+</pre>
<p>(Note the use of the implicit counter increment.)</p>
</div>
-
<!-- ====================================================================== -->
<h2 id=counter-style><span class=secno>10. </span> Defining Custom Counter
@@ -1699,9 +1709,20 @@
<p>The ‘<code class=css>@counter-style</code>’ rule is defined
as:
- <xmp class=prod> @counter-style <counter-style-name> { type: range: glyphs:
- additive-glyphs: cjk-glyphs: prefix: suffix: fallback: }
- </xmp>
+
+ <pre class=prod><![CDATA[
+@counter-style <counter-style-name> {
+ type:
+ range:
+ glyphs:
+ additive-glyphs:
+ cjk-glyphs:
+ prefix:
+ suffix:
+ fallback:
+}
+]]></pre>
+
<p class=issue>Copy the way other specs define new @-rules that contain
decl blocks, like @font-face.
@@ -1745,11 +1766,11 @@
through their glyphs repeatedly, while ‘<a href="#numeric"><code
class=css>numeric</code></a>’ type counter styles interpret their
glyphs as digits and build their representation accordingly. It is defined
- as:
+ as:
- <xmp class=prod> <counter-type> = repeating | numeric | alphabetic |
- symbolic | [ non-repeating <integer>? ] | cjk | additive
- </xmp>
+ <pre class=prod><![CDATA[
+<counter-type> = repeating | numeric | alphabetic | symbolic | [ non-repeating <integer>? ] | cjk | additive
+]]></pre>
<dl>
<dt><dfn id=repeating>repeating</dfn>
@@ -1784,15 +1805,21 @@
<div class=example>
<p>A ‘<code class=css>triangle bullet</code>’ list style can
be defined with code like:</p>
- <xmp> @counter-style triangle { type: repeating; glyphs: "▶"; } </xmp>
-
+
+ <pre><![CDATA[
+@counter-style triangle {
+ type: repeating;
+ glyphs: "▶";
+}
+]]></pre>
+
<p>It will then produce lists that look like:</p>
<pre>
▶ First item
▶ Second item
▶ Third item
- </pre>
+</pre>
</div>
<dt><dfn id=numeric>numeric</dfn>
@@ -2031,8 +2058,11 @@
to represent a counter value outside of its range, the counter style
instead drops down to its fallback counter style. The property is defined
as:
- <xmp class=prod> <counter-range> = [<integer> | infinite]{2}
- </xmp>
+
+ <pre class=prod><![CDATA[
+<counter-range> = [<integer> | infinite]{2}
+]]></pre>
+
<p>The first value represents the lower bound of the range (with
‘<code class=property>infinite</code>’ representing negative
infinity), and the second value represents the upper bound of the range
@@ -2058,8 +2088,11 @@
the <a href="#counter-glyph"><i>counter glyph</i></a>s used by several of
the counter style types to construct their representations. It is defined
as:
- <xmp class=prod> <counter-glyphs> = [ <string> | <image> ]+
- </xmp>
+
+ <pre class=prod><![CDATA[
+<counter-glyphs> = [ <string> | <image> ]+
+]]></pre>
+
<p>Some counter style types specify that the ‘<code
class=property>glyphs</code>’ property must have at least two
entries. If the counter style's type is set to such a type, it is a syntax
@@ -2083,8 +2116,11 @@
a string that is placed before the representation of the counter value
when constructing the default contents of the ::marker pseudo-element. It
is defined as:
- <xmp class=prod> <counter-prefix> = <string>
- </xmp>
+
+ <pre class=prod><![CDATA[
+<counter-prefix> = <string>
+]]></pre>
+
<p>If the ‘<code class=property>prefix</code>’ property is
omitted or invalid, its initial value is "" (the empty string).
@@ -2095,8 +2131,11 @@
a string that is placed after the representation of the counter value when
constructing the default contents of the ::marker pseudo-element. It is
defined as:
- <xmp class=prod> <counter-suffix> = <string>
- </xmp>
+
+ <pre class=prod><![CDATA[
+<counter-suffix> = <string>
+]]></pre>
+
<p>If the ‘<code class=property>suffix</code>’ property is
omitted or invalid, its initial value is "." U+002E FULL STOP.
@@ -2108,8 +2147,11 @@
generate a representation for a counter value (for example, if the counter
value is outside the range for the counter style), the representation is
instead generated by the fallback counter style. It is defined as:
- <xmp class=prod> <counter-style-fallback> = <counter-style-name>
- </xmp>
+
+ <pre class=prod><![CDATA[
+<counter-style-fallback> = <counter-style-name>
+]]></pre>
+
<p>If the ‘<code class=property>fallback</code>’ property is
omitted, invalid, or refers to a non-existent counter style, its initial
value is ‘<code class=property>decimal</code>’ (which is
@@ -2192,8 +2234,7 @@
li::marker { margin-right: 1em; text-align: right; }
*/
-
- </pre>
+</pre>
<p class=issue>Another example is required here.</p>
<!--
@@ -2219,9 +2260,8 @@
in this stylesheet.
<pre class=css><code>
- </code></pre>
-
- <p class=issue>Fill this in.</p>
+ <span class=issue>Fill this in.</span>
+ </code></pre>
<!-- ====================================================================== -->
<h2 class=no-num id=acknowledgments> Acknowledgments</h2>
Received on Saturday, 12 March 2011 13:01:46 UTC