Question

Strange multilingual question here:

I have a <ul> with <li> items that are displayed with display:inline.

When I use a body{direction:rtl} style directive, these items do not change order.
Is there any trick to inverse the order of the <li> items for RTL (e.g. arabic) language support?

Answer 1

Add the rule

ul { unicode-bidi: bidi-override; }

Caveat: Depending on browser, this may also cause a string like “1234” to be displayed right to left. You may need to set unicode-bidi: bidi-override; direction: rtl on such elements.

According to the CSS 2.1 spec, the direction property “specifies the base writing direction of blocks and the direction of embeddings and overrides (see ‘unicode-bidi’) for the Unicode bidirectional algorithm. In addition, it specifies such things as the direction of table column layout, the direction of horizontal overflow, the position of an incomplete last line in a block in case of ‘text-align: justify’.” But inline box ordering is not affected. Later, it adds:

“For the ‘direction’ property to affect reordering in inline elements, the ‘unicode-bidi’ property’s value must be ’embed’ or ‘override’.”

This is a bit vague, but the the code above works on modern browsers (which otherwise exhibit many differences in dealing with directionality).