Multilanguage UTF-8 website with Arabic

StackOverflow https://stackoverflow.com/questions/1780656

  •  21-09-2019
  •  | 
  •  

Question

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.

Was it helpful?

Solution

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) }

OTHER TIPS

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;

This is a good resource for declaring language in HTML.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top