@@ -571,40 +571,47 @@ Marker Positioning</h2>
571
571
<h3 id='marker-side'>
572
572
The 'marker-side' property</h3>
573
573
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 <li>s with different "dir" attributes in an <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
-
584
574
<pre class='propdef'>
585
575
Name : marker-side
586
- Value : list-item | list-container
587
- Initial : list-item
576
+ Value : match-self | match-parent
577
+ Initial : match-self
588
578
Applies to : <a>list items</a>
589
579
Inherited : yes
590
580
Percentages : n/a
591
581
Computed value : specified keyword
592
582
Animation type : discrete
593
583
</pre>
594
584
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
+
595
594
<dl dfn-type=value dfn-for=marker-side>
596
- <dt> <dfn>list-item </dfn>
595
+ <dt> <dfn>match-self </dfn>
597
596
<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=] .
599
599
600
- <dt> <dfn>list-container </dfn>
600
+ <dt> <dfn>match-parent </dfn>
601
601
<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 .
604
604
</dl>
605
605
606
606
<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 <li>s with different "dir" attributes in an <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
+
608
615
Both of the following example renderings are generated from the following HTML,
609
616
with the only difference being the value of 'marker-side' on the list:
610
617
@@ -620,8 +627,8 @@ The 'marker-side' property</h3>
620
627
<table class=data style="width: 35em;">
621
628
<thead>
622
629
<tr>
623
- <th> list-item
624
- <th> list-container
630
+ <th> ''match-self''
631
+ <th> ''match-parent''
625
632
<tbody>
626
633
<tr>
627
634
<td style="border-right: thin solid">
@@ -1307,7 +1314,6 @@ Appendix A: Sample Style Sheet For HTML</h2>
1307
1314
display: inline;
1308
1315
text-align: end;
1309
1316
unicode-bidi: isolate;
1310
- /* 'position' computes to "static" or "marker" depending on list-style-position */
1311
1317
}
1312
1318
</pre>
1313
1319
0 commit comments