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

Najib,

I think it's because your CSS is not applying direction in the same way as
your non-CSS example.  I think that to get equivalence between a and b you
should use 

   .a { direction: rtl; unicode-bidi: embed;}
   .a p {display:inline; }
   .b p {display:inline;}

If you use that CSS, the results look identical. This is because the dir
attribute is used on the div, not on the p elements, however you were trying
to apply the direction property, using CSS, to inline elements. Only by
applying to block elements will you get the right alignment.  

Does that make sense?

RI

============
Richard Ishida
Internationalization Lead
W3C (World Wide Web Consortium)

http://www.w3.org/International/
http://rishida.net/



> -----Original Message-----
> From: public-i18n-core-request@w3.org [mailto:public-i18n-core-
> request@w3.org] On Behalf Of Najib Tounsi
> Sent: 25 November 2009 17:40
> To: public-i18n-core@w3.org; 'WWW International'
> Subject: 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 Thursday, 26 November 2009 16:28:58 UTC