- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 28 Apr 2011 01:35:26 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-lists
In directory hutz:/tmp/cvs-serv8598
Modified Files:
Overview.html Overview.src.html
Log Message:
First draft of display:marker and list-style-type:inline
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-lists/Overview.html,v
retrieving revision 1.35
retrieving revision 1.36
diff -u -d -r1.35 -r1.36
--- Overview.html 28 Apr 2011 00:11:07 -0000 1.35
+++ Overview.html 28 Apr 2011 01:35:24 -0000 1.36
@@ -173,82 +173,86 @@
class=property>content</code>’ property</a>
</ul>
- <li><a href="#predefined-counters"><span class=secno>7. </span> Predefined
+ <li><a href="#display-marker"><span class=secno>7. </span> Using Content
+ as Markers: the ‘<code class=css>marker</code>’ value for
+ ‘<code class=property>display</code>’</a>
+
+ <li><a href="#predefined-counters"><span class=secno>8. </span> Predefined
Counter Styles</a>
<ul class=toc>
- <li><a href="#decimal-counters"><span class=secno>7.1. </span> The
+ <li><a href="#decimal-counters"><span class=secno>8.1. </span> The
‘<code class=css>decimal</code>’ counter style</a>
- <li><a href="#glyph-counters"><span class=secno>7.2. </span> Glyphs</a>
+ <li><a href="#glyph-counters"><span class=secno>8.2. </span> Glyphs</a>
- <li><a href="#complex-counters"><span class=secno>7.3. </span> Complex
+ <li><a href="#complex-counters"><span class=secno>8.3. </span> Complex
counter styles</a>
<ul class=toc>
- <li><a href="#ethiopic-numeric"><span class=secno>7.3.1. </span> The
+ <li><a href="#ethiopic-numeric"><span class=secno>8.3.1. </span> The
‘<code class=property>ethiopic-numeric</code>’ counter
style</a>
- <li><a href="#cjk-counter-styles"><span class=secno>7.3.2. </span> The
+ <li><a href="#cjk-counter-styles"><span class=secno>8.3.2. </span> The
CJK longhand counter styles</a>
</ul>
</ul>
- <li><a href="#counter-style"><span class=secno>8. </span> Defining Custom
+ <li><a href="#counter-style"><span class=secno>9. </span> Defining Custom
Counter Styles: the ‘<code class=css>@counter-style</code>’
rule</a>
<ul class=toc>
- <li><a href="#counter-style-type"><span class=secno>8.1. </span> Counter
+ <li><a href="#counter-style-type"><span class=secno>9.1. </span> Counter
algorithms: the ‘<code class=property>type</code>’
descriptor</a>
<ul class=toc>
- <li><a href="#repeating"><span class=secno>8.1.1. </span>
+ <li><a href="#repeating"><span class=secno>9.1.1. </span>
repeating</a>
- <li><a href="#numeric"><span class=secno>8.1.2. </span> numeric</a>
+ <li><a href="#numeric"><span class=secno>9.1.2. </span> numeric</a>
- <li><a href="#alphabetic"><span class=secno>8.1.3. </span>
+ <li><a href="#alphabetic"><span class=secno>9.1.3. </span>
alphabetic</a>
- <li><a href="#symbolic"><span class=secno>8.1.4. </span> symbolic</a>
+ <li><a href="#symbolic"><span class=secno>9.1.4. </span> symbolic</a>
- <li><a href="#non-repeating"><span class=secno>8.1.5. </span>
+ <li><a href="#non-repeating"><span class=secno>9.1.5. </span>
non-repeating</a>
- <li><a href="#additive"><span class=secno>8.1.6. </span> additive</a>
+ <li><a href="#additive"><span class=secno>9.1.6. </span> additive</a>
- <li><a href="#override"><span class=secno>8.1.7. </span> override</a>
+ <li><a href="#override"><span class=secno>9.1.7. </span> override</a>
</ul>
- <li><a href="#counter-style-negative"><span class=secno>8.2. </span>
+ <li><a href="#counter-style-negative"><span class=secno>9.2. </span>
Formatting negative values: the ‘<code
class=property>negative</code>’ descriptor</a>
- <li><a href="#counter-style-prefix"><span class=secno>8.3. </span>
+ <li><a href="#counter-style-prefix"><span class=secno>9.3. </span>
Symbols before the marker: the ‘<code
class=property>prefix</code>’ descriptor</a>
- <li><a href="#counter-style-suffix"><span class=secno>8.4. </span>
+ <li><a href="#counter-style-suffix"><span class=secno>9.4. </span>
Symbols after the marker: the ‘<code
class=property>suffix</code>’ descriptor</a>
- <li><a href="#counter-style-range"><span class=secno>8.5. </span>
+ <li><a href="#counter-style-range"><span class=secno>9.5. </span>
Limiting the counter scope: the ‘<code
class=property>range</code>’ descriptor</a>
- <li><a href="#counter-style-fallback"><span class=secno>8.6. </span>
+ <li><a href="#counter-style-fallback"><span class=secno>9.6. </span>
Defining fallback: the ‘<code
class=property>fallback</code>’ descriptor</a>
- <li><a href="#counter-style-glyphs"><span class=secno>8.7. </span>
+ <li><a href="#counter-style-glyphs"><span class=secno>9.7. </span>
Marker characters: the ‘<code class=property>glyphs</code>’
and ‘<code class=property>additive-glyphs</code>’
descriptors</a>
</ul>
- <li><a href="#html4"><span class=secno>9. </span> Sample style sheet for
+ <li><a href="#html4"><span class=secno>10. </span> Sample style sheet for
HTML</a>
- <li><a href="#ua-stylesheet"><span class=secno>10. </span> Appendix A:
+ <li><a href="#ua-stylesheet"><span class=secno>11. </span> Appendix A:
Additional Predefined Counter Styles</a>
<li class=no-num><a href="#profiles"> Profiles</a>
@@ -334,8 +338,8 @@
<h2 id=declaring-a-list-item><span class=secno>2. </span> Declaring a List
Item</h2>
- <p>To declare a list item, the ‘<code
- class=property>display</code>’ property should be set to
+ <p>To declare a list item, the ‘<a href="#display"><code
+ class=property>display</code></a>’ property should be set to
‘<code class=css>list-item</code>’. This, in addition to
generating a ‘<code class=css>::marker</code>’ pseudo-element
and enabling the properties described below for that element, causes that
@@ -350,9 +354,9 @@
the ‘<code class=css>counter()</code>’ and ‘<code
class=css>counters()</code>’ functions.
- <p class=issue>The CSS3 box module may define other ‘<code
- class=property>display</code>’ values which generate a list marker.
- These should also affect the ‘<code
+ <p class=issue>The CSS3 box module may define other ‘<a
+ href="#display"><code class=property>display</code></a>’ values
+ which generate a list marker. These should also affect the ‘<code
class=css>list-item</code>’ counter.
<p>Note that this new model makes the ‘<code
@@ -377,7 +381,7 @@
<th>Value:
<td><a href="#ltstring"><b><string></b></a> | <a
- href="#ltcounter-style"><b><counter-style></b></a> | none
+ href="#ltcounter-style"><b><counter-style></b></a> | inline | none
<tr>
<th>Initial:
@@ -423,14 +427,6 @@
<dd>The ‘<code class=css>::marker</code>’ pseudoelement must
use the provided string as its default contents.
- <dt><dfn id=none>none</dfn>
-
- <dd>The ‘<code class=css>::marker</code>’ pseudoelement must
- have no default contents. This will suppress the creation of a marker
- unless the ‘<code class=css>::marker</code>’ has its contents
- specified directly through the ‘<code
- class=property>content</code>’ property.
-
<dt><dfn id=ltcounter-style><counter-style></dfn>
<dd>
@@ -443,6 +439,20 @@
<p>The <b>UA style sheet</b> given later in this spec provides a large
list of counter style definitions, and authors or users may define their
own counter styles as well.</p>
+
+ <dt><dfn id=inline>inline</dfn>
+
+ <dd>The ‘<code class=css>::marker</code>’ pseudoelement's
+ default contents must be the contents of the list item's first child
+ element with ‘<code class=css>display: marker</code>’.
+
+ <dt><dfn id=none>none</dfn>
+
+ <dd>The ‘<code class=css>::marker</code>’ pseudoelement must
+ have no default contents. This will suppress the creation of a marker
+ unless the ‘<code class=css>::marker</code>’ has its contents
+ specified directly through the ‘<code
+ class=property>content</code>’ property.
</dl>
<table class=propdef>
@@ -794,9 +804,9 @@
<h2 id=marker-pseudoelement><span class=secno>6. </span> Markers: The
‘<code class=css>::marker</code>’ pseudo-element</h2>
- <p>Markers are created by setting an element's ‘<code
- class=property>display</code>’ property to ‘<code
- class=css>list-item</code>’. The ‘<code
+ <p>Markers are created by setting an element's ‘<a
+ href="#display"><code class=property>display</code></a>’ property to
+ ‘<code class=css>list-item</code>’. The ‘<code
class=css>list-item</code>’ display type is, in every other respect,
identical to the ‘<code class=css>block</code>’ display type.
The marker box is only created if the computed value of the ‘<code
@@ -954,14 +964,14 @@
<p>If a ‘<code class=css>::marker</code>’ pseudo-element has
its ‘<code class=property>content</code>’ property set to
- ‘<code class=css>normal</code>’, the following algorithm
- should be used to generate the computed value of the property.
+ ‘<code class=css>normal</code>’, the computed value of the
+ marker's ‘<code class=property>content</code>’ property must
+ be constructed according to the following algorithm:
<ol>
<li>If the computed value of ‘<a href="#list-style-image"><code
- class=property>list-style-image</code></a>’ is not ‘<a
- href="#none"><code class=css>none</code></a>’, and if the image is
- valid, then the computed value of the ‘<code
+ class=property>list-style-image</code></a>’ is a valid image, then
+ the computed value of the ‘<code
class=property>content</code>’ property is the value of the
‘<a href="#list-style-image"><code
class=property>list-style-image</code></a>’ property.
@@ -974,16 +984,26 @@
<li>Otherwise, if the computed value of ‘<a
href="#list-style-type"><code
- class=property>list-style-type</code></a>’ is not ‘<a
- href="#none"><code class=css>none</code></a>’, then the computed
+ class=property>list-style-type</code></a>’ is the keyword ‘<a
+ href="#inline"><code class=css>inline</code></a>’, and the list
+ item has a child element which is an <i
+ title=inline-marker-candidate>inline marker candidate</i>, the computed
value of the ‘<code class=property>content</code>’ property
- is ‘<code class=css>counter(list-item, <a
- href="#ltcounter-style"><b><counter-style></b></a>)</code>’,
- where <a href="#ltcounter-style"><b><counter-style></b></a> is the
+ is the textual contents of the list item's first <i
+ title=inline-marker-candidate>inline marker candidate child</i>.
+
+ <li>Otherwise, if the computed value of ‘<a
+ href="#list-style-type"><code
+ class=property>list-style-type</code></a>’ is the name of a counter
+ style, then the computed value of the ‘<code
+ class=property>content</code>’ property is ‘<code
+ class=css>counter(list-item, <a
+ href="#ltcounter-style"><i><counter-style></i></a>)</code>’,
+ where <a href="#ltcounter-style"><i><counter-style></i></a> is the
computed value of the ‘<a href="#list-style-type"><code
class=property>list-style-type</code></a>’ property, followed by a
string that is the suffix for the counter style in question (which may be
- empty).
+ empty). <span class=issue>Fix this.</span>
<li>Otherwise the computed value is ‘<a href="#none"><code
class=css>none</code></a>’.
@@ -1010,9 +1030,57 @@
<pre>counter(list-item, decimal) "."</pre>
</div>
- <!-- ====================================================================== -->
+ <!-- ===================================================================== -->
- <h2 id=predefined-counters><span class=secno>7. </span> Predefined Counter
+ <h2 id=display-marker><span class=secno>7. </span> Using Content as
+ Markers: the ‘<code class=css>marker</code>’ value for
+ ‘<a href="#display"><code class=property>display</code></a>’</h2>
+
+ <p>In some situations, such as legal proceedings or official minutes, the
+ precise form that the list marker takes is a vital part of the content.
+ It's not acceptable for the marker to change just because the UA is not
+ rendering CSS, or some server error is temporarily preventing the CSS file
+ from being loaded, as the precise marker name is used to officially refer
+ to that segment. The only way to guarantee that the marker will be
+ rendered correctly, regardless of whether CSS is applied, is to specify
+ the marker outside of CSS, directly in the document's markup. However, the
+ page author may still want to style the marker in many of the ways that
+ are available to them when using ordinary CSS-generated markers. To
+ accomodate this, a new value for the ‘<a href="#display"><code
+ class=property>display</code></a>’ property is defined.
+
+ <table class=propdef>
+ <tbody>
+ <tr>
+ <th>Name:
+
+ <td><dfn id=display>display</dfn>
+
+ <tr>
+ <th>New Value:
+
+ <td>marker
+
+ <tr>
+ <th>Applies to:
+
+ <td>Children elements of display:list-item elements
+ </table>
+
+ <p>The ‘<code class=css>marker</code>’ value for ‘<a
+ href="#display"><code class=property>display</code></a>’ indicates
+ that an element is a <i title=inline-marker-candidate>candidate for having
+ its contents used as a list marker</i>. If the element is a child of a
+ list item with ‘<code
+ class=css>list-style-type:inline</code>’, and none of the element's
+ previous siblings are candidates, the textual content of the element (such
+ as what would be returned by the .textContent property on the element in
+ HTML) must be used as the default contents of the ::marker pseudoelement
+ on the element's parent. Otherwise, this value must be treated identically
+ to ‘<code class=css>inline-block</code>’.</p>
+ <!-- ===================================================================== -->
+
+ <h2 id=predefined-counters><span class=secno>8. </span> Predefined Counter
Styles</h2>
<p>While authors may define their own counter styles using the ‘<code
@@ -1024,7 +1092,7 @@
require special handling beyond what can be expressed in a stylesheet,
though. Those counter styles are described in this section.
- <h3 id=decimal-counters><span class=secno>7.1. </span> The ‘<code
+ <h3 id=decimal-counters><span class=secno>8.1. </span> The ‘<code
class=css>decimal</code>’ counter style</h3>
<p>The ‘<code class=css>decimal</code>’ counter style is the
@@ -1038,7 +1106,7 @@
class=css>decimal</code>’ counter style given in Appendix A to be
overridden.
- <h3 id=glyph-counters><span class=secno>7.2. </span> Glyphs</h3>
+ <h3 id=glyph-counters><span class=secno>8.2. </span> Glyphs</h3>
<p>CSS 2.1 defined three single-glyph counter styles (‘<code
class=css>circle</code>’, ‘<code class=css>disc</code>’,
@@ -1071,7 +1139,7 @@
<dd>A filled square, similar to ■ U+25A0 BLACK SQUARE.
</dl>
- <h3 id=complex-counters><span class=secno>7.3. </span> Complex counter
+ <h3 id=complex-counters><span class=secno>8.3. </span> Complex counter
styles</h3>
<p>Some real-life counter styles are unfortunately too complex to be
@@ -1083,7 +1151,7 @@
the counter style name and the given algorithm to format counter values.
They must be overrideable like any other predefined counter style.
- <h4 id=ethiopic-numeric><span class=secno>7.3.1. </span> The ‘<code
+ <h4 id=ethiopic-numeric><span class=secno>8.3.1. </span> The ‘<code
class=property>ethiopic-numeric</code>’ counter style</h4>
<p>The Ethiopian numbering system is defined for all positive non-zero
@@ -1272,7 +1340,7 @@
U+137B <!-- odd --> U+137A U+136A. <!-- 90 2 --></p>
</div>
- <h4 id=cjk-counter-styles><span class=secno>7.3.2. </span> The CJK longhand
+ <h4 id=cjk-counter-styles><span class=secno>8.3.2. </span> The CJK longhand
counter styles</h4>
<p>Chinese, Japanese, and Korean have longhand counter styles, which have a
@@ -2273,7 +2341,7 @@
10<sup>16</sup>.</p>
<!-- ====================================================================== -->
- <h2 id=counter-style><span class=secno>8. </span> Defining Custom Counter
+ <h2 id=counter-style><span class=secno>9. </span> Defining Custom Counter
Styles: the ‘<code class=css>@counter-style</code>’ rule</h2>
<p>CSS 2.1 defined a handful of useful counter styles based on the styles
@@ -2353,7 +2421,7 @@
href="#hanging"><code class=css>hanging</code></a>’; otherwise the
@counter-style is invalid and must be ignored.</i></i>
- <h3 id=counter-style-type><span class=secno>8.1. </span> Counter
+ <h3 id=counter-style-type><span class=secno>9.1. </span> Counter
algorithms: the ‘<a href="#type"><code
class=property>type</code></a>’ descriptor</h3>
@@ -2385,7 +2453,7 @@
as digits and build their representation accordingly. The types are
defined as follows:
- <h4 id=repeating><span class=secno>8.1.1. </span> repeating</h4>
+ <h4 id=repeating><span class=secno>9.1.1. </span> repeating</h4>
<p>If the type is ‘<code class=css>repeating</code>’, the
‘<a href="#glyphs"><code class=property>glyphs</code></a>’
@@ -2429,7 +2497,7 @@
</pre>
</div>
- <h4 id=numeric><span class=secno>8.1.2. </span> numeric</h4>
+ <h4 id=numeric><span class=secno>9.1.2. </span> numeric</h4>
<p>If the type is ‘<code class=css>numeric</code>’, the
‘<a href="#glyphs"><code class=property>glyphs</code></a>’
@@ -2500,7 +2568,7 @@
</pre>
</div>
- <h4 id=alphabetic><span class=secno>8.1.3. </span> alphabetic</h4>
+ <h4 id=alphabetic><span class=secno>9.1.3. </span> alphabetic</h4>
<p>If the type is ‘<code class=css>alphabetic</code>’, the
‘<a href="#glyphs"><code class=property>glyphs</code></a>’
@@ -2602,7 +2670,7 @@
wild first.</p>
</div>
- <h4 id=symbolic><span class=secno>8.1.4. </span> symbolic</h4>
+ <h4 id=symbolic><span class=secno>9.1.4. </span> symbolic</h4>
<p>If the type is ‘<code class=css>symbolic</code>’, the
‘<a href="#glyphs"><code class=property>glyphs</code></a>’
@@ -2655,7 +2723,7 @@
characters long, but they may choose to instead use the fallback style for
representations that would be longer than 20 characters.
- <h4 id=non-repeating><span class=secno>8.1.5. </span> non-repeating</h4>
+ <h4 id=non-repeating><span class=secno>9.1.5. </span> non-repeating</h4>
<p>If the type is ‘<code class=css>non-repeating</code>’, the
‘<a href="#glyphs"><code class=property>glyphs</code></a>’
@@ -2706,7 +2774,7 @@
</pre>
</div>
- <h4 id=additive><span class=secno>8.1.6. </span> additive</h4>
+ <h4 id=additive><span class=secno>9.1.6. </span> additive</h4>
<p>If the type is ‘<code class=css>additive</code>’, the
‘<a href="#additive-glyphs"><code
@@ -2783,7 +2851,7 @@
characters long, but they may choose to instead use the fallback style for
representations that would be longer than 20 characters.
- <h4 id=override><span class=secno>8.1.7. </span> override</h4>
+ <h4 id=override><span class=secno>9.1.7. </span> override</h4>
<p>The ‘<code class=css>override</code>’ type allows an author
to use the representation-construction algorithm of another counter style,
@@ -2802,7 +2870,7 @@
it was overriding the ‘<code class=css>decimal</code>’ counter
style.
- <h3 id=counter-style-negative><span class=secno>8.2. </span> Formatting
+ <h3 id=counter-style-negative><span class=secno>9.2. </span> Formatting
negative values: the ‘<a href="#negative"><code
class=property>negative</code></a>’ descriptor</h3>
@@ -2840,7 +2908,7 @@
like "(2) (1) 0 1 2 3...".</p>
</div>
- <h3 id=counter-style-prefix><span class=secno>8.3. </span> Symbols before
+ <h3 id=counter-style-prefix><span class=secno>9.3. </span> Symbols before
the marker: the ‘<a href="#prefix0"><code
class=property>prefix</code></a>’ descriptor</h3>
@@ -2870,7 +2938,7 @@
or counters() functions are used. Prefixes are added to the representation
after negative signs.
- <h3 id=counter-style-suffix><span class=secno>8.4. </span> Symbols after
+ <h3 id=counter-style-suffix><span class=secno>9.4. </span> Symbols after
the marker: the ‘<a href="#suffix0"><code
class=property>suffix</code></a>’ descriptor</h3>
@@ -2900,7 +2968,7 @@
or counters() functions are used. Suffixes are added to the representation
after negative signs.
- <h3 id=counter-style-range><span class=secno>8.5. </span> Limiting the
+ <h3 id=counter-style-range><span class=secno>9.5. </span> Limiting the
counter scope: the ‘<a href="#range"><code
class=property>range</code></a>’ descriptor</h3>
@@ -2948,7 +3016,7 @@
limits. Should we require UAs to support all values in a signed 2-byte
int, or a signed 4-byte int?
- <h3 id=counter-style-fallback><span class=secno>8.6. </span> Defining
+ <h3 id=counter-style-fallback><span class=secno>9.6. </span> Defining
fallback: the ‘<a href="#fallback"><code
class=property>fallback</code></a>’ descriptor</h3>
@@ -3001,7 +3069,7 @@
easier for implementations to just detect and reject circular fallback
graphs, that would probably be acceptable.</span>
- <h3 id=counter-style-glyphs><span class=secno>8.7. </span> Marker
+ <h3 id=counter-style-glyphs><span class=secno>9.7. </span> Marker
characters: the ‘<a href="#glyphs"><code
class=property>glyphs</code></a>’ and ‘<a
href="#additive-glyphs"><code
@@ -3089,7 +3157,7 @@
object size</a> of an image counter glyph is a 1em by 1em square.</p>
<!-- ====================================================================== -->
- <h2 id=html4><span class=secno>9. </span> Sample style sheet for HTML</h2>
+ <h2 id=html4><span class=secno>10. </span> Sample style sheet for HTML</h2>
<p>This section is informative, nor normative. HTML itself defines the
actual default properties that apply to HTML lists.
@@ -3163,7 +3231,7 @@
</pre>
<!-- ====================================================================== -->
- <h2 id=ua-stylesheet><span class=secno>10. </span> Appendix A: Additional
+ <h2 id=ua-stylesheet><span class=secno>11. </span> Appendix A: Additional
Predefined Counter Styles</h2>
<p>While this specification defines a mechanism to allow authors to define
@@ -4165,6 +4233,13 @@
<td>N/A
<tr valign=baseline>
+ <td><a class=property href="#display">display</a>
+
+ <td>marker
+
+ <td>Children elements of display:list-item elements
+
+ <tr valign=baseline>
<td><a class=property href="#fallback">fallback</a>
<td><counter-style-name>
@@ -4227,7 +4302,7 @@
<tr valign=baseline>
<td><a class=property href="#list-style-type">list-style-type</a>
- <td><string> | <counter-style> | none
+ <td><string> | <counter-style> | inline | none
<td>disc
@@ -4282,73 +4357,77 @@
<ul class=indexlist>
<li>additive-glyphs, <a href="#additive-glyphs"
- title=additive-glyphs><strong>8.7.</strong></a>
+ title=additive-glyphs><strong>9.7.</strong></a>
<li>additive tuple, <a href="#additive-tuple" title="additive
- tuple"><strong>8.7.</strong></a>
+ tuple"><strong>9.7.</strong></a>
<li>counter-algorithm, <a href="#algorithm"
- title=counter-algorithm><strong>8.</strong></a>
+ title=counter-algorithm><strong>9.</strong></a>
<li>counter-fallback, <a href="#fallback-style"
- title=counter-fallback><strong>8.</strong></a>
+ title=counter-fallback><strong>9.</strong></a>
<li>counter glyph, <a href="#counter-glyph" title="counter
- glyph"><strong>8.7.</strong></a>
+ glyph"><strong>9.7.</strong></a>
<li>counter-lower-bound, <a href="#lower-range-bound"
- title=counter-lower-bound><strong>8.</strong></a>
+ title=counter-lower-bound><strong>9.</strong></a>
<li>counter-name, <a href="#name"
- title=counter-name><strong>8.</strong></a>
+ title=counter-name><strong>9.</strong></a>
<li>counter-negative, <a href="#negative-sign"
- title=counter-negative><strong>8.</strong></a>
+ title=counter-negative><strong>9.</strong></a>
<li>counter-prefix, <a href="#prefix"
- title=counter-prefix><strong>8.</strong></a>
+ title=counter-prefix><strong>9.</strong></a>
<li><counter-style>, <a href="#ltcounter-style"
title="<counter-style>"><strong>3.</strong></a>
<li>counter style, <a href="#counter-style0" title="counter
- style"><strong>8.</strong></a>
+ style"><strong>9.</strong></a>
<li>counter-suffix, <a href="#suffix"
- title=counter-suffix><strong>8.</strong></a>
+ title=counter-suffix><strong>9.</strong></a>
<li>counter-upper-bound, <a href="#upper"
- title=counter-upper-bound><strong>8.</strong></a>
+ title=counter-upper-bound><strong>9.</strong></a>
<li>current tuple, <a href="#current-tuple" title="current
- tuple"><strong>8.1.6.</strong></a>
+ tuple"><strong>9.1.6.</strong></a>
- <li>fallback, <a href="#fallback" title=fallback><strong>8.6.</strong></a>
+ <li>display, <a href="#display" title=display><strong>7.</strong></a>
+
+ <li>fallback, <a href="#fallback" title=fallback><strong>9.6.</strong></a>
<li>first glyph value, <a href="#first-glyph-value" title="first glyph
- value"><strong>8.1.5.</strong></a>
+ value"><strong>9.1.5.</strong></a>
- <li>glyphs, <a href="#glyphs" title=glyphs><strong>8.7.</strong></a>
+ <li>glyphs, <a href="#glyphs" title=glyphs><strong>9.7.</strong></a>
<li>hanging, <a href="#hanging" title=hanging><strong>4.</strong></a>
+ <li>inline, <a href="#inline" title=inline><strong>3.</strong></a>
+
<li>inside, <a href="#inside" title=inside><strong>4.</strong></a>
<li>japanese-formal, <a href="#japanese-formal"
- title=japanese-formal><strong>7.3.2.</strong></a>
+ title=japanese-formal><strong>8.3.2.</strong></a>
<li>japanese-informal, <a href="#japanese-informal"
- title=japanese-informal><strong>7.3.2.</strong></a>
+ title=japanese-informal><strong>8.3.2.</strong></a>
<li>korean-hangul-formal, <a href="#korean-hangul-formal"
- title=korean-hangul-formal><strong>7.3.2.</strong></a>
+ title=korean-hangul-formal><strong>8.3.2.</strong></a>
<li>korean-hanja-formal, <a href="#korean-hanja-formal"
- title=korean-hanja-formal><strong>7.3.2.</strong></a>
+ title=korean-hanja-formal><strong>8.3.2.</strong></a>
<li>korean-hanja-informal, <a href="#korean-hanja-informal"
- title=korean-hanja-informal><strong>7.3.2.</strong></a>
+ title=korean-hanja-informal><strong>8.3.2.</strong></a>
<li>list-style, <a href="#list-style"
title=list-style><strong>5.</strong></a>
@@ -4362,34 +4441,34 @@
<li>list-style-type, <a href="#list-style-type"
title=list-style-type><strong>3.</strong></a>
- <li>negative, <a href="#negative" title=negative><strong>8.2.</strong></a>
+ <li>negative, <a href="#negative" title=negative><strong>9.2.</strong></a>
<li>none, <a href="#none" title=none><strong>3.</strong></a>
<li>outside, <a href="#outside" title=outside><strong>4.</strong></a>
- <li>prefix, <a href="#prefix0" title=prefix><strong>8.3.</strong></a>
+ <li>prefix, <a href="#prefix0" title=prefix><strong>9.3.</strong></a>
- <li>range, <a href="#range" title=range><strong>8.5.</strong></a>
+ <li>range, <a href="#range" title=range><strong>9.5.</strong></a>
<li>simp-chinese-formal, <a href="#simp-chinese-formal"
- title=simp-chinese-formal><strong>7.3.2.</strong></a>
+ title=simp-chinese-formal><strong>8.3.2.</strong></a>
<li>simp-chinese-informal, <a href="#simp-chinese-informal"
- title=simp-chinese-informal><strong>7.3.2.</strong></a>
+ title=simp-chinese-informal><strong>8.3.2.</strong></a>
<li><string>, <a href="#ltstring"
title="<string>"><strong>3.</strong></a>
- <li>suffix, <a href="#suffix0" title=suffix><strong>8.4.</strong></a>
+ <li>suffix, <a href="#suffix0" title=suffix><strong>9.4.</strong></a>
<li>trad-chinese-formal, <a href="#trad-chinese-formal"
- title=trad-chinese-formal><strong>7.3.2.</strong></a>
+ title=trad-chinese-formal><strong>8.3.2.</strong></a>
<li>trad-chinese-informal, <a href="#trad-chinese-informal"
- title=trad-chinese-informal><strong>7.3.2.</strong></a>
+ title=trad-chinese-informal><strong>8.3.2.</strong></a>
- <li>type, <a href="#type" title=type><strong>8.1.</strong></a>
+ <li>type, <a href="#type" title=type><strong>9.1.</strong></a>
</ul>
<!--end-index-->
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-lists/Overview.src.html,v
retrieving revision 1.76
retrieving revision 1.77
diff -u -d -r1.76 -r1.77
--- Overview.src.html 28 Apr 2011 00:11:07 -0000 1.76
+++ Overview.src.html 28 Apr 2011 01:35:24 -0000 1.77
@@ -169,7 +169,7 @@
<td><dfn>list-style-type</dfn>
<tr>
<th>Value:
- <td><b><string></b> | <b><counter-style></b> | none
+ <td><b><string></b> | <b><counter-style></b> | inline | none
<tr>
<th>Initial:
<td>disc
@@ -199,11 +199,6 @@
<dd>The ''::marker'' pseudoelement must use the provided string as its default
contents.</dd>
- <dt><dfn>none</dfn></dt>
- <dd>The ''::marker'' pseudoelement must have no default contents. This will
- suppress the creation of a marker unless the ''::marker'' has its contents
- specified directly through the 'content' property.</dd>
-
<dt><dfn><counter-style></dfn></dt>
<dd>
<p>The ''::marker'' pseudoelement's default contents must be the value of
@@ -214,6 +209,15 @@
of counter style definitions, and authors or users may define their own
counter styles as well.</p>
</dd>
+
+ <dt><dfn>inline</dfn></dt>
+ <dd>The ''::marker'' pseudoelement's default contents must be the contents
+ of the list item's first child element with ''display: marker''.</dd>
+
+ <dt><dfn>none</dfn></dt>
+ <dd>The ''::marker'' pseudoelement must have no default contents. This will
+ suppress the creation of a marker unless the ''::marker'' has its contents
+ specified directly through the 'content' property.</dd>
</dl>
<table class="propdef">
@@ -629,22 +633,31 @@
<h3 id='content-property'>
Generating the computed value of the 'content' property</h3>
- <p>If a ''::marker'' pseudo-element has its 'content' property set to ''normal'', the
- following algorithm should be used to generate the computed value of the property.</p>
+ <p>If a ''::marker'' pseudo-element has its 'content' property set to ''normal'',
+ the computed value of the marker's 'content' property must be constructed
+ according to the following algorithm:</p>
<ol>
- <li>If the computed value of 'list-style-image' is not ''none'', and if the
- image is valid, then the computed value of the 'content' property is the value
- of the 'list-style-image' property.</li>
+ <li>If the computed value of 'list-style-image' is a valid image, then
+ the computed value of the 'content' property is the value of the
+ 'list-style-image' property.</li>
<li>Otherwise, if the computed value of 'list-style-type' is a string, then
the computed value of the 'content' property is that string.</li>
- <li>Otherwise, if the computed value of 'list-style-type' is not ''none'', then
- the computed value of the 'content' property is ''counter(list-item, <b><counter-style></b>)'',
- where <b><counter-style></b> is the computed value of the 'list-style-type'
- property, followed by a string that is the suffix for the counter style in question
- (which may be empty).</li>
+ <li>Otherwise, if the computed value of 'list-style-type' is the keyword
+ ''inline'', and the list item has a child element which is an
+ <i title='inline-marker-candidate'>inline marker candidate</i>, the
+ computed value of the 'content' property is the textual contents of the
+ list item's first <i title='inline-marker-candidate'>inline marker candidate
+ child</i>.</li>
+
+ <li>Otherwise, if the computed value of 'list-style-type' is the name
+ of a counter style, then the computed value of the 'content' property
+ is ''counter(list-item, <i><counter-style></i>)'', where
+ <i><counter-style></i> is the computed value of the 'list-style-type'
+ property, followed by a string that is the suffix for the counter style
+ in question (which may be empty). <span class=issue>Fix this.</span></li>
<li>Otherwise the computed value is ''none''.</li>
</ol>
@@ -664,7 +677,45 @@
<pre>counter(list-item, decimal) "."</pre>
</div>
-<!-- ====================================================================== -->
+<!-- ===================================================================== -->
+
+<h2 id='display-marker'>
+Using Content as Markers: the ''marker'' value for 'display'</h2>
+
+ <p>In some situations, such as legal proceedings or official minutes, the
+ precise form that the list marker takes is a vital part of the content. It's
+ not acceptable for the marker to change just because the UA is not rendering
+ CSS, or some server error is temporarily preventing the CSS file from being
+ loaded, as the precise marker name is used to officially refer to that segment.
+ The only way to guarantee that the marker will be rendered correctly, regardless
+ of whether CSS is applied, is to specify the marker outside of CSS, directly
+ in the document's markup. However, the page author may still want to style
+ the marker in many of the ways that are available to them when using ordinary
+ CSS-generated markers. To accomodate this, a new value for the 'display'
+ property is defined.</p>
+
+ <table class='propdef'>
+ <tr>
+ <th>Name:
+ <td><dfn>display</dfn>
+ <tr>
+ <th>New Value:
+ <td>marker
+ <tr>
+ <th>Applies to:
+ <td>Children elements of display:list-item elements
+ </table>
+
+ <p>The ''marker'' value for 'display' indicates that an element is a
+ <i title="inline-marker-candidate">candidate for having its contents used
+ as a list marker</i>. If the element is a child of a list item with
+ ''list-style-type:inline'', and none of the element's previous siblings are
+ candidates, the textual content of the element (such as what would be returned
+ by the .textContent property on the element in HTML) must be used as the
+ default contents of the ::marker pseudoelement on the element's parent.
+ Otherwise, this value must be treated identically to ''inline-block''.</p>
+
+<!-- ===================================================================== -->
<h2 id='predefined-counters'>
Predefined Counter Styles</h2>
Received on Thursday, 28 April 2011 01:35:29 UTC