Switched display:marker to position:marker, rewrote list-style-position:outside in terms of it.

Removed list-style-position:hanging while I was at it, since apparently it's not useful?

Author: tabatkins

css3-lists/Overview.src.html

@@ -141,7 +141,7 @@ <h2>
 Declaring a List Item</h2>
 
 	<p>To declare a list item, the 'display'
-	property should be set to ''list-item''. This, in addition to generating
+	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''.
@@ -311,25 +311,18 @@ <h2 id='list-style-position-property'>
 		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 
+		or can I just spec it away? (Since I have outside markers basically be abspos, it 
 		doesn't apply to them.)</p></dd>
 
-		<dt><dfn>hanging</dfn></dt>
-		<dd>As 'inside', 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.
+		<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.
 		<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>
-
-		<dt><dfn>outside</dfn></dt>
-		<dd>As ''hanging'', 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 ''outside'' 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 'hanging' apply here.</p></dd>
 	</dl>
 
 	<p>Note that a marker is only generated if the computed value of the 'content' 
@@ -504,12 +497,12 @@ <h2 id='marker-pseudoelement'>
 
 	<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 ''::before'' pseudo-element on the same superior parent.  Marker boxes are 
-	inline-block by default, and so a value of ''auto'' for 'width'
-	resolves to the width of the marker's content.  The value of 'list-style-position'
-	on the marker's superior parent can vary the marker's directionality and the
-	initial value of its ''position'' property.</p>
+	are placed at the beginning of their superior parent's content (the exact
+	location depends on the value of 'list-style-position' on the list item, as
+	explained in the definition of that property).  Marker boxes are inline by
+	default, though certain values for 'list-style-position' on the list item
+	can make the marker box positioned, which can have an effect on the computed
+	value of display.</p>
 
 	<div class="html-example">
 		<p>In the following example, the content is centered within a marker
@@ -660,13 +653,6 @@ <h3 id='content-property'>
 		<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 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 <code>&lt;counter-prefix> counter(list-item, &lt;counter-name>) &lt;counter-suffix></code>, 
@@ -696,25 +682,33 @@ <h3 id='content-property'>
 <!-- ===================================================================== -->
 
 <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>
+Positioning Markers: the ''marker'' value for 'position'</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.  
+	Outside list markers now have their positioning defined	in terms of this new 
+	value.</p>
+
+	<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.</p>
 
 	<table class="propdef">
 		<tbody>
 			<tr>
 				<th>Property:
-				<td>'display'
+				<td>'position'
 			<tr>
 				<th>New Value:
 				<td>''marker''
@@ -734,19 +728,44 @@ <h2 id='display-marker'>
 				<th>Media:
 				<td>same as CSS2.1
 			<tr>
-				<th>Computed&#160;value:
+				<th>Computed&nbsp;value:
 				<td>same as CSS2.1
 		</tbody>
 	</table>
 
-	<p>The <dfn>''marker''</dfn> value for 'display' indicates that an element
-	is an <dfn title="inline-marker-candidate">inline marker candidate</dfn>.
-	If the element is a child of a list item with ''list-style-type:inline'',
-	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 ''inline-block''.</p>
+	<p>The ''marker'' value for 'position' 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 ''position:relative''.</p>
+
+	<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>
+
+	<p>To calculate the box's horizontal position, first define the box's nearest
+	list item ancestor as the <dfn>ancestor list item</dfn>, and the parent of
+	that box as the <dfn>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 <i>ancestor list container</i> is flush with the edge of
+	the <i>ancestor list item</i> corresponding to the "start" edge of the 
+	<i>ancestor list container</i>.  <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>
+
+	<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>
+	is vertical but the <i>ancestor list item</i> is horizontal, this definition
+	is nonsensical, as it requires a vertical edge of the marker to be flush 
+	against a horizontal edge of the <i>ancestor list item</i>.  Need to think
+	on what UI would be acceptable for such a crazy case, and how to state it
+	in non-crazy terms.</p>
+
+	<p>The 'top', 'right', 'bottom', and 'left' properties specify offsets 
+	relative to the top, right, bottom, and left edges (respectively) of the box 
+	itself, similar to how relative positioning works.</p>
 
 <!-- ===================================================================== -->