- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 14 Jun 2011 19:11:02 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-lists
In directory hutz:/tmp/cvs-serv23978
Modified Files:
Overview.html Overview.src.html
Log Message:
Specified "display:inline-list-item" a bit more precisely, and used the terminology more widely.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-lists/Overview.html,v
retrieving revision 1.61
retrieving revision 1.62
diff -u -d -r1.61 -r1.62
--- Overview.html 24 May 2011 12:09:38 -0000 1.61
+++ Overview.html 14 Jun 2011 19:11:00 -0000 1.62
@@ -9,10 +9,11 @@
<style>
p { text-indent: 0 !important; margin: .5em 0; }
- code.inline { white-space: pre-line; }
+ code.inline { white-space: nowrap; }
.alphabetic-example { font-family: monospace; font-size: 90%; margin: 1em 0 1em 2em; }
.alphabetic-example > span { display: inline-block; width: 50px;}
.alphabetic-example > span > img { width: 16px; height: 16px; }
+ pre > code { white-space: pre-wrap; }
</style>
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
type="text/css">
@@ -24,12 +25,12 @@
<h1>CSS Lists and Counters Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 24 May 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 June 2011</h2>
<dl>
<dt>This version:
- <dd><!--<a href="http://www.w3.org/TR/2011/WD-css3-lists-20110524">http://www.w3.org/TR/2011/WD-css3-lists-20110524</a></dd>-->
+ <dd><!--<a href="http://www.w3.org/TR/2011/WD-css3-lists-20110614">http://www.w3.org/TR/2011/WD-css3-lists-20110614</a></dd>-->
<a
href="http://dev.w3.org/csswg/css3-lists/">http://dev.w3.org/csswg/css3-lists/</a>
@@ -102,8 +103,8 @@
on CSS level 1 <a href="#CSS1"
rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>. The main extensions compared to
level 2 are a pseudo-element representing the list marker, a new
- ‘<a href="#hanging"><code class=css>hanging</code></a>’ value
- for ‘<a href="#list-style-position"><code
+ ‘<code class=css>hanging</code>’ value for ‘<a
+ href="#list-style-position"><code
class=property>list-style-position</code></a>’, and a method for
authors to define their own list-styles.
@@ -172,9 +173,9 @@
class=property>content</code>’ property</a>
</ul>
- <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="#display-marker"><span class=secno>7. </span> Positioning
+ Markers: the ‘<code class=css>marker</code>’ value for
+ ‘<code class=property>position</code>’</a>
<li><a href="#counter-style"><span class=secno>8. </span> Defining Custom
Counter Styles: the ‘<code class=css>@counter-style</code>’
@@ -360,12 +361,15 @@
<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
- ‘<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
- element to increment the list item counter ‘<code
+ <p>To declare a <dfn id=list-item>list item</dfn>, the ‘<code
+ class=property>display</code>’ property must be set to ‘<code
+ class=css>list-item</code>’ or ‘<a
+ href="#inline-list-item"><code
+ class=css>inline-list-item</code></a>’ (defined later in this
+ section). This, in addition to generating a ‘<code
+ class=css>::marker</code>’ pseudo-element and enabling the
+ properties described below for that element, causes that element to
+ increment the list item counter ‘<code
class=css>list-item</code>’. (This does not affect the specified or
computed values of the counter properties.)
@@ -376,14 +380,62 @@
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
- class=css>list-item</code>’ counter.
+ <table class=propdef>
+ <tbody>
+ <tr>
+ <th>Property:
- <p>Note that this new model makes the ‘<code
- class=css>marker</code>’ display type redundant. That display type
- is therefore obsolete in the CSS3 Lists model.</p>
+ <td>‘<code class=property>display</code>’
+
+ <tr>
+ <th>New Value:
+
+ <td><dfn id=inline-list-item>inline-list-item</dfn>
+
+ <tr>
+ <th>Initial:
+
+ <td>same as CSS2.1
+
+ <tr>
+ <th>Applies to:
+
+ <td>same as CSS2.1
+
+ <tr>
+ <th>Inherited:
+
+ <td>same as CSS2.1
+
+ <tr>
+ <th>Percentages:
+
+ <td>same as CSS2.1
+
+ <tr>
+ <th>Media:
+
+ <td>same as CSS2.1
+
+ <tr>
+ <th>Computed value:
+
+ <td>same as CSS2.1
+ </table>
+
+ <p>The ‘<a href="#inline-list-item"><code
+ class=css>inline-list-item</code></a>’ display value makes the
+ element a list item, which means it can generate a ::marker
+ pseudo-element. The element also affects the predefined ‘<code
+ class=css>list-item</code>’ counter, as specified above. Otherwise,
+ this display value is treated identically to ‘<a
+ href="#inline"><code class=css>inline</code></a>’.
+
+ <p class=note>This display value is silly, and only necessary because we
+ haven't yet defined ‘<code class=property>display</code>’ to
+ be split into subproperties. When that happens, "being a list item" will
+ just be a property value that can apply to block, inline, and other
+ elements.</p>
<!-- ====================================================================== -->
<h2 id=marker-content><span class=secno>3. </span> Marker Content: The
@@ -413,8 +465,7 @@
<tr>
<th>Applies To:
- <td>all elements with ‘<code class=css>display:
- list-item</code>’
+ <td><a href="#list-item"><i title="list item">list items</i></a>
<tr>
<th>Inherited:
@@ -469,9 +520,8 @@
<dd>The ‘<code class=css>::marker</code>’ pseudoelement's
default contents must be the textual contents of the list item's first
- child that is an <a href="#inline-marker-candidate"><i
- title=inline-marker-candidate>inline marker candidate</i></a>, if one
- exists.
+ child that is an <i title=inline-marker-candidate>inline marker
+ candidate</i>, if one exists.
<dt><dfn id=none>none</dfn>
@@ -502,8 +552,7 @@
<tr>
<th>Applies To:
- <td>all elements with ‘<code class=css>display:
- list-item</code>’
+ <td><a href="#list-item"><i title="list item">list items</i></a>
<tr>
<th>Inherited:
@@ -560,7 +609,7 @@
<tr>
<th>Value:
- <td>inside | hanging | outside
+ <td>inside | outside
<tr>
<th>Initial:
@@ -570,8 +619,7 @@
<tr>
<th>Applies To:
- <td>all elements with ‘<code class=css>display:
- list-item</code>’
+ <td><a href="#list-item"><i title="list item">list items</i></a>
<tr>
<th>Inherited:
@@ -595,53 +643,45 @@
</table>
<p>This property specifies the position of the ‘<code
- class=css>::marker</code>’ pseudo-element's box in the list item.
- Values have the following meanings:
+ class=css>::marker</code>’ pseudo-element's box in the <a
+ href="#list-item"><i>list item</i></a>. Values have the following
+ meanings:
<dl>
<dt><dfn id=inside>inside</dfn>
- <dd>The ‘<code class=css>::marker</code>’ pseudo-element is an
- inline-block element placed immediately before the ‘<code
- class=css>::before</code>’ pseudo-element in the list item's
- principle box, after which the element's content flows. Note that if
- there is no inline content, this will create a line box, just as content
- in an inline ‘<code class=css>::before</code>’ pseudo-element
- would. Also note that all the properties that apply to inline elements
- apply to the ‘<code class=css>::marker</code>’ pseudo-element
- in this state, and this ‘<code class=css>::marker</code>’ box
+ <dd>The ‘<code class=css>::marker</code>’ pseudo-element is a
+ ‘<code class=css>display:inline</code>’ element placed
+ immediately before the ‘<code class=css>::before</code>’
+ pseudo-element in the <a href="#list-item"><i>list
+ item</i></a>‘<code class=css>s principle box, after which the
+ element</code>’s content flows. Note that if there is no inline
+ content, this will create a line box, just as content in an inline
+ ‘<code class=css>::before</code>’ pseudo-element would. Also
+ note that all the properties that apply to inline elements apply to the
+ ‘<code class=css>::marker</code>’ pseudo-element in this
+ state, and this ‘<code class=css>::marker</code>’ box
participates in the inline box model in the normal manner.
<p class=issue>Inline markers have some special behavior wrt white-space
collapsing at the beginning of the list-item. Is this behavior necessary
- for web-compat, or can I just spec it away? (Since I have hanging and
- outside markers be abspos, it doesn't apply to them.)
+ for web-compat, or can I just spec it away? (Since I have outside
+ markers basically be abspos, it doesn't apply to them.)
- <dt><dfn id=hanging>hanging</dfn>
+ <dt><dfn id=outside>outside</dfn>
- <dd>As ‘<a href="#inside"><code
- class=property>inside</code></a>’, except the marker is instead
- placed immediately before the first text or significant whitespace in the
- list item or its children. The marker is then absolutely positioned
- (leaving behind a placeholder, per the Positioned Layout spec), with the
- static position such that the "end" edge of the marker is against the
- "start" edge of the placeholder, and the baseline of the marker is
- aligned with the placeholder.
+ <dd>As ‘<a href="#inside"><code class=css>inside</code></a>’,
+ except the ::marker pseudo-element is placed immediately before the first
+ text or significant whitespace in the <a href="#list-item"><i>list
+ item</i></a> or its descendants. As well, the computed value of
+ ‘<code class=property>position</code>’ on the ::marker
+ pseudo-element is ‘<code class=css>marker</code>’. The
+ section on the new ‘<code class=property>marker</code>’ value
+ for ‘<code class=property>position</code>’ explains the
+ consequences of this.
<p class=issue>I haven't yet defined what happens when the list item
doesn't contain any text, or when the first text is within a child
list-item. I need to figure out how much of current implementations is
accidental and how much is necessary.
-
- <dt><dfn id=outside>outside</dfn>
-
- <dd>As ‘<a href="#hanging"><code
- class=css>hanging</code></a>’, except the horizontal static
- position of the marker is such that the marker's "end" edge is placed
- against the "start" edge of the list item's parent. <span class=note>The
- ‘<a href="#outside"><code class=css>outside</code></a>’ value
- has additional implications for the marker, described in the <a
- href="#marker-pseudoelement">Marker section</a>.</span>
- <p class=issue>The same problems with ‘<a href="#hanging"><code
- class=property>hanging</code></a>’ apply here.
</dl>
<p>Note that a marker is only generated if the computed value of the
@@ -865,15 +905,15 @@
<p>Just like other generated content, markers generate a box when they're
created, which has margins, border, padding, and everything else a box
normally has. Markers are placed at the beginning of their superior
- parent's content, immediately before a ‘<code
- class=css>::before</code>’ pseudo-element on the same superior
- parent. Marker boxes are inline-block by default, and so a value of
- ‘<code class=css>auto</code>’ for ‘<code
- class=property>width</code>’ resolves to the width of the marker's
- content. The value of ‘<a href="#list-style-position"><code
- class=property>list-style-position</code></a>’ on the marker's
- superior parent can vary the marker's directionality and the initial value
- of its ‘<code class=css>position</code>’ property.
+ parent's content (the exact location depends on the value of ‘<a
+ href="#list-style-position"><code
+ class=property>list-style-position</code></a>’ on the list item, as
+ explained in the definition of that property). Marker boxes are inline by
+ default, though certain values for ‘<a
+ href="#list-style-position"><code
+ class=property>list-style-position</code></a>’ on the list item can
+ make the marker box positioned, which can have an effect on the computed
+ value of display.
<div class=html-example>
<p>In the following example, the content is centered within a marker box
@@ -1033,17 +1073,6 @@
<li>Otherwise, if the computed value of ‘<a
href="#list-style-type"><code
- 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 <a
- href="#inline-marker-candidate"><i title=inline-marker-candidate>inline
- marker candidate</i></a>, the computed value of the ‘<code
- class=property>content</code>’ property is the textual contents of
- the list item's first <a href="#inline-marker-candidate"><i
- title=inline-marker-candidate>inline marker candidate child</i></a>.
-
- <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
@@ -1083,29 +1112,37 @@
</div>
<!-- ===================================================================== -->
- <h2 id=display-marker><span class=secno>7. </span> Using Content as
- Markers: the ‘<code class=css>marker</code>’ value for
- ‘<code class=property>display</code>’</h2>
+ <h2 id=display-marker><span class=secno>7. </span> Positioning Markers: the
+ ‘<code class=css>marker</code>’ value for ‘<code
+ class=property>position</code>’</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 ‘<code
- class=property>display</code>’ property is defined.
+ <p>This section introduces a new positioning scheme, designed to model the
+ way in which "outside" list markers were traditionally positioned in CSS
+ 2.1. Outside list markers now have their positioning defined in terms of
+ this new value.
+
+ <p>The new positioning scheme defined in this section can be used on all
+ elements, not just ::marker pseudo-elements. 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 (from a custom-defined marker to a default bullet or
+ alpha marker) just because the UA is not rendering CSS, or a server error
+ is temporarily preventing the CSS file from being loaded, as the precise
+ form of the marker 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, the new positioning
+ scheme can be used to position the marker-in-content as if it were an
+ ordinary CSS-generated marker.
<table class=propdef>
<tbody>
<tr>
<th>Property:
- <td>‘<code class=property>display</code>’
+ <td>‘<code class=property>position</code>’
<tr>
<th>New Value:
@@ -1138,22 +1175,54 @@
<td>same as CSS2.1
<tr>
- <th>Computed value:
+ <th>Computed value:
<td>same as CSS2.1
</table>
- <p>The <dfn id=marker>‘<code class=css>marker</code>’</dfn>
- value for ‘<code class=property>display</code>’ indicates that
- an element is an <dfn id=inline-marker-candidate
- title=inline-marker-candidate>inline marker candidate</dfn>. 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 inline marker 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
- pseudo-element on the element's parent. Otherwise, this value must be
- treated identically to ‘<code class=css>inline-block</code>’.</p>
+ <p>The ‘<code class=css>marker</code>’ value for ‘<code
+ class=property>position</code>’ depends on the box it is set on
+ having a list item ancestor. If there is no list item ancestor, this value
+ must be treated identically to ‘<code
+ class=css>position:relative</code>’.
+
+ <p>The box's vertical position is calculated according to the <a
+ href="http://www.w3.org/TR/CSS21/visuren.html#normal-flow">normal
+ flow</a>. <span class=note>In the Positioned Layout Module this will be
+ defined more precisely in terms of placeholders.</span>
+
+ <p>To calculate the box's horizontal position, first define the box's
+ nearest list item ancestor as the <dfn id=ancestor-list-item>ancestor list
+ item</dfn>, and the parent of that box as the <dfn
+ id=ancestor-list-container>ancestor list container</dfn>. The box's
+ horizontal position must then be set such that the edge of the box
+ corresponding to the "end" edge of the <a
+ href="#ancestor-list-container"><i>ancestor list container</i></a> is
+ flush with the edge of the <a href="#ancestor-list-item"><i>ancestor list
+ item</i></a> corresponding to the "start" edge of the <a
+ href="#ancestor-list-container"><i>ancestor list container</i></a>. <span
+ class=note>The purpose of this somewhat convoluted definition is to
+ position the marker flush against its list item, and to keep all the
+ markers for a given list on the same side of their list items even in
+ mixed-direction text, so that authors can specify padding on only one side
+ and still ensure their markers are visible.</span>
+
+ <p class=issue>This handles ltr/rtl mixed-direction text, but not mixed
+ horizontal and vertical text. For example, if the <a
+ href="#ancestor-list-container"><i>ancestor list container</i></a> is
+ vertical but the <a href="#ancestor-list-item"><i>ancestor list
+ item</i></a> is horizontal, this definition is nonsensical, as it requires
+ a vertical edge of the marker to be flush against a horizontal edge of the
+ <a href="#ancestor-list-item"><i>ancestor list item</i></a>. Need to think
+ on what UI would be acceptable for such a crazy case, and how to state it
+ in non-crazy terms.
+
+ <p>The ‘<code class=property>top</code>’, ‘<code
+ class=property>right</code>’, ‘<code
+ class=property>bottom</code>’, and ‘<code
+ class=property>left</code>’ properties specify offsets relative to
+ the top, right, bottom, and left edges (respectively) of the box itself,
+ similar to how relative positioning works.</p>
<!-- ===================================================================== -->
<h2 id=counter-style><span class=secno>8. </span> Defining Custom Counter
@@ -1329,10 +1398,10 @@
href="#counter-glyph"><i>counter glyph</i></a> (if it exists) is used as
the representation of the value 2, etc.
- <p>In general, if there are <var>N</var> <i>counter glyphs</i> and a
- representation is being constructed for the value <var>I</var>, the
+ <p>In general, if there are <var>length</var> <i>counter glyphs</i> and a
+ representation is being constructed for the value <var>value</var>, the
representation is the <a href="#counter-glyph"><i>counter glyph</i></a> at
- index (<var>I</var> mod <var>N</var>) of the list of <a
+ index (<var>value</var> mod <var>length</var>) of the list of <a
href="#counter-glyph"><i>counter glyph</i></a>s (0-indexed).
<div class=example>
@@ -1369,29 +1438,29 @@
href="#decimal"><code class=css>decimal</code></a>’ counter style.
The first <a href="#counter-glyph"><i>counter glyph</i></a> in the list is
interpreted as the digit 0, the second as the digit 1, and so on. If there
- are <var>N</var> <a href="#counter-glyph"><i>counter glyph</i></a>s, the
- representation is a base <var>N</var> number using the <a
+ are <var>length</var> <a href="#counter-glyph"><i>counter glyph</i></a>s,
+ the representation is a base <var>length</var> number using the <a
href="#counter-glyph"><i>counter glyph</i></a>s as digits.
<p>To construct the representation, run the following algorithm. Let
- <var>N</var> be the length of the list of <i>counter glyphs</i>,
- <var>I</var> initially be the counter value, <var>S</var> initially be the
- empty string, <a href="#descdef-negative"><var>negative</var></a> be a
+ <var>length</var> be the length of the list of <i>counter glyphs</i>,
+ <var>value</var> initially be the counter value, <var>S</var> initially be
+ the empty string, <a href="#descdef-negative"><var>negative</var></a> be a
boolean flag that is initially false, and <var>glyph(n)</var> be the nth
<a href="#counter-glyph"><i>counter glyph</i></a> in the list of <a
href="#counter-glyph"><i>counter glyph</i></a>s (0-indexed).
<ol>
- <li>If <var>I</var> is 0, append <var>glyph(0)</var> to <var>S</var> and
- return <var>S</var>.
+ <li>If <var>value</var> is 0, append <var>glyph(0)</var> to <var>S</var>
+ and return <var>S</var>.
- <li>While <var>I</var> is not equal to 0:
+ <li>While <var>value</var> is not equal to 0:
<ol>
- <li>Prepend <var>glyph( <var>I</var> mod <var>N</var> )</var> to
- <var>S</var>.
+ <li>Prepend <var>glyph( <var>value</var> mod <var>length</var> )</var>
+ to <var>S</var>.
- <li>Set <var>I</var> to <code>floor( <var>I</var> / <var>N</var>
- )</code>.
+ <li>Set <var>value</var> to <code>floor( <var>value</var> /
+ <var>length</var> )</code>.
</ol>
<li>Return <var>S</var>.
@@ -1435,28 +1504,29 @@
appear in many spreadsheet programs to number columns. The first <a
href="#counter-glyph"><i>counter glyph</i></a> in the list is interpreted
as the digit 1, the second as the digit 2, and so on. If there are
- <var>N</var> <a href="#counter-glyph"><i>counter glyph</i></a>s, the
- representation is a base <var>N</var> alphabetic number using the <a
+ <var>length</var> <a href="#counter-glyph"><i>counter glyph</i></a>s, the
+ representation is a base <var>length</var> alphabetic number using the <a
href="#counter-glyph"><i>counter glyph</i></a>s as digits. Alphabetic
numbering systems do not contain a digit representing 0.
<p>To construct the representation, run the following algorithm. Let
- <var>N</var> be the length of the list of <a
- href="#counter-glyph"><i>counter glyph</i></a>s, <var>I</var> initially be
- the counter value, <var>S</var> initially be the empty string, and
- <var>glyph(n)</var> be the nth <a href="#counter-glyph"><i>counter
- glyph</i></a> in the list of <a href="#counter-glyph"><i>counter
- glyph</i></a>s (0-indexed).
+ <var>length</var> be the length of the list of <a
+ href="#counter-glyph"><i>counter glyph</i></a>s, <var>value</var>
+ initially be the counter value, <var>S</var> initially be the empty
+ string, and <var>glyph(n)</var> be the nth <a
+ href="#counter-glyph"><i>counter glyph</i></a> in the list of <a
+ href="#counter-glyph"><i>counter glyph</i></a>s (0-indexed).
- <p>While <var>I</var> is not equal to 0:
+ <p>While <var>value</var> is not equal to 0:
<ol>
- <li>Set <var>I</var> to <code><var>I</var> - 1</code>.
+ <li>Set <var>value</var> to <code><var>value</var> - 1</code>.
- <li>Prepend <var>glyph( <var>I</var> mod <var>N</var> )</var> to
+ <li>Prepend <var>glyph( <var>value</var> mod <var>length</var> )</var> to
<var>S</var>.
- <li>Set <var>I</var> to <code>floor( <var>I</var> / <var>N</var> )</code>.
+ <li>Set <var>value</var> to <code>floor( <var>value</var> /
+ <var>length</var> )</code>.
</ol>
<p>Finally, return <var>S</var>.
@@ -1541,35 +1611,58 @@
lists for a slightly different presentation than what the ‘<code
class=css>alphabetic</code>’ type presents.
- <p>To construct the representation, let <var>N</var> be the length of the
- list of <a href="#counter-glyph"><i>counter glyph</i></a>s, <var>I</var>
+ <p>To construct the representation, run the following algorithm. Let
+ <var>length</var> be the length of the list of <a
+ href="#counter-glyph"><i>counter glyph</i></a>s, <var>value</var>
initially be the counter value, <var>S</var> initially be the empty
- string, and <code>glyph(n)</code> be the nth <a
+ string, and <var>glyph(n)</var> be the nth <a
href="#counter-glyph"><i>counter glyph</i></a> in the list of <a
- href="#counter-glyph"><i>counter glyph</i></a>s (0-indexed). Append <code
- class=inline>glyph( <var>I</var> mod <var>N</var> )</code> to <var>S</var>
- <code class=inline>floor( (<var>I</var> - 1) / <var>N</var> )</code>
- times, then return <var>S</var>.
+ href="#counter-glyph"><i>counter glyph</i></a>s (0-indexed).
+
+ <ol>
+ <li>Let the <var>chosen glyph</var> be <code
+ class=inline>glyph(<var>value</var> mod <var>length</var>)</code>.
+
+ <li>Let the <var>representation length</var> be <code class=inline>floor(
+ (<var>value</var> - 1) / <var>length</var> )</code>.
+
+ <li>Append the <var>chosen glyph</var> to <var>S</var> a number of times
+ equal to the <var>representation length</var>.
+ </ol>
+
+ <p>Finally, return <var>S</var>.
<div class=example>
<p>An "unary" counter style can be defined as:</p>
<pre>
-@counter-style <dfn id=unary>unary</dfn> {
+@counter-style <dfn id=upper-alpha-symbolic>upper-alpha-symbolic</dfn> {
type: symbolic;
- glyphs: '|';
+ glyphs: 'A' 'B' 'C' 'D' 'E' 'F' 'G' 'H' 'I' 'J' 'K' 'L' 'M' 'N' 'O' 'P' 'Q' 'R' 'S' 'T' 'U' 'V' 'W' 'X' 'Y' 'Z';
}
</pre>
<p>It will then produce lists that look like:</p>
<pre>
-|. One
-||. Two
-|||. Three
-||||. Five
-|||||. Six
+A. One
+B. Two
+...
+Z. Twenty-six
+AA. Twenty-seven
+BB. Twenty-eight
+...
+ZZ. Fifty-two
+AAA. Fifty-three
+BBB. Fifty-four
</pre>
+
+ <p class=note>Note the difference between this and the alphabetic
+ <i>‘<a href="#upper-alpha"><code
+ class=property>upper-alpha</code></a>’</i> style. The alphabetic
+ style is identical through 27, but then continues with "AB, AC, AD...",
+ and then at 53 begins "BA, BB, BC...", etc. It doesn't reach three digits
+ until 703.</p>
</div>
<p>The ‘<code class=css>symbolic</code>’ type will produce
@@ -1648,18 +1741,18 @@
represent the numbering system of several languages which use different
characters for the digits in differnt positions.
- <p>To construct the representation, run this algorithm. let <var>I</var>
- initially be the counter value, <var>S</var> initially be the empty
- string, and <var>glyph list</var> initially be the list of <a
+ <p>To construct the representation, run this algorithm. let
+ <var>value</var> initially be the counter value, <var>S</var> initially be
+ the empty string, and <var>glyph list</var> initially be the list of <a
href="#additive-tuple"><i>additive tuple</i></a>s.
- <p>If <var>I</var> is initially 0, and there is an <a
+ <p>If <var>value</var> is initially 0, and there is an <a
href="#additive-tuple"><i>additive tuple</i></a> with a weight of 0,
append that tuple's <a href="#counter-glyph"><i>counter glyph</i></a> to S
and return S.
- <p>Otherwise, while <var>I</var> is greater than 0 and there are elements
- left in the <var>glyph list</var>:
+ <p>Otherwise, while <var>value</var> is greater than 0 and there are
+ elements left in the <var>glyph list</var>:
<ol>
<li>Pop the first <a href="#additive-tuple"><i>additive tuple</i></a> from
@@ -1668,14 +1761,20 @@
<li>Append the <a href="#current-tuple"><i>current
tuple</i></a>‘<code class=css>s <a href="#counter-glyph"><i>counter
- glyph</i></a> to <var>S</var> <code>floor( <var>I</var> / <a
+ glyph</i></a> to <var>S</var> <code>floor( <var>value</var> / <a
href="#current-tuple"><var><i>current tuple</i></var></a></code>’s
weight )</code> times (this may be 0).
+
+ <li>Decrement <var>value</var> by the <var><a
+ href="#current-tuple"><i>current tuple</i></a>‘<code class=css>s
+ weight multiplied by the number of times the <a
+ href="#current-tuple"><i>current tuple</i></a> was appended to
+ <var>S</var> in the previous step.</code></var>
</ol>
- <p>If the loop ended because <var>I</var> is 0, return S. Otherwise, the
- given counter value cannot be represented by this counter style, and must
- instead be represented by the fallback counter style.
+ <p>If the loop ended because <var>value</var> is 0, return S. Otherwise,
+ the given counter value cannot be represented by this counter style, and
+ must instead be represented by the fallback counter style.
<div class=example>
<p>A "dice" counter style can be defined as:</p>
@@ -1683,10 +1782,10 @@
<pre>
@counter-style <dfn id=dice>dice</dfn> {
type: additive;
- additive-glyphs: 6 '⚅', 5 '⚄', 4 '⚃', 3 '⚂', 2 '⚁', 1 '⚀';
- suffix: '';
+ additive-glyphs: 6 ’⚅‘<code class=css>, 5 </code>’⚄‘<code class=css>, 4 </code>’⚃‘<code class=css>, 3 </code>’⚂‘<code class=css>, 2 </code>’⚁‘<code class=css>, 1 </code>’⚀‘<code class=css>;
+ suffix: </code>’‘<code class=css>;
}
- </pre>
+ </code></pre>
<p>It will then produce lists that look like:</p>
@@ -1701,13 +1800,15 @@
</pre>
</div>
- <p>The ‘<code class=css>additive</code>’ type will produce
- representations with sizes that are linear in the magnitude of the counter
- value. This can potentially be abused to generate excessively large
- representations and consume undue amounts of the user's memory or even
- hang their browser. User agents must support representations at least 20
- characters long, but they may choose to instead use the fallback style for
- representations that would be longer than 20 characters.
+ <p>The ’‘<code
+ class=property>additive</code>’‘<code class=css> type will
+ produce representations with sizes that are linear in the magnitude of the
+ counter value. This can potentially be abused to generate excessively
+ large representations and consume undue amounts of the user</code>’s
+ memory or even hang their browser. User agents must support
+ representations at least 20 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>
@@ -2652,14 +2753,14 @@
Symbolic Styles</h3>
<pre class=css><code><bdo dir=ltr>
-@counter-style <dfn id=asterisks>asterisks</dfn> {
+@counter-style <dfn id=asterisk>asterisk</dfn> {
type: symbolic;
glyphs: '\2A';
/* '*' */
suffix: '';
}
-@counter-style <dfn id=footnotes>footnotes</dfn> {
+@counter-style <dfn id=footnote>footnote</dfn> {
type: symbolic;
glyphs: '\2A' '\2051' '\2020' '\2021';
/* '*' '⁑' '†' '‡' */
@@ -2672,7 +2773,7 @@
/* 'a' 'b' 'c' 'd' 'e' 'f' 'g' 'h' 'i' 'j' 'k' 'l' 'm' 'n' 'o' 'p' 'q' 'r' 's' 't' 'u' 'v' 'w' 'x' 'y' 'z' */
}
-@counter-style <dfn id=upper-alpha-symbolic>upper-alpha-symbolic</dfn> {
+@counter-style <dfn id=upper-alpha-symbolic0>upper-alpha-symbolic</dfn> {
type: symbolic;
glyphs: '\41' '\42' '\43' '\44' '\45' '\46' '\47' '\48' '\49' '\4A' '\4B' '\4C' '\4D' '\4E' '\4F' '\50' '\51' '\52' '\53' '\54' '\55' '\56' '\57' '\58' '\59' '\5A';
/* 'A' 'B' 'C' 'D' 'E' 'F' 'G' 'H' 'I' 'J' 'K' 'L' 'M' 'N' 'O' 'P' 'Q' 'R' 'S' 'T' 'U' 'V' 'W' 'X' 'Y' 'Z' */
@@ -3715,7 +3816,7 @@
<td>萬 U+842C
<tr>
- <th scope=row>Second Group Marker
+ <th scope=row>Third Group Marker
<td>亿 U+4EBF
@@ -3726,7 +3827,7 @@
<td>億 U+5104
<tr>
- <th scope=row>Second Group Marker
+ <th scope=row>Fourth Group Marker
<td>万亿 U+4E07 U+4EBF
@@ -4231,10 +4332,10 @@
<dt id=CSS21>[CSS21]
<dd>Bert Bos; et al. <a
- href="http://www.w3.org/TR/2009/CR-CSS2-20090423"><cite>Cascading Style
- Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 23
- April 2009. W3C Candidate Recommendation. (Work in progress.) URL: <a
- href="http://www.w3.org/TR/2009/CR-CSS2-20090423">http://www.w3.org/TR/2009/CR-CSS2-20090423</a>
+ href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
+ Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
+ 2011. W3C Recommendation. URL: <a
+ href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
</dd>
<!---->
</dl>
@@ -4305,7 +4406,7 @@
<td>none
- <td>all elements with ‘display: list-item’
+ <td>list items
<td>yes
@@ -4317,11 +4418,11 @@
<td><a class=property
href="#list-style-position">list-style-position</a>
- <td>inside | hanging | outside
+ <td>inside | outside
<td>outside
- <td>all elements with ‘display: list-item’
+ <td>list items
<td>yes
@@ -4336,7 +4437,7 @@
<td>disc
- <td>all elements with ‘display: list-item’
+ <td>list items
<td>yes
@@ -4347,6 +4448,21 @@
<tr>
<td><span class=property>‘display’</span>
+ <td>inline-list-item
+
+ <td>same as CSS2.1
+
+ <td>same as CSS2.1
+
+ <td>same as CSS2.1
+
+ <td>same as CSS2.1
+
+ <td>same as CSS2.1
+
+ <tr>
+ <td><span class=property>‘position’</span>
+
<td>‘marker’
<td>same as CSS2.1
@@ -4375,6 +4491,12 @@
<li>agaw, <a href="#agaw" title=agaw><strong>9.3.</strong></a>
+ <li>ancestor list container, <a href="#ancestor-list-container"
+ title="ancestor list container"><strong>7.</strong></a>
+
+ <li>ancestor list item, <a href="#ancestor-list-item" title="ancestor list
+ item"><strong>7.</strong></a>
+
<li>ancient-tamil, <a href="#ancient-tamil"
title=ancient-tamil><strong>9.6.</strong></a>
@@ -4386,8 +4508,8 @@
<li>armenian, <a href="#armenian" title=armenian><strong>9.6.</strong></a>
- <li>asterisks, <a href="#asterisks"
- title=asterisks><strong>9.4.</strong></a>
+ <li>asterisk, <a href="#asterisk" title=asterisk><strong>9.4.</strong></a>
+
<li>bengali, <a href="#bengali" title=bengali><strong>9.2.</strong></a>
@@ -4508,8 +4630,8 @@
<li>fixed-decimal, <a href="#fixed-decimal"
title=fixed-decimal><strong>8.1.3.</strong></a>
- <li>footnotes, <a href="#footnotes"
- title=footnotes><strong>9.4.</strong></a>
+ <li>footnote, <a href="#footnote" title=footnote><strong>9.4.</strong></a>
+
<li>fullwidth-decimal, <a href="#fullwidth-decimal"
title=fullwidth-decimal><strong>9.2.</strong></a>
@@ -4548,8 +4670,6 @@
<li>hadiyya, <a href="#hadiyya" title=hadiyya><strong>9.3.</strong></a>
- <li>hanging, <a href="#hanging" title=hanging><strong>4.</strong></a>
-
<li>harari, <a href="#harari" title=harari><strong>9.3.</strong></a>
<li>hebrew, <a href="#hebrew" title=hebrew><strong>9.6.</strong></a>
@@ -4564,8 +4684,8 @@
<li>inline, <a href="#inline" title=inline><strong>3.</strong></a>
- <li>inline-marker-candidate, <a href="#inline-marker-candidate"
- title=inline-marker-candidate><strong>7.</strong></a>
+ <li>inline-list-item, <a href="#inline-list-item"
+ title=inline-list-item><strong>2.</strong></a>
<li>inside, <a href="#inside" title=inside><strong>4.</strong></a>
@@ -4628,6 +4748,9 @@
<li>lepcha, <a href="#lepcha" title=lepcha><strong>9.2.</strong></a>
+ <li>list item, <a href="#list-item" title="list
+ item"><strong>2.</strong></a>
+
<li>list-style, <a href="#list-style"
title=list-style><strong>5.</strong></a>
@@ -4690,9 +4813,6 @@
<li>marathi, <a href="#marathi" title=marathi><strong>9.2.</strong></a>
- <li>‘<code class=css>marker</code>’, <a href="#marker"
- title="''marker''"><strong>7.</strong></a>
-
<li>meen, <a href="#meen" title=meen><strong>9.3.</strong></a>
<li>mongolian, <a href="#mongolian"
@@ -4812,12 +4932,12 @@
<li>type, <a href="#descdef-type" title=type><strong>8.1.</strong></a>
- <li>unary, <a href="#unary" title=unary><strong>8.1.4.</strong></a>
-
<li>upper-alpha, <a href="#upper-alpha"
title=upper-alpha><strong>9.3.</strong></a>
<li>upper-alpha-symbolic, <a href="#upper-alpha-symbolic"
+ title=upper-alpha-symbolic><strong>8.1.4.</strong></a>, <a
+ href="#upper-alpha-symbolic0"
title=upper-alpha-symbolic><strong>9.4.</strong></a>
<li>upper-armenian, <a href="#upper-armenian"
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-lists/Overview.src.html,v
retrieving revision 1.110
retrieving revision 1.111
diff -u -d -r1.110 -r1.111
--- Overview.src.html 14 Jun 2011 18:58:26 -0000 1.110
+++ Overview.src.html 14 Jun 2011 19:11:00 -0000 1.111
@@ -140,11 +140,11 @@
<h2>
Declaring a List Item</h2>
- <p>To declare a list item, the 'display'
- property should be set to ''list-item'' or ''inline-list-item''. This, in addition to generating
- a ''::marker'' pseudo-element and enabling the
- properties described below for that element, causes that element to
- increment the list item counter ''list-item''.
+ <p>To declare a <dfn>list item</dfn>, the 'display'
+ property must be set to ''list-item'' or ''inline-list-item'' (defined
+ later in this section). This, in addition to generating a ''::marker''
+ pseudo-element and enabling the properties described below for that element,
+ causes that element to increment the list item counter ''list-item''.
(This does not affect the specified or computed values of the counter
properties.)</p>
@@ -152,12 +152,45 @@
and can be directly affected using the 'counter-increment' and ''counter-reset''
properties. It can also be used in the ''counter()'' and ''counters()'' functions.</p>
- <p class="issue">The CSS3 box module may define other 'display' values which generate a list
- marker. These should also affect the ''list-item'' counter.</p>
- <p>Note that this new model makes the ''marker''
- display type redundant. That display type is therefore obsolete in the
- CSS3 Lists model.</p>
+ <table class="propdef">
+ <tbody>
+ <tr>
+ <th>Property:
+ <td>'display'
+ <tr>
+ <th>New Value:
+ <td><dfn>inline-list-item</dfn>
+ <tr>
+ <th>Initial:
+ <td>same as CSS2.1
+ <tr>
+ <th>Applies to:
+ <td>same as CSS2.1
+ <tr>
+ <th>Inherited:
+ <td>same as CSS2.1
+ <tr>
+ <th>Percentages:
+ <td>same as CSS2.1
+ <tr>
+ <th>Media:
+ <td>same as CSS2.1
+ <tr>
+ <th>Computed value:
+ <td>same as CSS2.1
+ </tbody>
+ </table>
+
+ <p>The ''inline-list-item'' display value makes the element a list item,
+ which means it can generate a ::marker pseudo-element. The element also
+ affects the predefined ''list-item'' counter, as specified above. Otherwise,
+ this display value is treated identically to ''inline''.</p>
+
+ <p class='note'>This display value is silly, and only necessary because we
+ haven't yet defined 'display' to be split into subproperties. When that
+ happens, "being a list item" will just be a property value that can apply
+ to block, inline, and other elements.</p>
<!-- ====================================================================== -->
@@ -176,7 +209,7 @@
<td>disc
<tr>
<th>Applies To:
- <td>all elements with ''display: list-item''
+ <td><i title="list item">list items</i>
<tr>
<th>Inherited:
<td>yes
@@ -237,7 +270,7 @@
<td>none
<tr>
<th>Applies To:
- <td>all elements with ''display: list-item''
+ <td><i title="list item">list items</i>
<tr>
<th>Inherited:
<td>yes
@@ -282,7 +315,7 @@
<td>outside
<tr>
<th>Applies To:
- <td>all elements with ''display: list-item''
+ <td><i title="list item">list items</i>
<tr>
<th>Inherited:
<td>yes
@@ -298,12 +331,12 @@
</table>
<p>This property specifies the position of the ''::marker'' pseudo-element's box
- in the list item. Values have the following meanings:</p>
+ in the <i>list item</i>. Values have the following meanings:</p>
<dl>
<dt><dfn>inside</dfn></dt>
<dd>The ''::marker'' pseudo-element is a 'display:inline' element placed immediately
- before the ''::before'' pseudo-element in the list item's principle box, after
+ before the ''::before'' pseudo-element in the <i>list item</i>'s principle box, after
which the element's content flows. Note that if there is no inline content,
this will create a line box, just as content in an inline ''::before'' pseudo-element
would. Also note that all the properties that apply to inline elements apply
@@ -316,10 +349,10 @@
<dt><dfn>outside</dfn></dt>
<dd>As ''inside'', except the ::marker pseudo-element is placed
- immediately before the first text or significant whitespace in the list
- item or its descendants. As well, the computed value of 'position' on
- the ::marker pseudo-element is ''marker''. The section on the new
- 'marker' value for 'position' explains the consequences of this.
+ immediately before the first text or significant whitespace in the
+ <i>list item</i> or its descendants. As well, the computed value of
+ 'position' on the ::marker pseudo-element is ''marker''. The section on
+ the new 'marker' value for 'position' explains the consequences of this.
<p class=issue>I haven't yet defined what happens when the list item doesn't contain
any text, or when the first text is within a child list-item. I need to figure out how much
of current implementations is accidental and how much is necessary.</p></dd>
Received on Tuesday, 14 June 2011 19:11:05 UTC