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!
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 This Entry with Your Favorite Social Networking Sites.@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.
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.
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.
Live Preview
Blog
Categories
Recent Articles
- Visual Recipes Design Process
- Use ImageSizer to Scale Lightbox Gallery Images in ExpressionEngine
- Three Years and Thank You’s
- DesignersMusic.com: Find & Share Great Music with Other Designers
- What Happens When We Try to Make a Video
- archives
Popular Articles
BestChristianDesign is helping give churches inspiration for their next project. Good call, guys.
Seth Godin reminds us to enjoy and take advantage of the uphills.
Stop announcing your new project. Just do it.
Rock and Roll people, Rock and Roll.
To all you staff designers out there, here’s a link for you. (via @ryanlascano)
Fascinating look into the music business.
Derek Sivers posts some great advice about balancing your life.
Troy McNeil
Things I Said
Late night run to the grocery. Not enough hours in the day!
Javascript makes Instant Messanger sad. http://twitpic.com/17lqzl #javascript #codegonewrong
ExpressionEngine
The best Content Management System for designers. Feature rich, completely customizable, and easily extendable.
Basecamp
Basecamp is the smarter, easier, more elegant way to collaborate on your internal and client projects.
David Cameron Walker
March 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