This paper outlines some tips and hints for developers on adding better bi-directional (BiDi) support to their web applications. This will greatly enhance the applications support for right-to-left languages like Arabic.
The HTML specifications allows you to choose the direction of a webpage using the dir attribute. The dir attribute can be used in many tags (e.g.: p, div) but, most importantly, it can be used in the HTML tag where its effect is global.
If you have templates support or a configurations section, make sure that users can easily choose between left-to-right (ltr) and right-to-left (rtl).
<html dir="rtl">
Using absolute values for 'align' fields (common in table cells) makes converting pages to the opposite direction much harder. Even after using the dir attribute in the HTML tag, these hardcoded values will not be affected.
A common technique used by web authors to make their forms look better is to make fields opposite to their titles in a table. To achieve this, they align the titles to the right and the form fields to the left. This is the achieved effect:
| Username | |
| Real Name |
However, when the dir attribute is used to make the page right-to-left, the same form will appear like this:
| Username | |
| Real Name |
A similar problem also occurs in next/back navigation icons. It is very common to use a left directed arrow to denote next and a right directed arrow to denote back. This doens't apply to right-to-left languages as it is the opposite.
When designing web pages, make sure it is easy to exchange left and right in the webpage.
When makeing next/back arrows, don't call the image files 'next' and 'back'. Instead, call them 'right' and 'left'. Make it the designers choice as to which one is next and which one is back.
The easiest way to achive this is to have a template or a replacement variable that is called 'text-direction' and another one called 'opposite-direction'. The replacement variable 'text-direction' should contain 'left' in left-to-right languages and 'right' in right-to-left languages. In the same way, the replacement variable 'opposite-direction' will always have the opposite direction.
<td align="{text_direction}">
<img src="{opposite_direction}_arrow.gif" alt="back">
In some places, you don't want the global right-to-left to have its effect, like in code snippets and email message headers. These will always have an English syntax, so they should always be directed left-to-right. Make sure you have a hardcoded 'ltr' around them so they don't get missed up when designers use 'rtl' in the HTML tag.
<pre dir="ltr"> From: jsmith@example.com
Images are hard to change, especially if the general design of the website assumes a specific direction. A very common example is the tabs style used in a lot of websites lately (e.g.: in MSN websites).
Try to break your images into pieces and contruct them using HTML in a way that allow you to re-construct them later in the opposite direction. Make mirrored copies of the images that need to be mirrored for the opposite direction.
A quick solution can be provided using CSS. CSS has an option now that allows you to flip images horizontally on the client side. Just set the class attribute of the images you want to be flipped (your direction biased images) to 'directed' and drop these lines into your stylesheet:
.directed {
filter: FlipH;
}