Sunday, 13 March 2016

Arabic Email Addresses

Most human language scripts are written from Left to Right (L➡︎R). Arabic is written Right to Left (L⬅︎R). An email address written in the Latin script would be displayed L➡︎R — username@domain-name. An Arabic email address, on the other hand, would normally and without intervention be displayed L⬅︎R as domain-name@username.

Letʼs take a fictitious Arabic email address — خالد@الدوحة.قطر
  • خالد is the username Khalid
  • الدوحة is the 2nd level domain name Doha
  • قطر is the Top Level Domain (TLD) Qatar. This part is not fictitious as قطر is a valid ccTLD.
Your browser should be displaying the email address خالد@الدوحة.قطر in L⬅︎R order which is not an order familiar to most L➡︎R readers and so requires some effort to parse.

When text has mixed L➡︎R and L⬅︎R characters it is referred to as Bidirectional (bidi) text. There is a complex Unicode algorithm specifically to determine  display order of bidi text If you read this report you will see something called Directional Isolates.

In the html world there are tags and attributes specific to bidi. One such tag is <bdi> which is bidi isolate. Using such html bidi isolation one can incorporate Arabic email addresses that are natural to read for both L➡︎R and L⬅︎R readers. These addresses can be written such that their overall text direction adheres to the text direction of the context. This context may be the direction of the whole html document or some subpart such as a paragraph.

First we will setup our html with a L➡︎R context for L➡︎R readers. The below paragraph (p) is setup with dir (direction) to ltr (left to right). The email address has 3 components: username, 2nd level domain name and TLD. Each component is direction isolated. This gives an email address whose overall direction is L➡︎R. The text of each component is, as it should be, L⬅︎R. I posit that this is much easier for a L➡︎R reader to comprehend. It is now obvious, for instance, to determine which is the username and which is the TLD.

The html code
<p dir="ltr"><bdi>خالد</bdi>@<bdi>الدوحة</bdi>.<bdi>قطر</bdi></p>
displays the address as

But how will the address be displayed if the context is changed to rtl (right to left). The code correctly displays the whole address in L⬅︎R order, both overall direction and text direction of each component. Thus we have also catered for L⬅︎R readers without changing relevant address display html code.

The html code
<p dir="rtl"><bdi>خالد</bdi>@<bdi>الدوحة</bdi>.<bdi>قطر</bdi></p>
displays the address as

Just in case your browser cannot, as yet, handle bidi isolates here are the 2 contexts in image format.