Skip to content

Commit e6f54b7

Browse files
committed
Rewrote the meaning of 'hanging' and 'outside', and adjusted the ::marker definition to fit.
1 parent 49117cc commit e6f54b7

1 file changed

Lines changed: 23 additions & 48 deletions

File tree

css3-lists/Overview.src.html

Lines changed: 23 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -792,55 +792,27 @@ <h2 id='list-style-position-property'>
792792
participates in the inline box model in the normal manner.</dd>
793793

794794
<dt><dfn>hanging</dfn></dt>
795-
<dd>As ''inside'', except the marker is absolutely positioned (see the section
796-
on ''::marker'' for more details.) The marker's static position is such that
797-
its "before" edge is aligned with the "before" edge of the first line box
798-
in the list item, and its "end" edge is flush with the "start" edge of the
799-
first line box in the list item.
800-
<span class=note>Note that this causes the marker to still respond to the
801-
'text-align' property, as the boundaries of line boxes depend on 'text-align'.</span></dd>
795+
<dd>As ''inside'', except the marker is absolutely positioned. The marker's
796+
static position is such that its baseline is aligned with the baseline
797+
of the first line box in the list item, and its "end" edge is flush with
798+
the "start" edge of the first line box in the list item.
799+
<span class=note>Note that, per the Positioned Layout spec, absolutely positioned
800+
boxes leave behind a 'placeholder' in their original position in the box tree,
801+
which may have an effect on line-box generation.</span></dd>
802802

803803
<dt><dfn>outside</dfn></dt>
804-
<dd>As ''inside'', except the marker is absolutely positioned (see the section
805-
on ''::marker'' for more details.) The marker's static position is such that
806-
its "before" edge is aligned with the "before" edge of the list item. If
807-
the list item's parent box is ltr, the marker's "end" edge must be flush
808-
with the list item's "start" edge; if the list item's parent box is rtl,
809-
the marker's "start" edge must be flush with the list item's "end" edge.</dd>
804+
<dd>As ''inside'', except the marker is absolutely positioned and has the same
805+
directionality as the list item's parent box. The marker's static position is such that
806+
its "over" edge is flush with the edge of the list item corresponding with
807+
the "over" edge of the list item's parent box, and it's "end" edge is
808+
flush with the edge fo the list item corresponding to the "start" edge of the
809+
list item's parent box.</dd>
810810
</dl>
811811

812-
<div class=issue>
813-
<p>''hanging'' is meant to emulate what some browsers (IE8, Firefox, Opera)
814-
did for the CSS2.1 "outside" value, with somewhat more detail.</p>
815-
816-
<p>''outside'' is meant to emulate what other browsers (Webkit, IE9) did for
817-
the CSS2.1 "outside" value, again with more detail. There is a notable behavior
818-
change, in that the markers pay attention to the container's direction, not
819-
the list item. This arose from the "Requirements for bidi in HTML" group's
820-
conclusions - in a mixed-direction list, right now it's impossible to determine
821-
ahead of time which side of the container the gutter should go (to contain the
822-
bullet). You have to put a gutter on both sides, even if all the items are
823-
one direction, just in case.</p>
824-
825-
<p>I'm not sure exactly how to express what I want with the "out-of-flow" comment
826-
in ''hanging'' and ''outside''. I want to change how it's positioned, but
827-
without invoking the "positioned element" machinery. Is that good/possible?
828-
I also don't want to interfere with the author actually setting 'position' on
829-
''::marker''. All this, and the ''::marker'' should still be a child of the
830-
list item in the box tree (otherwise the behavior is surprising).</p>
831-
832-
<p>How should I define "first line box" for ''hanging''? The marker is intended
833-
to be "magically positioned" - does this invoke the same logic that Positioned
834-
Layout defines, where it leaves behind an inline placeholder that will generate
835-
a line box? If not, do I descend into children to find the first linebox?
836-
If I do that, there's the possibility of conflict, if a list item contains a
837-
list item, and both of their markers position off of the same linebox. The
838-
consequences of this are well-defined, but is that okay? I get 3 different
839-
behaviors out of the 3 hanging-like browsers.</p>
840-
</div>
812+
<p class=issue>Are the positioning rules for ''hanging'' and ''outside'' good?</p>
841813

842814
<p>Note that a marker is only generated if the computed value of the 'content'
843-
property for the element's ''::marker'' pseudo-element is not ''inhibit''.</p>
815+
property for the element's ''::marker'' pseudo-element is not ''none''.</p>
844816

845817
<div class=example>
846818
<p>For example:
@@ -1007,7 +979,9 @@ <h2 id='marker-pseudoelement'>
1007979
are placed at the beginning of their superior parent's content, immediately before
1008980
a ''::before'' pseudo-element on the same superior parent. Marker boxes are
1009981
inline-block by default, and so a value of ''auto'' for 'width'
1010-
resolves to the width of the marker's content.</p>
982+
resolves to the width of the marker's content. The value of 'list-style-position'
983+
on the marker's superior parent can vary the marker's directionality and the
984+
initial value of its ''position'' property.</p>
1011985

1012986
<div class="html-example">
1013987
<p>In the following example, the content is centered within a marker
@@ -1623,7 +1597,7 @@ <h2 id="html4">
16231597
ol, ul {
16241598
display: block;
16251599
margin: 1em 0;
1626-
padding-left: 2.5em;
1600+
padding-left: 40px;
16271601
}
16281602

16291603
ol ol, ol ul, ul ul, ul ol {
@@ -1636,9 +1610,10 @@ <h2 id="html4">
16361610
}
16371611

16381612
li::marker {
1639-
margin-right: 1em;
1640-
text-align: right;
1641-
/* 'display', 'position', and 'text-align' implied by list-style-position */
1613+
display: inline-block;
1614+
margin-right: 1em;
1615+
text-align: end;
1616+
/* 'position' implied by list-style-position */
16421617
}
16431618
</pre>
16441619

0 commit comments

Comments
 (0)