Quick tips on having Arabic web pages

  • Article

I’ve been busy on reviewing some Arabic webpages for the past two weeks. I thought the results might be interesting to share in this blog.

Let’s assume that you have some English pages and you need to produce the Arabic pages.

First step, send the text to do the translation. Set dir=”rtl” on the page level and watch out for the following points:

1- Some items are assigned fixed alignment. This enforces alignment irrespective of dir=”rtl”. Therefore we have to explicitly set the alignment to the opposite. We need to fix this in two locations

a. In the HTML files:

For example, replace align="left", with align="right" and vice versa, align="right", with align="left". The same applies to any alignment tag.

b. In the StyleSheet (eg. presentation.css)

Change text-align: left to text-align:right.

Note:   A better solution is to remove the alignment attributes altogether because the default in English is left-align and the default in Arabic, while dir=rtl is right-align.

2- Code samples should not be RTL. All code samples should be kept LTR. We can enforce dir=”ltr” to these items. For example, add dir=ltr for code samples.

<span dir=ltr>string s1 = "orange";

string s2 = "red";

s1 += s2;

System.Console.WriteLine(s1); // outputs "orangered"

s1 = s1.Substring(2, 5);

System.Console.WriteLine(s1); // outputs "anger"

</span>

3- A combination of English string and a neutral character is not displayed properly. For example "C#", ".NET Framework", "\n", mathematical operators… this case needs to have define a span of LTR string.

For example, replace:

· C# with <span dir="ltr">C# </span>,

· .NET Framework with <span dir="ltr">.NET Framework </span>

· Visual C++ with <span dir="ltr">Visual C++</span>

· <= with <span dir="ltr"><=</span>.. etc