<style> ul { direction: rtl; } li { outline: 1px solid; } img { width: 10px; height: 10px; background-color: blue; } </style> <div style="width: 200px; border: 1px solid;"> <ul dir="rtl"> <li style="unicode-bidi: plaintext"><img></li> </ul> <ul dir="rtl"> <li style="direction: ltr; text-align: right"><img></li> </ul> </div> shouldn't both lines produce the list marker at the same (horizontal) position?
<rdar://problem/103859351>
https://drafts.csswg.org/css-lists/#marker-side marker-side defaults to match-self, i.e. > The marker box is positioned using the directionality of the ::marker’s originating element. So since the 1st <li> has direction:rtl, then its ::marker appears at the right. And since the 2nd <li> has direction:ltr, its ::marker appears on the left. It sounds like you expect marker-side:match-parent > The marker box is positioned using the directionality of the ::marker’s originating element’s parent element. Then since the <ul> have direction:rtl, both markers would appear at the right. I don't see why unicode-bidi:plaintext would make it different, given that the markers have outside position. https://drafts.csswg.org/css-lists/#list-style-position-outside > CSS does not specify the precise location of the marker box or its position in the painting order, but does require that it be placed on the inline-start side of the box, using the writing mode of the box indicated by marker-side.
It is failing only in Safari / WebKit. Adding 'BrowserCompat' tag and also adding 'WPTImpact'.