Intended Audience:  Anyone who faces problem in designing layout for RTL WebPages while working on internationalization.

Websites are of many kinds.

1. Developed in a specific language for specific region of people
2. Developed for many people for any culture, target is any region of people.

The target of later kind of sites is to make so many numbers of people.  But if a site wants to increase number of people it has to be developed in such way so that it should also be easy for user to use irrespective of their style of looking the site.

The site should be developed in such a way so that it is easy for users to use irrespective of whether they see it left to right or right to left. For all this CSS standard is devised to maintain the site.

The Magic property:

‘dir’ or ‘direction’  – As its name is there ‘dir’ or ‘direction’ is the direction in which website should be rendered. It has four attributes. The most usable is ‘rtl’ and ‘ltr’. Both the behaviors specify the browser that how it is going to take input or render the page.

Above was the specification of property. Now I want to come to the point where the rtl is the most popular and must be used.

In many languages the text is written ‘right to left’ for example ‘Arabic’, ‘Hebrew’, ‘Persian’, ‘Urdu’ and many more. For the websites whose target is the speakers of those languages it is necessary for them to use this property in their site.

How to use this magic behavior in page:

For allowing whole site to be rendered from right to left, You just need to add this magic property and behavior in your body tag css:-

body{

/*

your properties

*/

direction : rtl

}

Using this method render everything from ‘left to right’ on your site to ‘right to left’. But this applies only to the texts which are written ‘right to left’. 

Example:

If your website includes multiple language texts (for example English as well Arabic on same page) using ‘direction: rtl’ has some limitations.

Limitations using ‘direction:rtl’ for Multilanguage sites :-

Sometimes when ‘direction:rtl’ is applied to Multilanguage page it appears like as below:

As you can see the problem is there due to special characters. So while showing the content is it necessary to escape special characters by adding some markup.

Left to right markup (`‎`) : 

‘‎’ is special character used to show left to right markup and thus if added just before the special character it considers it as left to right character only. This is normally prefixed with special characters in LTR text for rendering correctly with ‘direction:rtl’.

As you can see in above problem is resolved using ‎ in piture below:

 Right to left markup (`‏`) : 

`‏` is special character to show right to left markup and thus if added just before any special character, it considers it as  right to left character only. This is normally prefixed with special characters in RTL text for rendering correctly with ‘direction:rtl’.

Some special notes before planning for multi language sites:

Before you plan for a website which is to be rendered in multiple languages please consider before designing layout of the page.

1. Design of the layout should be simple and structured well.
2. Char set should be UTF-8 of website.
3. For SEO purpose always change title of page on change of language, for that particular language.
4. As the direction of website changes,  everything should be rendered right to left.
5. Avoid images having text which is to be shown in different languages, Or else you need to put different image for each language used in website.

Some tips for CSS :

1. For float:left  you should have different class if you apply on something so that while changing for css developer  has just to change behavior of class consisting of ‘float:left’ to ‘float:right’
2. Always use ‘direction:rtl’ in body tag for rtl language page, so that it will apply to all the content of page.
3. If somewhere in design some area need different direction that may be set to the particular direction.

This article has been written by Amit Sharma - working at Siddhatech Software Services as a Sr. Web Developer