More best practices for RTL scripts (markup vs CSS for bidi).

Dear all, and bidi experts

When trying to localize [1] the new W3C homepage style [2], I came 
across  something worth to note.


HTML markup (dir="rtl") doesn't have the same effect as CSS (direction: 
rtl;unicode-bidi: embed;)

Some time you want your block-element to display inline (e.g. for 
menu-like effect). However, by default this block elements flow from 
left to right. So to make them flow from right-to left, you want to use 
HTML markup (dir="rtl"). It doesn't work. You should use CSS properties
(direction: rtl; unicode-bidi: embed;) to get the desired effect.

with the following style:

<style type="text/css">
.a p {display:inline; direction: rtl; unicode-bidi: embed}
.b p {display:inline;}
</style>

the HTML code (case-1):

<div class="a">
<p>display</p>
<p>in</p>
<p>line</p>
</div>

results in
line in display

while (case-2):

<div class="b" dir="rtl">
<p>display</p>
<p>in</p>
<p>line</p>
</div>

will result in (right justified)
display in line


The point is: Why CSS 'direction: rtl; unicode-bidi: embed' is not the 
same as markup 'dir="rtl"'

Css vs markup FAQ [3] says (and I strongly agree):
"You should always use dedicated bidi markup to describe your content, 
where markup is available [...] because directionality is an integral 
part of the document structure." This rule seems violated in the above 
example.

Well... why change writing direction when content is all English?
But imagine one of the <p> contains a strong RTL char.

The two cases are still different. In the second case (dir="rtl"), the 
result is like if all <p>s are inline elements, i.e. all inner <p>s are 
removed.
Please try it: http://www.w3c.org.ma/Tests/displayInline.html

So, the rule seems to be (grossly paraphrased):
For inline elements, CSS direction property applies to the ordering of 
elements as well as to their content. On the other hand, markup dir 
attribute applies only to the content of these elements juxtaposed 
together.

Any opinion?

[1] http://www.w3c.org.ma/Tests/temp-ar-index.html
[2] http://www.w3.org/
[3] http://www.w3.org/International/questions/qa-bidi-css-markup


-----------------------------
Note incidently, that elements displayed inline and floated right, will 
flow (by side effect) from right to left, whatever direction is 
specified. Does float style (*cancel*) direction style?

Try it: http://www.w3c.org.ma/Tests/inlineFloat.html


Best regards,

Najib


-- 
Najib TOUNSI (tounsi at w3.org)
W3C Office in Morocco (http://www.w3c.org.ma/)
Ecole Mohammadia d'Ingénieurs, BP. 765 Agdal-RABAT Morocco
Phone : +212 (0) 537 68 71 50  Fax : +212 (0) 537 77 88 53
Mobile: +212 (0) 661 22 00 30

Received on Wednesday, 25 November 2009 18:05:56 UTC