Re: [css3 lists] list-style-direction

Discussion at the CSS WG meeting at TPAC 2010 ( resulted in a modified proposal,
to which I subscribe:

A new value for list-style-position: outside-parent (in addition to the
existing inside|outside).

list-style-position:outside-parent would work like
list-style-position:outside, except that list-style-position:outside-parent
will apply the list element's direction to the marker box;
list-style-position:outside would, on the other hand, continue to use the
item element's direction for the marker box. The marker box direction
affects both the bidirectional ordering of the marker text and the location
of the marker box, which is on the "start" side of its direction.

It was also proposed that for list-style-position:outside-parent list items,
the list item's text-align will apply only to the list item's content, not
to its marker box, which will behave as if it had text-align:start. This is
the current behavior for list-style-position:outside in
WebKit. list-style-position:outside would, on the other hand, now be
specified to apply the item's text-align to both the marker box and the item
content, as is currently the case in IE, Opera and Firefox. This reason this
was proposed is that with list items having text-align:start by default, the
markers of lists containing opposite-direction items do not line up, even
with ist-style-position:outside-parent, unless the WebKit approach is used.

However, this reason would no longer apply if the default stylesheet could
specify: li {list-style-position:outside-parent; text-align: match-parent}.
For lists where all items have the same direction as the parent, such a
change in the default stylesheet would have no visible effect at all, which
is good. For lists where some items have the opposite direction, the default
effect would be as follows (view in fixed-space font to get the intended

<ol dir=ltr style="text-align:start"><li>ltr text.</li><li>longer ltr
text.</li><li dir=rtl>RTL TEXT.</li></ol>
1. ltr text.
2. longer ltr text.

<ol dir=ltr style="text-align:end"><li>ltr text.</li><li>longer ltr
text.</li><li dir=rtl>RTL TEXT.</li></ol>
       1. ltr text.
2. longer ltr text.
       3. .TXET LTR

<ol dir=ltr style="text-align:center"><li>ltr text.</li><li>longer ltr
text.</li><li dir=rtl>RTL TEXT.</li></ol>
   1. ltr text.
2. longer ltr text.
   3. .TXET LTR

Is such a change to the default stylesheet ok by you?

If so, do we need to get it into HTML5?


On Sun, Oct 31, 2010 at 7:03 PM, Aharon (Vladimir) Lanin

> The following is a proposal for some bidi-related changes to CSS3 Lists<>
> .
> 1. An additional list-related property: list-style-direction.
> The property would determine the direction of the list marker, when it is a
> separate box, i.e. when list-item-position is "outside". The effects of the
> marker's direction include:
>    - The location of the marker box, since it is on the "start" side of
>    list-style-direction. For example, with list-item-direction:ltr, the marker
>    box is to the left of the list item.
>    - The bidirectional ordering of the marker text. For example, with list-item-direction:rtl,
>    the marker text "1." is displayed visually as ".1".
> list-style-direction would take one of the following values:
>    - ltr
>    - rtl
>    - match-list
>    - match-item
> For backward compatibility with CSS2, the default value would be
> match-item.
> Note, however, that since the marker box is displayed in the margin, and
> since a list by default only creates a margin on its start side, match-item
> works poorly for  list items whose direction is opposite to the list's
> direction. This is the reason why currently, most or all of the marker is
> invisible for such items in all major browsers. Furthermore, it turns out
> that in many or most use cases (at least in Hebrew, Arabic, and Persian),
> the preferred look is to have all markers appear on the same side, even
> though different items have different direction. Thus, we would really want
> the default to be match-list, but can not make it so because of CSS2
> behavior.
> As a workaround, we therefore propose that the default style sheet would
> specify list-item-direction:match-list for all ol and ul elements.
> 2. Currently, there is no interoperability regarding whether text-align
> applies to the list item marker when list-item-position is "outside". IE,
> Firefox and Opera keep the marker with the item, i.e. apply the alignment to
> the marker. WebKit, on the other hand, applies the alignment only to the
> item, but keeps the marker location constant regardless of text-align. As a
> result, there is a big difference between the way <ul style="text-align:end>
> is displayed in WebKit and the other browsers.
> I bring this up in this context because the same issue would come up for
> list-style-direction:match-list in combination with text-align:start as it
> applies to opposite-direction items.
> IMHO, WebKit's approach here is more useful. When users want the marker
> kept together with the item, they should use list-style-position:inside.
> With list-style-position:outside, the markers should line up.
> Aharon

Received on Sunday, 14 November 2010 12:13:39 UTC