FortySeven Media

Jonathan Longnecker

Jonathan Longnecker

March 06, 2009

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

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.

P.S. – If you want to learn how to create a more profitable web shop check out Freakishly Profitable. It's the best way to make a "monster" adjustment to your web studio's bottom line.

Share the Love

Comments

  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

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

    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!

    Mauricio

  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.

Leave Your Thoughts Behind

Remember my personal information