BiDi Samples

These samples have basically been provided by A.Prilop, who evidently understands this stuff better than I do.

See also A.Prilop's own page of samples.

Due to the possibility of additional confusion from stylesheets, these samples are presented without CSS. I don't by any means intend to imply that stylesheets can't be used with rtl/mixed content, but I found that my regular stylesheet caused a few problems with some of this content, so I thought it best to keep CSS out of the way for these demonstrations.

Please examine the source markup to understand better what is being done here. Note that title attributes have been added to some of the non-Roman snippets, as well as in the title element of the page, so you may (if your browser implements such things) assess whether your browser displays Arabic correctly also in title bars and pop-ups.

Mixed directions samples

Suppose you want to include the etymology

   kerátio(n) > qîrât. > carat > karat
   Greek        Arabic           Russian

into an English or an Arabic text. In an Arabic text it should read

              karat < carat < qîrât. < kerátio(n)

Here is some markup to do it (on capable browsers):

dir="ltr" :

κεράτιο(ν) > قيراط > carat > карат

dir="rtl" :

κεράτιο(ν) > قيراط > carat > карат

In the following, the Russian and English are mis-ordered, and the parentheses don't work:

κεράτιο(ν) > قيراط > carat > карат


In general, do not write Hebrew text backwards. However, if you want to include an occasional Hebrew word in a Western-language text and want it to be readable with older browsers too, you could use <bdo dir="ltr"> with Hebrew letters written as &#decnumber; in reverse order. Specify the document encoding as UTF-8.

The Hebrew samples in this section have also been given title= attributes: browsers will typically display these if you "hover" over the text. Note that a careful reading of the HTML4 spec, comparing the general definition of dir in section 8.2 with its bdo-specific definition in 8.2.4 (thanks, Jukka) makes it clear that the bdo markup is specified to affect only the element content, and not the attribute values. Therefore, even when bdo dir="ltr" is in effect, the title attribute needs to be written in the normal way - not reversed - for display on correctly-implemented browsers (such as Mozilla).

The word "sabbath" (σαββατον, תבש) means "rest".

This however assumes that all browser developers managed to interpret the HTML specification in the same way: if you're suspicious that they might decide to apply the bdo also to the attribute values, it seems that one way to be sure of getting the popup right (on a browser which basically does support rtl, I mean) would be to do this: תבש - putting the title attribute well outside the influence of the bdo construct (view the source!).

If MSIE displays these title popups wrongly for you, then you may still need to install Hebrew support into your OS.


Numbers

Note that multi-digit numbers in Arabic have their most-significant digit on the left, just as they do with us. However, when a list of numbers is presented, the items in the list are presented from right to left, as is natural in right-to-left writing. The examples here include a list of one-digit numbers (i.e the digits themselves), as well as a string "100 %" (one hundred, no-break space, percent).

The page contains both working (correct) and non-working examples. Again: look at the source of the page to understand what's being done!
The list of ASCII numbers should run from left to right.
The lists of Indic-Arabic numbers should run from right to left.
The number one hundred is always written with the digit 1 on the left (i.e because of the general principle that the most significant digit of a number is on the left, in both systems).
The percent sign in Arabic goes to the left of the number - therefore it looks like this (in transcription): % 100
Recall that the dir attribute of ltr or rtl is defined to influence only those characters which have no inherent directionality: the characters which have their own directionality property retain it (except when overridden by bdo).

These examples work, on the usual browsers:

dir=ltr
0, 1, 2, 3, 4, 5, 6, 7, 8, 9; 100 %
٠، ١، ٢، ٣، ٤، ٥، ٦، ٧، ٨، ٩؛ ١٠٠ ٪
۰، ۱، ۲، ۳، ۴، ۵، ۶، ۷، ۸، ۹؛ ۱۰۰ ٪

dir=rtl
0, 1, 2, 3, 4, 5, 6, 7, 8, 9; 100 %
٠، ١، ٢، ٣، ٤، ٥، ٦، ٧، ٨، ٩؛ ١٠٠ ٪
۰، ۱، ۲، ۳، ۴، ۵، ۶، ۷، ۸، ۹؛ ۱۰۰ ٪


The following fails in some browsers:

dir=ltr
٠، ١، ٢، ٣، ٤، ٥، ٦، ٧، ٨، ٩؛ ١٠٠ ٪
۰، ۱، ۲، ۳، ۴، ۵، ۶، ۷، ۸، ۹؛ ۱۰۰ ٪

dir=rtl
0, 1, 2, 3, 4, 5, 6, 7, 8, 9; 100 %


Test area for Opera 7.23

Some samples from the above, with and without the use of <br>. As reported to Opera, it appears that this browser version, in effect, "forgets" the appropriate dir= setting following a <br> tag. Note also the numbers section above, specifically the one denoted "These examples work, on the usual browsers", and compare Opera's results with those on Mozilla or MSIE.

dir="rtl"
κεράτιο(ν) > قيراط > carat > карат

κεράτιο(ν) > قيراط > carat > карат


To the main article