I've decided to start a new habit, to introduce a new / forgotten element each week, and to tell you how to use this. To start this one off, let's look at the BDO element.

Directionality

What's dirctionality? well, not all languages are written from left to right. Heberw and arabic, for example, are written from right to left.

In html, we have the dir attribute which allows us to define the natuaral dirctionality of the page. It can recieve 2 values - LTR and RTL. Although most browsers set this to ltr by default, it is recomended that we state this explicitly on the html opening tag even if our page is in English.

It is quite complicated to mix directionalities. In fact, as a hebrew user, I've seen almost no good text editor that handles bidirectional text correctly. As far as I've seen, the only ones who seem to get this right are MS.

Unicode has defined a very elaborate and complex mechanism to help software to display bidirectional content, but it has a few problems, especialy when it comes to numbers and neutral characters (such as ( or !). For that reason, we sometime need to help the browser know what we mean.

Let's look at this example (the examples will be in hebrew, but you can see how it breaks even if you can't undestand it):

שלום (קוראים לי אריה)

Notice how the parenthesis is displayed incorrectly. In this case, the solution is quite simple - since we don't have any bidi content, we can simply use the dir attribute on the entire paregraph. But when mixed we don't have that privilege:

And then he said קוראים לי אריה (על שם סבא שלי)

For this exact reason, the bdo element was created.

The BDO element

The BDO element is meant to point a part of a text which is in a different directionlity than that of it's containing elemnet.

So, if we take our previous example -

<p>And then he said <q>קוראים לי אריה (על שם סבא שלי)</q></p>

We can use bdo to fix it:

<p>And then he said <q><bdo dir="rtl">קוראים לי אריה (על שם סבא שלי)</bdo></q></p>

Which will render -

And then he said קוראים לי אריה (על שם סבא שלי)

Fixed! The bdo has one requiered attribute - dir - which is by now self explenatory.

Edit:The difference between directionality and text align

This is a small addition that I know as a cuase of confusion - directionality has nothing to do with text align. Just to make that point clear - look at this:

And then he said קוראים לי אריה (על שם סבא שלי)

can't belive I use inner style but I don't want to add another resource for just that one example...

Notice that it doesn't fix this. Text align only tells the browsers in what direction to align the text - not in what order to read it's letters. This is a very important point, and it is a cause for much confusion for many RTL users. In fact - there's a very large newspaper website in israel which doesn't seem to get this.

More Reading

1. The W3C on how to write bidi html documents. Most of the examples are bad (using tables) as it's an old document, but the priciples are solid.
2. Unicode Bidi Standart if you have a lot of time on you hands - you might try to read this document, though as I said - this is extremly complex.