Reading http://www.w3.org/International/tutorials/bidi-xhtml/ and http://en.wikipedia.org/wiki/Internationalization%5Fand%5Flocalization could be useful.
Some things I can think of:
- your choice of colors and images could prove offensive or bad taste in some countries
- 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 I think but not left/right.
- you'll have to check each CSS instructions about text-align, background-position, float, clear and obviously left and right with position: absolute/relative;
- 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.
By "css selector to swith text alignment", do you mean dir="rtl"
? This is an HTML attribute. But you'll still need a class ('ll be fine on the body element) 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) }
edit: an attribute selector would do the same but then there are those bad ol' IE ...
:lang(ar) .yourclass { background: url(images/ar/bg.jpg) }
or
[lang|="ar"] .yourclass { background: url(images/ar/bg.jpg) }