Actually the reality is worse. Below is your page drawn in Gecko (Firefox) on the left and Webkit (Safari) on the right:

There is a thread on this list started by Aharon from Google that talks about exactly theses sort of issues that has received too little discussion. The real problem is that the HTML standard is not explicit enough on what should happen so you will get different results on different browsers.

Your example is in a fuzzy area. As far as the markup is concerned there are three distinct paragraphs but for the user there is one sentence. According to the HTML standard, the elements should be ordered according to the Unicode bidi algorithm, however that algorithm has nothing to say about what to do when lines of a paragraph are drawn inline. I would personally say that the Gecko engine is doing the right thing in this case.



On 25/11/2009 17:40, Najib Tounsi wrote:
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;}

the HTML code (case-1):

<div class="a">

results in
line in display

while (case-2):

<div class="b" dir="rtl">

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:

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?


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:

Best regards,