Using a CSS File for site localization

Question

I'm creating a website with ASP.net MVC 2.0 which uses two different languages (English and Persian). I want to have two different layouts for these languages, English has a left to right and Persian has a right to left layout.

What came to my mind was, if I could have two different css files, like when you do it with string or image localization will do the work for the site, the problem is I need to know how to do this!

Any other suggestions on how to perform this would be helpful.

Answer 1

You can read about:

• (W3C) Internationalization Best Practices: Specifying Language in XHTML & HTML Content,
• Creating HTML Pages in Arabic, Hebrew and Other Right-to-left Scripts,
• Internationalization and localization (Wikipedia).

In your pages:

• every image with text should be translated (image and alt); every image with directionality should be reversed (ex: an arrow)
• try to avoid class naming like class="left" if you don't want future headaches. Top, bottom, before or after are OK but not left/right (edit: start and end are now used in CSS3 to avoid this exact problem of ltr and rtl. May be better than *-before and *-after already used for pseudos with colons).
• you'll have to check each CSS instruction about text-align, background-position, float, clear and obviously left and right with position: absolute/relative;. New CSS3 instructions are to review too (Animations, etc).
• different fonts need different font sizes (though this problem concerns asiatic fonts mainly)
• as for any other supported language, many bits of text in templates should be translated.

As noted in the links above, the HTML attribute dir="rtl" is used. You'll also need a class (on body or some containing div to act like a giant switch for your design needs. Like

.en .yourclass { background: url(images/en/bg.jpg) } 
.ar .yourclass { background: url(images/ar/bg.jpg) }

The attribute selector does the same, since IE8 included.

:lang(ar) .yourclass { background: url(images/ar/bg.jpg) }
or
[lang|="ar"] .yourclass { background: url(images/ar/bg.jpg) }