FortySeven Media

Jonathan Longnecker

Jonathan Longnecker

March 06, 2009

Design Tutorials

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.

Share the Love

FortySeven Media
Did you know?

Besides designing websites, FortySeven Media also makes the Kick Awesome Show and is currently working on Kicktastic - a project to tell you how we’re making more money. Sign up if you’re interested.

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

    Quote Reply

  2. {screen_name}

    .(JavaScript must be enabled to view this email address)

    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.

    Quote Reply

  3. {screen_name}

    .(JavaScript must be enabled to view this email address)

    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.

    Quote Reply

  4. 4

    .(JavaScript must be enabled to view this email address)

    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.

    Quote Reply

  5. 5

    .(JavaScript must be enabled to view this email address)

    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…

    Quote Reply

  6. {screen_name}

    .(JavaScript must be enabled to view this email address)

    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.

    Quote Reply

  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

    Quote Reply

  8. {screen_name}

    .(JavaScript must be enabled to view this email address)

    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

    Quote Reply

  9. 9

    .(JavaScript must be enabled to view this email address)

    Nov 14, 2011

    nice and thanks for this tut

    Quote Reply

Leave Your Thoughts Behind

Remember my personal information