- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 20 Jul 2011 01:59:03 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-lists
In directory hutz:/tmp/cvs-serv13689
Modified Files:
Overview.html Overview.src.html
Log Message:
Changed -position:outside back to matching css2.1 (markers aligned to a side depending on list item's directionality), then added marker-attachment to allow switching the behavior back to what's desired for HTML lists (markers aligned to a side based on list container's directionality)
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-lists/Overview.html,v
retrieving revision 1.69
retrieving revision 1.70
diff -u -d -r1.69 -r1.70
--- Overview.html 19 Jul 2011 18:56:38 -0000 1.69
+++ Overview.html 20 Jul 2011 01:59:01 -0000 1.70
@@ -26,12 +26,12 @@
<h1>CSS Lists and Counters Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 July 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 July 2011</h2>
<dl>
<dt>This version:
- <dd><!--<a href="http://www.w3.org/TR/2011/WD-css3-lists-20110719">http://www.w3.org/TR/2011/WD-css3-lists-20110719</a></dd>-->
+ <dd><!--<a href="http://www.w3.org/TR/2011/WD-css3-lists-20110720">http://www.w3.org/TR/2011/WD-css3-lists-20110720</a></dd>-->
<a
href="http://dev.w3.org/csswg/css3-lists/">http://dev.w3.org/csswg/css3-lists/</a>
@@ -171,9 +171,17 @@
class=property>content</code>’ property</a>
</ul>
- <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="#positioning-markers"><span class=secno>7. </span>
+ Positioning Markers</a>
+ <ul class=toc>
+ <li><a href="#position-marker"><span class=secno>7.1. </span> The
+ ‘<code class=css>marker</code>’ value for ‘<code
+ class=property>position</code>’</a>
+
+ <li><a href="#marker-attachment"><span class=secno>7.2. </span> The
+ ‘<code class=property>marker-attachment</code>’
+ property</a>
+ </ul>
<li><a href="#counter-style"><span class=secno>8. </span> Defining Custom
Counter Styles: the ‘<code class=css>@counter-style</code>’
@@ -1092,9 +1100,7 @@
</div>
<!-- ===================================================================== -->
- <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>
+ <h2 id=positioning-markers><span class=secno>7. </span> Positioning Markers</h2>
<p>This section introduces a new positioning scheme, designed to model the
way in which "outside" list markers were traditionally positioned in CSS
@@ -1117,6 +1123,10 @@
scheme can be used to position the marker-in-content as if it were an
ordinary CSS-generated marker.
+ <h3 id=position-marker><span class=secno>7.1. </span> The ‘<code
+ class=css>marker</code>’ value for ‘<code
+ class=property>position</code>’</h3>
+
<table class=propdef>
<tbody>
<tr>
@@ -1175,38 +1185,130 @@
<p>To calculate the element's horizontal position, first define the
element's nearest list item ancestor element as the <dfn
- id=ancestor-list-item>ancestor list item</dfn>, and the parent of
- <em>that</em> element as the <dfn id=ancestor-list-container>ancestor list
- container</dfn>. The element's horizontal position must then be set such
- that the margin edge of the element corresponding to the "end" edge of the
- <a href="#ancestor-list-container"><i>ancestor list container</i></a> is
- flush with the border edge of the <a
+ id=ancestor-list-item>ancestor list item</dfn>. If the <a
+ href="#ancestor-list-item"><i>ancestor list item</i></a>‘<code
+ class=css>s </code>’marker-attachment' property has the value
+ ‘<code class=css>list-item</code>’, set the <dfn
+ id=marker-positioning-reference-element>marker positioning reference
+ element</dfn> to the <a href="#ancestor-list-item"><i>ancestor list
+ item</i></a>; if the property has the value ‘<code
+ class=css>list-container</code>’, set the <a
+ href="#marker-positioning-reference-element"><i>marker positioning
+ reference element</i></a> to the <a href="#ancestor-list-item"><i>ancestor
+ list item</i></a>‘<code class=css>s parent element. The
+ element</code>’s horizontal position must then be set such that the
+ margin edge of the element corresponding to the "end" edge of the <a
+ href="#marker-positioning-reference-element"><i>marker positioning
+ reference element</i></a> is flush with the border 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>.
+ the "start" edge of the <a
+ href="#marker-positioning-reference-element"><i>marker positioning
+ reference element</i></a>.
<p 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.
+ position the marker flush against its list item, and then when
+ "marker-attachment:list-container", 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.
<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.
+ horizontal and vertical text. For example, if the <i>ancestor list
+ container</i> 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>All elements or pseudo-elements with ‘<code
+ class=css>position:marker</code>’ that share a common <a
+ href="#ancestor-list-item"><i>ancestor list item</i></a> are known as <dfn
+ id=markers-associated-with-that-list-item title=associated-marker>markers
+ associated with that list item</dfn>.
<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 element
- itself, similar to how relative positioning works.</p>
+ itself, similar to how relative positioning works.
+
+ <h3 id=marker-attachment><span class=secno>7.2. </span> The ‘<a
+ href="#marker-attachment0"><code
+ class=property>marker-attachment</code></a>’ property</h3>
+
+ <p>By default, elements or ::marker pseudo-elements with ‘<code
+ class=css>position:marker</code>’ position themselves according to
+ their list item's directionality. However, if the list item is grouped
+ with several other list items which may have different directionality (for
+ example, multiple <li>s with different "dir" attributes in an <ol>
+ in HTML), it is sometimes more useful to have all the markers line up on
+ one side, so the author can specify a single "gutter" on that side and be
+ assured that all the markers will lie in that gutter and be visible. The
+ ‘<a href="#marker-attachment0"><code
+ class=property>marker-attachment</code></a>’ property defined in
+ this section allows an author to control this, switching markers to
+ positioning themselves based off the list container's directionality
+ instead.
+
+ <table class=propdef>
+ <tbody>
+ <tr>
+ <th>Property:
+
+ <td><dfn id=marker-attachment0>marker-attachment</dfn>
+
+ <tr>
+ <th>Value:
+
+ <td>list-item | list-container
+
+ <tr>
+ <th>Initial:
+
+ <td>list-item
+
+ <tr>
+ <th>Applies to:
+
+ <td><a href="#list-item"><i title="list item">list items</i></a>
+
+ <tr>
+ <th>Inherited:
+
+ <td>yes
+
+ <tr>
+ <th>Percentages:
+
+ <td>N/A
+
+ <tr>
+ <th>Media:
+
+ <td>visual
+
+ <tr>
+ <th>Computed Value:
+
+ <td>specified value
+ </table>
+
+ <p>When a list item has ‘<code
+ class=css>marker-attachment:list-item</code>’, any <a
+ href="#markers-associated-with-that-list-item"><i
+ title=associated-marker>markers associated with the list item</i></a> base
+ their positioning off of the directionality of the list item. When a list
+ item has ‘<code
+ class=css>marker-attachment:list-container</code>’, the <a
+ href="#markers-associated-with-that-list-item"><i
+ title=associated-marker>associated markers</i></a> instead base their
+ positioning off of the directionality of the list item's parent element.
+
+ <p>The normative meaning of this is specified in the section defining <a
+ href="#position-marker">position:marker</a>.</p>
<!-- ===================================================================== -->
<h2 id=counter-style><span class=secno>8. </span> Defining Custom Counter
@@ -4188,7 +4290,8 @@
ol, ul {
display: block;
margin: 1em 0;
- padding-left: 40px;
+ padding-left: 40px;
+ marker-attachment: list-container;
}
ol ol, ol ul, ul ul, ul ol {
@@ -4201,10 +4304,10 @@
}
li::marker {
- display: inline-block;
+ display: inline;
margin-right: 1em;
text-align: end;
- /* 'position' implied by list-style-position */
+ /* 'position' computes to "static" or "marker" depending on list-style-position */
}
</pre>
<!-- ====================================================================== -->
@@ -4428,6 +4531,21 @@
<td>same as CSS2.1
<td>same as CSS2.1
+
+ <tr>
+ <td><a class=property href="#marker-attachment0">marker-attachment</a>
+
+ <td>list-item | list-container
+
+ <td>list-item
+
+ <td>list items
+
+ <td>yes
+
+ <td>N/A
+
+ <td>visual
</table>
<!--end-properties-->
@@ -4445,11 +4563,8 @@
<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>
+ item"><strong>7.1.</strong></a>
<li>ancient-tamil, <a href="#ancient-tamil"
title=ancient-tamil><strong>9.6.</strong></a>
@@ -4462,6 +4577,9 @@
<li>armenian, <a href="#armenian" title=armenian><strong>9.6.</strong></a>
+ <li>associated-marker, <a href="#markers-associated-with-that-list-item"
+ title=associated-marker><strong>7.1.</strong></a>
+
<li>asterisk, <a href="#asterisk" title=asterisk><strong>9.4.</strong></a>
@@ -4761,6 +4879,13 @@
<li>marathi, <a href="#marathi" title=marathi><strong>9.2.</strong></a>
+ <li>marker-attachment, <a href="#marker-attachment0"
+ title=marker-attachment><strong>7.2.</strong></a>
+
+ <li>marker positioning reference element, <a
+ href="#marker-positioning-reference-element" title="marker positioning
+ reference element"><strong>7.1.</strong></a>
+
<li>meen, <a href="#meen" title=meen><strong>9.3.</strong></a>
<li>mongolian, <a href="#mongolian"
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-lists/Overview.src.html,v
retrieving revision 1.118
retrieving revision 1.119
diff -u -d -r1.118 -r1.119
--- Overview.src.html 19 Jul 2011 18:56:38 -0000 1.118
+++ Overview.src.html 20 Jul 2011 01:59:01 -0000 1.119
@@ -672,9 +672,8 @@
</div>
<!-- ===================================================================== -->
-
-<h2 id='display-marker'>
-Positioning Markers: the ''marker'' value for 'position'</h2>
+<h2 id='positioning-markers'>
+Positioning Markers</h2>
<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.
@@ -696,42 +695,43 @@
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.</p>
+<h3 id='position-marker'>
+The ''marker'' value for 'position'</h3>
+
<table class="propdef">
- <tbody>
- <tr>
- <th>Property:
- <td>'position'
- <tr>
- <th>New Value:
- <td>''marker''
- <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>see prose, otherwise same as CSS2.1
- </tbody>
+ <tr>
+ <th>Property:
+ <td>'position'
+ <tr>
+ <th>New Value:
+ <td>''marker''
+ <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>see prose, otherwise same as CSS2.1
</table>
<p>The ''marker'' value for 'position' depends on the element it is set on having a list item ancestor. If the specified value of 'position' is ''marker'' and the element does not have a list item ancestor, 'position' must compute to 'relative' on the element.</p>
<p>The element'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>
- <p>To calculate the element's horizontal position, first define the element's nearest list item ancestor element as the <dfn>ancestor list item</dfn>, and the parent of <em>that</em> element as the <dfn>ancestor list container</dfn>. The element's horizontal position must then be set such that the margin edge of the element corresponding to the "end" edge of the <i>ancestor list container</i> is flush with the border edge of the <i>ancestor list item</i> corresponding to the "start" edge of the <i>ancestor list container</i>.</p>
+ <p>To calculate the element's horizontal position, first define the element's nearest list item ancestor element as the <dfn>ancestor list item</dfn>. If the <i>ancestor list item</i>'s 'marker-attachment' property has the value ''list-item'', set the <dfn>marker positioning reference element</dfn> to the <i>ancestor list item</i>; if the property has the value ''list-container'', set the <i>marker positioning reference element</i> to the <i>ancestor list item</i>'s parent element. The element's horizontal position must then be set such that the margin edge of the element corresponding to the "end" edge of the <i>marker positioning reference element</i> is flush with the border edge of the <i>ancestor list item</i> corresponding to the "start" edge of the <i>marker positioning reference element</i>.</p>
- <p 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.</p>
+ <p class='note'>The purpose of this somewhat convoluted definition is to position the marker flush against its list item, and then when "marker-attachment:list-container", 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.</p>
<p class='issue'>This handles ltr/rtl mixed-direction text, but not mixed
horizontal and vertical text. For example, if the <i>ancestor list container</i>
@@ -741,8 +741,46 @@
on what UI would be acceptable for such a crazy case, and how to state it
in non-crazy terms.</p>
+ <p>All elements or pseudo-elements with ''position:marker'' that share a common <i>ancestor list item</i> are known as <dfn title='associated-marker'>markers associated with that list item</dfn>.</p>
+
<p>The 'top', 'right', 'bottom', and 'left' properties specify offsets relative to the top, right, bottom, and left edges (respectively) of the element itself, similar to how relative positioning works.</p>
+<h3 id='marker-attachment'>
+The 'marker-attachment' property</h3>
+
+ <p>By default, elements or ::marker pseudo-elements with ''position:marker'' position themselves according to their list item's directionality. However, if the list item is grouped with several other list items which may have different directionality (for example, multiple <li>s with different "dir" attributes in an <ol> in HTML), it is sometimes more useful to have all the markers line up on one side, so the author can specify a single "gutter" on that side and be assured that all the markers will lie in that gutter and be visible. The 'marker-attachment' property defined in this section allows an author to control this, switching markers to positioning themselves based off the list container's directionality instead.</p>
+
+ <table class="propdef">
+ <tr>
+ <th>Property:
+ <td><dfn>marker-attachment</dfn>
+ <tr>
+ <th>Value:
+ <td>list-item | list-container
+ <tr>
+ <th>Initial:
+ <td>list-item
+ <tr>
+ <th>Applies to:
+ <td><i title="list item">list items</i>
+ <tr>
+ <th>Inherited:
+ <td>yes
+ <tr>
+ <th>Percentages:
+ <td>N/A
+ <tr>
+ <th>Media:
+ <td>visual
+ <tr>
+ <th>Computed Value:
+ <td>specified value
+ </table>
+
+ <p>When a list item has ''marker-attachment:list-item'', any <i title='associated-marker'>markers associated with the list item</i> base their positioning off of the directionality of the list item. When a list item has ''marker-attachment:list-container'', the <i title='associated-marker'>associated markers</i> instead base their positioning off of the directionality of the list item's parent element.</p>
+
+ <p>The normative meaning of this is specified in the section defining <a href="#position-marker">position:marker</a>.</p>
+
<!-- ===================================================================== -->
<h2 id='counter-style'>
@@ -3188,7 +3226,8 @@
ol, ul {
display: block;
margin: 1em 0;
- padding-left: 40px;
+ padding-left: 40px;
+ marker-attachment: list-container;
}
ol ol, ol ul, ul ul, ul ol {
@@ -3201,10 +3240,10 @@
}
li::marker {
- display: inline-block;
+ display: inline;
margin-right: 1em;
text-align: end;
- /* 'position' implied by list-style-position */
+ /* 'position' computes to "static" or "marker" depending on list-style-position */
}
</pre>
Received on Wednesday, 20 July 2011 01:59:10 UTC