Multilanguage sites: Left-to-right and right-to-left

Question

I see some good suggestions in SO for creating multilanguage websites in JavaScript including this article on JavaScript internationalization. However, I am finding it more difficult to determine best practices for developing multilanguage websites where one of the languages is read left-to-right and another is read right-to-left. Do you know any best practices for this task?

The user may change language mid-stream - perhaps from English to Arabic.

score 1 · Accepted Answer · answered Jan 31 '10 at 17:50

1

A good practice would be to use the lang attribute to describe which language is being used: http://www.w3.org/TR/REC-html40/struct/dirlang.html

I would define the language within the Head, and if necessary locally within the document.

You don't mention which doctype you are using, but if you are using XHTML then there are also xml lang attributes to consider: http://www.w3schools.com/Xhtml/xhtml_syntax.asp

I don't know if it is 'best practice', but when I worked on an english and arabic site recently I found it useful to use CSS classes for setting rtl and ltr.

answered Jan 31 '10 at 17:50

paulhhowells

321
3
11

Is the site you created online? – Upperstage Feb 02 '10 at 13:59
@Paul H Howells: did this worked ever ? For me never worked, nor the texts from right to left nor the markup. – Jan 03 '11 at 15:14
@Stackfan: what did you try that did not work as you wanted? I was suggesting two useful things to do: 1) mark up the document semantically i.e. add attributes to the markup that describe it as Arabic or English. and 2) change – paulhhowells Mar 05 '11 at 17:37
the appearance of the web page using CSS. e.g. .rtl {direction:rtl; text-align:right;} combined with some xhtml mark-up like this:
This approach certainly worked for me, allowing for Arabic and English versions of a page that were optimised for each language. For example, in the Arabic version the text flowed correctly in the right direction, justified to the right, and I also moved a (floated) Navigation Column to the right for the same design reasons that the Nav was on the left in English.
– paulhhowells Mar 05 '11 at 17:56
I also found that utf-8 worked okay for me, just make sure you have given some thought to the encoding. – paulhhowells Mar 05 '11 at 18:07
@Paul H Howells: Yes are you correct. It just works exactly like you explained. – Mar 08 '11 at 09:21

score 0 · Answer 2 · edited May 23 '17 at 10:34

I also found a lack of information regarding best practices for a RTL site.
Here are some things, along with the lang attribute (mentioned above) that I have stumbled across:

dir attribute - tells the browser which direction the text/table cells/etc. should flow from
Arabic Lorem Ipsum Generator
From the UX Side of things: Design Principles
Another SO Question, concerning fonts
Also note that with animations, they may not make sense sliding or swiping if someone is viewing it RTL vs. LTR.

Multilanguage sites: Left-to-right and right-to-left

2 Answers2