W3C home > Mailing lists > Public > public-css-commits@w3.org > July 2011

csswg/css3-lists Overview.html,1.69,1.70 Overview.src.html,1.118,1.119

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
Message-Id: <E1QjM3z-0003aG-Fy@lionel-hutz.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>&rsquo; property</a>
     </ul>
 
-   <li><a href="#display-marker"><span class=secno>7. </span> Positioning
-    Markers: the &lsquo;<code class=css>marker</code>&rsquo; value for
-    &lsquo;<code class=property>position</code>&rsquo;</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
+      &lsquo;<code class=css>marker</code>&rsquo; value for &lsquo;<code
+      class=property>position</code>&rsquo;</a>
+
+     <li><a href="#marker-attachment"><span class=secno>7.2. </span> The
+      &lsquo;<code class=property>marker-attachment</code>&rsquo;
+      property</a>
+    </ul>
 
    <li><a href="#counter-style"><span class=secno>8. </span> Defining Custom
     Counter Styles: the &lsquo;<code class=css>@counter-style</code>&rsquo;
@@ -1092,9 +1100,7 @@
   </div>
   <!-- ===================================================================== -->
 
-  <h2 id=display-marker><span class=secno>7. </span> Positioning Markers: the
-   &lsquo;<code class=css>marker</code>&rsquo; value for &lsquo;<code
-   class=property>position</code>&rsquo;</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 &lsquo;<code
+   class=css>marker</code>&rsquo; value for &lsquo;<code
+   class=property>position</code>&rsquo;</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>&lsquo;<code
+   class=css>s </code>&rsquo;marker-attachment' property has the value
+   &lsquo;<code class=css>list-item</code>&rsquo;, 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 &lsquo;<code
+   class=css>list-container</code>&rsquo;, 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>&lsquo;<code class=css>s parent element. The
+   element</code>&rsquo;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 &lsquo;<code
+   class=css>position:marker</code>&rsquo; 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 &lsquo;<code class=property>top</code>&rsquo;, &lsquo;<code
    class=property>right</code>&rsquo;, &lsquo;<code
    class=property>bottom</code>&rsquo;, and &lsquo;<code
    class=property>left</code>&rsquo; 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 &lsquo;<a
+   href="#marker-attachment0"><code
+   class=property>marker-attachment</code></a>&rsquo; property</h3>
+
+  <p>By default, elements or ::marker pseudo-elements with &lsquo;<code
+   class=css>position:marker</code>&rsquo; 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 &lt;li>s with different "dir" attributes in an &lt;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
+   &lsquo;<a href="#marker-attachment0"><code
+   class=property>marker-attachment</code></a>&rsquo; 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 &lsquo;<code
+   class=css>marker-attachment:list-item</code>&rsquo;, 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 &lsquo;<code
+   class=css>marker-attachment:list-container</code>&rsquo;, 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&nbsp;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&nbsp;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 &lt;li>s with different "dir" attributes in an &lt;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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 20 July 2011 01:59:11 GMT