Styling Right-To-Left Text with CSS on a Multi-Lingual Site

by Jonathan Longnecker

We recently had the pleasure of working with CD Baby creator Derek Sivers on a new project called MusicThoughts. It’s a great collection of quotes from musicians on everything from the music industry to life in general. In short, pretty kick-awesome! Go check it out already!

This was a challenging project from start to finish. First of all, we couldn’t modify the HTML at all, only the CSS. And second was the support for multiple languages. 10 to be exact! This had several ramifications:

  • Every piece of text had to be editable. For a design that was going to be largely photographic in nature, this was a huge challenge.
  • Different languages take up different amounts of space, so the room we alloted for every bit of text, even the name of the site and navigation, had to shrink and grow appropriately.
  • Some languages, like Arabic read from right to left. Holy crap! That changes everything about your design!

Music Thoughts comparison

And it’s the last point I wanted to explore a bit more. You see, for languages that read from right to left there’s a dir="rtl" attribute that we can tie into with CSS so we can target it and style appropriately. Mr. Sivers put his on the html element:

<html xmlns="" xml:lang="ar" dir="rtl">

So for instance, the navigation got all messed up when it was text-aligned right. All we have to do is target it with CSS and make minor modifications:

html[dir="rtl"] #navigation {
float: right;
display: inline;
margin-left: 0px;
margin-right: 360px;

And that’s it! Rinse and repeat for the affected areas. Believe it or not, this targeting seems to be supported by all the major browsers (unheard of, I know!) so try it out on your next multi-lingual site and see how awesome it is.

March 06, 2009

Design, Tutorials


  1. Really interesting post guys. I am in the early stages of a project that could require a multi-lingual approach, the technique you’ve outlined will definately come in handy.

    Just one question for you though, i noticed the following code in the head


    Does that automatically change the language of a page or did you have to translate each page manually?

    Apologies if thats a stupid question but i am intrigued, thanks

  2. @David - Not a stupid question at all! I believe Derek is paying translators for each quote actually, but he’s using some kind of system to switch between languages (not sure what it is as we never got access to the server for this project). So basically the xml language is switching through that system. I’ll check with him and see what he’s using.

  3. Hey David, just talked to Derek. He built his own translating system, but he said it’s pretty similar to others out there. You can catch him at to find out more.

  4. Nice trick indeed.  But it doesn’t work in Internet Explorer 6 for those of us who still want to support that piece of crap:

    Congrats for the very good idea.

  5. liked the post…

    but rather than just flipping the text content ... you should try n mirror the design…  so on your right to left design ... pencil should be on right hand side and cup and menu on left…

  6. @hanz why? That would double the size of the site; you’ d have to make two versions of every image for each direction. Seems like a lot of unnecessary work.

  7. Regarding hanz note about mirroring the whole layout for RTL languages: it makes a lot of sense because people that learn a RTL language as their first language tend to scan the page from right to left, so all assumpions on where to put navigation elements change accordingly.

    As a matter of fact a lot of bilingual arabic sites do switch all the layout when switching languages

  8. @Roberto Fair enough, but this particular layout could work either way. Sidebars often go on the left or right. Almost everything else is mirrored (cup vs. brush). There is method to the madness wink

  9. nice and thanks for this tut

  10. Great website, one of the best I’ve seen for a while.

    Really useful tips, I’m in the middle of building an arabic website, you’ve just made it a lot simpler to build.  Thanks.

  11. Hi Jonathan,
    I had a quick question. I’m in the process of adding Arabic as a language option to my ecommerce website and was wondering if there was a way to trigger LTR display (aligning text to the right) automatically when a user selects Arabic from the available options. I don’t have enough CSS knowledge to know if this is possible and any thoughts would be much appreciated. I’m using corecommerce.

  12. @Mohammad You’d have to set the direction in the HTML first via some javascript or something - then you have styles for both left and right in your CSS.

  13. @Jonathan Longnecker

    Just saw that. Thanks!

  14. Thank you!!! This was the information I was looking for. I’m in the middle of multilingual project including the arabic… and this information really clears all my doubts!


  15. Nice read! I really forgot that I could use [dir=“rtl”]. Otherwise I agree with some of the guys who say that you need to redesign a bit. Of course not for this specific case - it looks ok, anyway.
    Float has to be changed here and there. Text-align has to be changed.
    If there are elements with :before, it has to be changed to :after and margin-right has to be margin-left - all depends on the case. Overall it’s not one line solution if we talk about more complex web sites.

  16. I just don’t remember which format do we have to use for arabic characters utf-8 or unicode I tried both but still geting ??????? as a result

  17. Thanks for this very useful tip.

  18. Hello,

    Thanks a lot for this great post. Recently, I’ve been working on a project that requires English and Arabic support. Changing the direction of the page to RTL has proven to be very challenging.

    I was able to change the direction of the text to be RTL using the dir tag. However, the other elements on the page such as: columns, menu items and others remained in the LTR direction. Any ideas how I can change the direction of all the elements on the page not just the text.


  19. @Leena If you read above you can see how to use the dir=“rtl” tag in your CSS to make pretty much any modifications you’d like. Just switching the tag won’t properly align the text and mirror the design. You’ll have to do all that manually in your stylesheets.

Behold our Amazing Portfolio

Check it Out