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="http://www.w3.org/1999/xhtml" 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

Comments

  1. 1

    David Cameron Walker - Mar 17, 2009

    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

    xml:lang=“ar” 

    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. {screen_name}

    Jonathan Longnecker - Mar 17, 2009

    @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. {screen_name}

    Jonathan Longnecker - Mar 17, 2009

    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 http://sivers.org/ to find out more.

  4. 4

    William Lovaton - Oct 12, 2009

    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:
    http://www.quirksmode.org/css/contents.html
    http://www.quirksmode.org/css/selector_attribute.html

    Congrats for the very good idea.

  5. 5

    hanz - Oct 05, 2010

    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. {screen_name}

    Jonathan Longnecker - Oct 05, 2010

    @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. 7

    Roberto Maurizzi - Dec 07, 2010

    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. {screen_name}

    Jonathan Longnecker - Dec 07, 2010

    @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. 9

    ahmed - Nov 14, 2011

    nice and thanks for this tut

  10. 10

    Miguel Perez - Jul 05, 2012

    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. 11

    Mohammad - Oct 01, 2012

    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. {screen_name}

    Jonathan Longnecker - Oct 01, 2012

    @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. 13

    Mohammad - Nov 26, 2012

    @Jonathan Longnecker

    Just saw that. Thanks!

  14. 14

    Mauricio - Jun 25, 2013

    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!

    Mauricio

  15. 15

    Yasen Vasilev - Nov 07, 2013

    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. 16

    Samer - Dec 09, 2014

    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. 17

    Amr - Mar 29, 2015

    Thanks for this very useful tip.

  18. 18

    Leena - Sep 06, 2015

    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.

    Thanks

  19. {screen_name}

    Jonathan Longnecker - Sep 07, 2015

    @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