Multilanguage UTF-8 website with Arabic

I will be coding a website that will have Arabic as a supported language. With UTF8 unicode I believe I can cover Arabic alphabet. I've also read that it reads right to left so I guess I should align right when displaying on Arabic.

I'm asking the community for experience and possible pitfalls.

utf-8 unicode
css selector to swith text alignment

Thank you in advance for your input.

回答1:

Reading http://www.w3.org/International/tutorials/bidi-xhtml/ and http://en.wikipedia.org/wiki/Internationalization_and_localization 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) }

回答2:

I've also read that it reads right to left so I guess I should align right when displaying on Arabic.

That's not enough, the direction must also be set as rtl (right-to-left). What you need is:

  direction: rtl;
  text-align: right;

回答3:

This is a good resource for declaring language in HTML.