Skip to content

Commit b26afb3

Browse files
committed
Rewrote 'list-style-position' section.
Added a ton of -position issues.
1 parent fb75050 commit b26afb3

1 file changed

Lines changed: 51 additions & 13 deletions

File tree

css3-lists/Overview.src.html

Lines changed: 51 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -734,7 +734,7 @@ <h2>Marker Position: The 'list-style-position' property</h2>
734734
<td><dfn>list-style-position</dfn>
735735
<tr>
736736
<th>Value:
737-
<td>inside | outside | hanging
737+
<td>inside | hanging | outside
738738
<tr>
739739
<th>Initial:
740740
<td>outside
@@ -758,22 +758,60 @@ <h2>Marker Position: The 'list-style-position' property</h2>
758758
<dl>
759759
<dt><dfn>inside</dfn></dt>
760760
<dd>The ''::marker'' pseudo-element is an inline element placed immediately
761-
before the ''::before'' pseudo-element in the list item, after which the element's content
762-
flows. Note that if there is no inline content, this will create a line box, just as content in an
763-
inline ::before pseudo-element would. Also note that all the properties that apply to inline
764-
elements apply to the ''::marker'' pseudo-element in this state, and this
765-
''::marker'' box participates in the inline box model in the normal manner.</dd>
761+
before the ''::before'' pseudo-element in the list item's principle box, after
762+
which the element's content flows. Note that if there is no inline content,
763+
this will create a line box, just as content in an inline ''::before'' pseudo-element
764+
would. Also note that all the properties that apply to inline elements apply
765+
to the ''::marker'' pseudo-element in this state, and this ''::marker'' box
766+
participates in the inline box model in the normal manner.</dd>
767+
768+
<dt><dfn>hanging</dfn></dt>
769+
<dd>As ''inside'', except the marker is out-of-flow.
770+
The marker must be positioned such that its "before" edge is aligned with the
771+
"before" edge of the first line box in the list item, and its "end" edge is
772+
flush with the "start" edge of the first line box in the list item.
773+
<span class=note>Note that this causes the marker to still respond to the
774+
'text-align' property, as the boundaries of line boxes depend on 'text-align'.</span></dd>
766775

767776
<dt><dfn>outside</dfn></dt>
768-
<dd>As ''inside'', except the marker is positioned, as if it were ''position:absolute'',
769-
such that in an ltr list item the marker's right edge is positioned against the
770-
left edge of the first line box in the list item, while in an rtl list item
771-
the marker's left edge is positioned against the right edge of the first line
772-
box in the list item. Note that this implies that the marker may move to stay
773-
near the text of the list item if, for example, 'text-align' is set to ''right''
774-
in an ltr list item.</dd>
777+
<dd>As ''inside'', except the marker is out-of-flow.
778+
The marker must be positioned such that its "before" edge is aligned with the
779+
"before" edge of the list item. If the list item's parent box is ltr, the marker's
780+
"end" edge must be flush with the list item's "start" edge; if the list item's
781+
parent box is rtl, the marker's "start" edge must be flush with the list item's
782+
"end" edge.</dd>
775783
</dl>
776784

785+
<div class=issue>
786+
<p>''hanging'' is meant to emulate what some browsers (IE8, Firefox, Opera)
787+
did for the CSS2.1 "outside" value, with somewhat more detail.</p>
788+
789+
<p>''outside'' is meant to emulate what other browsers (Webkit, IE9) did for
790+
the CSS2.1 "outside" value, again with more detail. There is a notable behavior
791+
change, in that the markers pay attention to the container's direction, not
792+
the list item. This arose from the "Requirements for bidi in HTML" group's
793+
conclusions - in a mixed-direction list, right now it's impossible to determine
794+
ahead of time which side of the container the gutter should go (to contain the
795+
bullet). You have to put a gutter on both sides, even if all the items are
796+
one direction, just in case.</p>
797+
798+
<p>I'm not sure exactly how to express what I want with the "out-of-flow" comment
799+
in ''hanging'' and ''outside''. I want to change how it's positioned, but
800+
without invoking the "positioned element" machinery. Is that good/possible?
801+
I also don't want to interfere with the author actually setting 'position' on
802+
''::marker''. All this, and the ''::marker'' should still be a child of the
803+
list item in the box tree (otherwise the behavior is surprising).</p>
804+
805+
<p>How should I define "first line box" for ''hanging''? The marker is intended
806+
to be "magically positioned" - does this invoke the same logic that Positioned
807+
Layout defines, where it leaves behind an inline placeholder that will generate
808+
a line box? If not, do I descend into children to find the first linebox?
809+
If I do that, there's the possibility of conflict, if a list item contains a
810+
list item, and both of their markers position off of the same linebox. The
811+
consequences of this are well-defined, but is that okay? I get 3 different
812+
behaviors out of the 3 hanging-like browsers.</p>
813+
</div>
814+
777815
<p>Note that a marker is only generated if the computed value of the 'content'
778816
property for the element's ''::marker'' pseudo-element is not ''inhibit''.</p>
779817

0 commit comments

Comments
 (0)