Going Both Ways


Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

Ali Sattari

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.

Thierry Koblentz

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…

Seb Duggan

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…

Nicolas Chevallier

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 !

Wesam Alalem

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
As numbers should always read from left to right even in Arabic.

Stefano Boccuti

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.

Impress us

Be friendly / use Textile