Skip to content

Commit 09408ce

Browse files
committed
[css-lists] Rename marker-side values and clean up prose.
1 parent d56b7a4 commit 09408ce

File tree

1 file changed

+27
-21
lines changed

1 file changed

+27
-21
lines changed

css-lists-3/Overview.bs

+27-21
Original file line numberDiff line numberDiff line change
@@ -571,40 +571,47 @@ Marker Positioning</h2>
571571
<h3 id='marker-side'>
572572
The 'marker-side' property</h3>
573573

574-
By default, elements or ''::marker'' pseudo-elements with ''position:marker''
575-
position themselves according to their list item's directionality.
576-
However, if the list item is grouped with several other list items which may have different directionality
577-
(for example, multiple &lt;li>s with different "dir" attributes in an &lt;ol> in HTML),
578-
it is sometimes more useful to have all the markers line up on one side,
579-
so the author can specify a single "gutter" on that side
580-
and be assured that all the markers will lie in that gutter and be visible.
581-
The 'marker-side' property defined in this section allows an author to control this,
582-
switching list items to positioning their markers based off the list container's directionality instead.
583-
584574
<pre class='propdef'>
585575
Name: marker-side
586-
Value: list-item | list-container
587-
Initial: list-item
576+
Value: match-self | match-parent
577+
Initial: match-self
588578
Applies to: <a>list items</a>
589579
Inherited: yes
590580
Percentages: n/a
591581
Computed value: specified keyword
592582
Animation type: discrete
593583
</pre>
594584

585+
The 'marker-side' property specifies
586+
whether the ''::marker'' is positioned
587+
based on the directionality of the list item itself (i.e. its [=originating element=])
588+
or the directionality of the list container (i.e. the [=originating element=]’s parent).
589+
In the first case, the position of the marker can vary across items in the same list,
590+
based on the directionality assigned to each list item individually;
591+
in the second case they will all align on the same side,
592+
as determined by the directionality assigned to the list as a whole.
593+
595594
<dl dfn-type=value dfn-for=marker-side>
596-
<dt><dfn>list-item</dfn>
595+
<dt><dfn>match-self</dfn>
597596
<dd>
598-
Any <a>associated markers</a> base their positioning off of the directionality of the list item.
597+
The ''::marker'' pseudo-element is positioned
598+
using the directionality of the ''::marker''’s [=originating element=].
599599

600-
<dt><dfn>list-container</dfn>
600+
<dt><dfn>match-parent</dfn>
601601
<dd>
602-
The <a>associated markers</a> instead base their positioning off of the directionality of the list item's parent element.
603-
The normative meaning of this is specified in the section defining <a href="#position-marker">position:marker</a>.
602+
The ''::marker'' pseudo-element is positioned
603+
using the directionality of the ''::marker''’s [=originating element’s=] parent element.
604604
</dl>
605605

606606
<div class='example'>
607-
Here is an example of the effect that 'marker-side' can have on a list.
607+
By default, elements or ''::marker'' pseudo-elements
608+
position themselves according to their list item's directionality.
609+
However, if the list item is grouped with several other list items which may have different directionality
610+
(for example, multiple &lt;li>s with different "dir" attributes in an &lt;ol> in HTML),
611+
it is sometimes more useful to have all the markers line up on one side,
612+
so the author can specify a single "gutter" on that side
613+
and be assured that all the markers will lie in that gutter and be visible.
614+
608615
Both of the following example renderings are generated from the following HTML,
609616
with the only difference being the value of 'marker-side' on the list:
610617

@@ -620,8 +627,8 @@ The 'marker-side' property</h3>
620627
<table class=data style="width: 35em;">
621628
<thead>
622629
<tr>
623-
<th>list-item
624-
<th>list-container
630+
<th>''match-self''
631+
<th>''match-parent''
625632
<tbody>
626633
<tr>
627634
<td style="border-right: thin solid">
@@ -1307,7 +1314,6 @@ Appendix A: Sample Style Sheet For HTML</h2>
13071314
display: inline;
13081315
text-align: end;
13091316
unicode-bidi: isolate;
1310-
/* 'position' computes to "static" or "marker" depending on list-style-position */
13111317
}
13121318
</pre>
13131319

0 commit comments

Comments
 (0)