As you know there are html entities for direction marks: ‏ and ‎, which are easier to remember and write.

But there is no easy way to automatically put these in dynamic content.

Hi Jonathan,

Great article!

One thing I’d mention is the fact that using the same value for left/right offsets does the magic on relatively positioned elements.

For example this styling:

.myBox { left: 50px; right: 50px;}

Should move the box to the left in a LTR context and to the right on a RTL context.
No need to rely on an attribute selector or anything…

Great article…

Another useful application of LTR – although unconnected with languages – is to order form buttons. (in fact, this is the only thing I’ve ever used LTR for!)

If you have a Confirm and a Cancel button on a form, the first button will be the default action (i.e. if you press Enter). But using LTR, you can switch their display order – so, you could have the Cancel button appear first, but still have the Confirm button be the default…

I put this article in my toolbox because it’s a must-have for the problems of internationalization that we do not necessarily think it is thought rather to problems such as dates.

When I worked in Amdaeus (Global travel distribution system), I had already heard of some problems of internationalization, and this article clearly outlines the problems and simple solutions. Thanks !

Relevant: HTML5 introduces a new <bdi> element. It can be used to isolate text from its surroundings for bidirectional text formatting.

There already was a similar <bdo> element before. The difference is that <bdo> is for when you know the direction of the text; <bdi> is for when you do not.

For more information, see Anne van Kesteren’s article on HTML5 and bidirectional text.

This is really great article, I work on RTL (Arabic) website, and I just got new tips and tools to help me for the next job.
One thing that might be useful for someone is the code I use for Telephone numbers with there are spaces between numbers:
<span style=“direction:ltr;unicode-bidi:embed;”> +123 (45) 678-9012
</span>
As numbers should always read from left to right even in Arabic.

Thanks everybody for contributing extra tidbits. They’re a huge help to anybody having to deal with developing bidi interfaces.

Great article! I thought about this problem before, but I never thought about the flipped images (kind of important).
It made me think a lot about accessibility with the use of translators. Try to use Google Translate or Microsoft Translator for an entire page (like aljazeera.com or aljazeera.net) from/into Arab: sometimes floats and text align change along with the direction property, which would be great, but this doesn’t always happen: the design, the accesibility and the usability broke.
By the way: I don’t know how, but reading the original article from feedly (on my Android phone), the whole article is rtl. I tried from other feed readers, but it is the only one to behave like that. Seemed like an easter egg, but now I think it is more of a bug.