- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 14 Jun 2011 18:58:28 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-lists In directory hutz:/tmp/cvs-serv22581 Modified Files: Overview.src.html Log Message: 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? Index: Overview.src.html =================================================================== RCS file: /sources/public/csswg/css3-lists/Overview.src.html,v retrieving revision 1.109 retrieving revision 1.110 diff -u -d -r1.109 -r1.110 --- Overview.src.html 9 Jun 2011 23:54:39 -0000 1.109 +++ Overview.src.html 14 Jun 2011 18:58:26 -0000 1.110 @@ -141,7 +141,7 @@ 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 @@ 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 @@ <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 @@ <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><counter-prefix> counter(list-item, <counter-name>) <counter-suffix></code>, @@ -696,25 +682,33 @@ <!-- ===================================================================== --> <h2 id='display-marker'> -Using Content as Markers: the ''marker'' value for 'display'</h2> +Positioning Markers: the ''marker'' value for 'position'</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> + <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 @@ <th>Media: <td>same as CSS2.1 <tr> - <th>Computed value: + <th>Computed 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> <!-- ===================================================================== -->
Received on Tuesday, 14 June 2011 18:58:34 UTC