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

Richard Ishida wrote:
> 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. 

Yes. Aligned to the right because it is the div section which has the 
class "a".
> This is because the dir
> attribute is used on the div, not on the p elements, 

Now with my initial CSS and dir="rtl" on the p element, a and b become 
equivalent, but  aligned to the left this time.

> 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?
>   

Hum... It remains that dir attribute applied globally to div element 
containing p elements, is not the same as if it is applied separately to 
each p element. Isn't it "Directional markup used far too often in a 
document." ?

Thank you Richard for your notice.

Regards, Najib


>
> ============
> 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 Friday, 27 November 2009 00:54:22 UTC