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 unicode.org/reports/tr9/ 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.
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.
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 unicode.org/reports/tr9/ 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
<p dir="ltr"><bdi>خالد</bdi>@<bdi>الدوحة</bdi>.<bdi>قطر</bdi></p>
displays the address as
خالد@الدوحة.قطر
The html code
<p dir="rtl"><bdi>خالد</bdi>@<bdi>الدوحة</bdi>.<bdi>قطر</bdi></p>
displays the address as
<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.
