Left to Right vs. Right to Left

As you may know the Arabic language is written from right to left in reverse of Latin and Cyrillic languages and in the web that means you must change the look of the page for that subset of users coming to your site.

One of the main problems are with web forms. Usually we use something like label:input pairs:

label: <input type="text" />

but when it comes to Arabic version it should be turned into:

<input type="text" /> : label

and that’s quite tricky!

The easiest way for me!

Well I simply wrap that chunk of code into a table. That helps me manage the direction with the CSS direction:rtl like so:

1
2
3
4
5
6

<table>
 <tr>
  <td>Label:</td>
  <td><input type="text" /></td>
 </tr>
</table>

When it comes to the Arabic version it can be translated with the simple:

1
2
3
4
5
6

<table style="direction:rtl;">
 <tr>
  <td>Label:</td>
  <td><input type="text" /></td>
 </tr>
</table>