- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 11 Mar 2011 21:46:51 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-lists
In directory hutz:/tmp/cvs-serv29110
Modified Files:
Overview.html Overview.src.html
Log Message:
Added skeleton for normative UA stylesheet
Tweaked some examples
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-lists/Overview.html,v
retrieving revision 1.11
retrieving revision 1.12
diff -u -d -r1.11 -r1.12
--- Overview.html 31 Mar 2010 23:52:52 -0000 1.11
+++ Overview.html 11 Mar 2011 21:46:49 -0000 1.12
@@ -3,23 +3,25 @@
<html>
<head>
- <title>CSS Lists Module Level 3</title>
- <link href="../default.css" rel=stylesheet type="text/css">
+ <title>CSS Lists and Counters Module Level 3</title>
+ <meta charset=utf-8>
+ <link href="http://dev.w3.org/csswg/default.css" rel=stylesheet
+ type="text/css">
<style type="text/css">
[...7407 lines suppressed...]
- <li>upper-latin, <a href="#upper-latin"
- title=upper-latin><strong>3.4</strong></a>
+ <li>outside, <a href="#outside" title=outside><strong>7.</strong></a>
- <li>upper-norwegian, <a href="#upper-norwegian"
- title=upper-norwegian><strong>3.4</strong></a>
+ <li>repeating, <a href="#repeating"
+ title=repeating><strong>10.1.1.</strong></a>
- <li>upper-roman, <a href="#upper-roman"
- title=upper-roman><strong>3.2</strong></a>
+ <li><string>, <a href="#ltstring"
+ title="<string>"><strong>3.</strong></a>
- <li>urdu, <a href="#urdu" title=urdu><strong>3.3</strong></a>
+ <li>symbolic, <a href="#symbolic"
+ title=symbolic><strong>10.1.1.</strong></a>
</ul>
<!--end-index-->
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-lists/Overview.src.html,v
retrieving revision 1.27
retrieving revision 1.28
diff -u -d -r1.27 -r1.28
--- Overview.src.html 10 Mar 2011 19:54:15 -0000 1.27
+++ Overview.src.html 11 Mar 2011 21:46:49 -0000 1.28
@@ -104,25 +104,25 @@
<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>
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
- <HEAD>
- <TITLE>Creating a list with markers</TITLE>
- <STYLE type="text/css">
- LI::marker { content: "(" counter(list-item, lower-roman) ")"; }
- LI { display: list-item; }
- </STYLE>
- </HEAD>
- <BODY>
- <OL>
- <LI> This is the first item. </LI>
- <LI> This is the second item. </LI>
- <LI> This is the third item. </LI>
- </OL>
- </BODY>
-</HTML>
- </pre>
+ <xmp>
+<!doctype html>
+<html>
+ <head>
+ <title>Creating a list with markers</title>
+ <style>
+ li::marker { content: "(" counter(list-item, lower-roman) ")"; }
+ li { display: list-item; }
+ </style>
+ </head>
+ <body>
+ <ol>
+ <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: </p>
@@ -736,10 +736,14 @@
<div class="example">
<p>Given the following style sheet:</p>
- <pre>li { display: list-item; list-style-type: decimal /* initial value */; }
-li::marker { content: normal /* initial value */; }</pre>
+ <pre>
+li { display: list-item; list-style-type: decimal /* initial value */; }
+li::marker { content: normal /* initial value */; }
+ </pre>
<p>And the following document fragment:</p>
- <pre><li> List Item </li></pre>
+ <xmp>
+<li>List Item</li>
+ </xmp>
<p>The computed value of the 'content' property on the ''::marker''
pseudo-element of the list item element is:</p>
<pre>counter(list-item, decimal) "."</pre>
@@ -789,7 +793,7 @@
<dt><dfn>hanging</dfn></dt>
<dd>As ''inside'', except the marker is absolutely positioned (see the section
- on ''::marker'' for more details.) The marker's auto position is such that
+ on ''::marker'' for more details.) The marker's static position is such that
its "before" edge is aligned with the "before" edge of the first line box
in the list item, and its "end" edge is flush with the "start" edge of the
first line box in the list item.
@@ -798,7 +802,7 @@
<dt><dfn>outside</dfn></dt>
<dd>As ''inside'', except the marker is absolutely positioned (see the section
- on ''::marker'' for more details.) The marker's auto position is such that
+ on ''::marker'' for more details.) The marker's static position is such that
its "before" edge is aligned with the "before" edge of the list item. If
the list item's parent box is ltr, the marker's "end" edge must be flush
with the list item's "start" edge; if the list item's parent box is rtl,
@@ -838,34 +842,33 @@
<p>Note that a marker is only generated if the computed value of the 'content'
property for the element's ''::marker'' pseudo-element is not ''inhibit''.</p>
- <div class="html-example">
+ <div class=example>
<p>For example:
- <pre>
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
- <HEAD>
- <TITLE>Comparison of inside/outside position</TITLE>
- <STYLE type="text/css">
- UL { list-style: outside }
- UL.compact { list-style: inside }
- </STYLE>
- </HEAD>
- <BODY>
- <UL>
- <LI>first list item comes first</LI>
- <LI>second list item comes second</LI>
- </UL>
- <HT>
- <UL class="compact">
- <LI>first list item comes first</LI>
- <LI>second list item comes second</LI>
- </UL>
- </BODY>
-</HTML>
- </pre>
+ <xmp class=html-example>
+<!doctype html>
+<html>
+ <head>
+ <title>Comparison of inside/outside position</title>
+ <style>
+ ul { list-style: outside; }
+ ul.compact { list-style: inside; }
+ </style>
+ </head>
+ <body>
+ <ul>
+ <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>
+ <li>second list item comes second</li>
+ </ul>
+ </body>
+</html>
+ </xmp>
- <p> The above example may be formatted as:</p>
+ <p>The above example may be formatted as:</p>
<div class="figure">
<p><img id="img-list-inout" src="list-inout.gif" alt="list with bullets to the left of it and list with bullets inside"></p>
@@ -925,27 +928,27 @@
<p>Authors who use only the descendant selector may not
achieve the results they expect. Consider the following rules:</p>
- <pre class="html-example">
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
- <HEAD>
- <TITLE>WARNING: Unexpected results due to cascade</TITLE>
- <STYLE type="text/css">
- OL.alpha LI { list-style: lower-alpha }
- UL LI { list-style: disc }
- </STYLE>
- </HEAD>
- <BODY>
- <OL class="alpha">
- <LI>level 1
- <UL>
- <LI>level 2</LI>
- </UL>
- </LI>
- </OL>
- </BODY>
-</HTML>
- </pre>
+ <xmp class="html-example">
+<!doctype html>
+<html>
+ <head>
+ <title>WARNING: Unexpected results due to cascade</title>
+ <style>
+ ol.alpha li { list-style: lower-alpha; }
+ ul li { list-style: disc; }
+ </style>
+ </head>
+ <body>
+ <ol class=alpha>
+ <li>level 1
+ <ul>
+ <li>level 2</li>
+ </ul>
+ </li>
+ </ol>
+ </body>
+</html>
+ </xmp>
<p>The desired rendering would have level 1 list items with 'lower-alpha' labels and level 2 items
with 'disc' labels. However, the cascading order will cause the first style rule (which includes
@@ -1010,12 +1013,12 @@
<p>In the following example, the content is centered within a marker
box of a fixed width. This document:</p>
- <pre>
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
- <HEAD>
- <TITLE>Content alignment in the marker box</TITLE>
- <STYLE type="text/css">
+ <xmp class=html-example>
+<!doctype html>
+<html>
+ <head>
+ <title>Content alignment in the marker box</title>
+ <style>
LI::marker {
content: "(" counter(counter) ")";
width: 6em;
@@ -1025,19 +1028,19 @@
display: list-item;
counter-increment: counter;
}
- </STYLE>
- </HEAD>
- <BODY>
- <OL>
- <LI> This is the first item. </LI>
- <LI> This is the second item. </LI>
- <LI> This is the third item. </LI>
- </OL>
- </BODY>
-</HTML>
- </pre>
+ </style>
+ </head>
+ <body>
+ <ol>
+ <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: </p>
+ <p>should render something like this: </p>
<pre>
(1) This is the
@@ -1055,12 +1058,12 @@
<div class="html-example">
<p>The following document:</p>
- <pre>
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
- <HEAD>
- <TITLE>Markers to create numbered notes4>/TITLE>
- <STYLE type="text/css">
+ <xmp class=html-example>
+<!doctype html>
+<html>
+ <head>
+ <title>Markers to create numbered notes</title>
+ <style>
P { margin-left: 12 em; }
P.Note::marker {
content: url("note.gif") "Note " counter(note-counter) ":";
@@ -1071,17 +1074,17 @@
display: list-item;
counter-increment: note-counter;
}
- </STYLE>
- </HEAD>
- <BODY>
- <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>
- </pre>
+ </style>
+ </head>
+ <body>
+ <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 produce something like:</p>
+ <p>should render something like this:</p>
<pre>
This is the first paragraph
@@ -1098,30 +1101,30 @@
<p>The following example illustrates how markers may be offset from their element. This HTML
application and style sheet:</p>
- <pre>
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<HTML>
- <HEAD>
- <TITLE>Marker example 5</TITLE>
- <STYLE type="text/css">
+ <xmp class=html-example>
+<!doctype html>
+<html>
+ <head>
+ <title>Marker example</title>
+ <style>
P { margin-left: 8em } /* Make space for counters */
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>
- <OL>
- <LI> This is the first item.
- <LI> This is the second item.
- <LI> This is the third item.
- </OL>
- <P> This is a long following paragraph ...</P>
- </BODY>
-</HTML>
- </pre>
+ </style>
+ </head>
+ <body>
+ <p>This is a long preceding paragraph ...</p>
+ <ol>
+ <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>
+ </body>
+</html>
+ </xmp>
- <p>should produce something like this: </p>
+ <p>should render something like this: </p>
<pre>
This is a long preceding
@@ -1629,6 +1632,26 @@
<!-- ====================================================================== -->
+<h2 id=ua-stylesheet>
+Appendix A: Required Predefined Counter Styles</h2>
+
+ <p>While this specification defines a mechanism to allow authors to define
+ almost any counter style they would want, forcing authors to redefine common
+ styles every time they are used would be unnecessarily onerous. To aid in this
+ regard, this specification predefines a large set of counter styles. User agents
+ must include the following stylesheet as a user-agent stylesheet, so authors
+ can depend on these styles being present.</p>
+
+ <p>As with any ''@counter-style'' rule, the counter style definitions given
+ here can be overridden by the author if they desire to attach a different style
+ to a counter style name defined in this stylesheet.</p>
+
+ <pre class=css><code>
+ <p class=issue>Fill this in.</p>
+ </code></pre>
+
+<!-- ====================================================================== -->
+
<h2 class="no-num" id="acknowledgments">
Acknowledgments</h2>
Received on Friday, 11 March 2011 21:46:53 UTC