Right-to-Left Text in Unicode: Arabic, Hebrew, and Beyond

Unicode supports writing systems that run right-to-left (RTL), including Arabic, Hebrew, Persian, Thaana, Syriac, and several others. Handling bidirectional text correctly—mixing RTL and LTR in a single paragraph—is one of the more complex challenges in internationalisation. Unicode's Bidirectional Algorithm provides a standard way to handle it, but the details trip up developers regularly.

The Bidirectional Algorithm

The Unicode Bidirectional Algorithm (UBA, Unicode Standard Annex #9) defines how a renderer should determine the display order of characters in a string that contains both LTR and RTL text. Every character has a Bidi_Class property: L (strong left), R (strong right), AL (Arabic letter—strong right), EN (European number), AN (Arabic number), and a dozen more weak or neutral classes. The algorithm resolves these properties to assign a visual order to each character.

The practical upshot: if you have an English sentence containing an Arabic phrase, the Arabic characters will be displayed right-to-left within the sentence, and numbers adjacent to them will resolve according to context. You can see a character's bidi class on its detail page—for example, U+0627 ARABIC LETTER ALEF has bidi class AL.

Bidi Control Characters

Unicode includes several invisible bidirectional control characters that let authors explicitly override the algorithm:

• U+200F RIGHT-TO-LEFT MARK (RLM): Strongly marks a position as RTL without displaying anything.
• U+200E LEFT-TO-RIGHT MARK (LRM): The LTR equivalent.
• U+202E RIGHT-TO-LEFT OVERRIDE (RLO): Forces all subsequent characters to display RTL until cancelled.

The RLO character has been abused in RTLO attacks: a file named photo_U+202Egnp.exe looks like photo_exe.png in a file manager that renders it—a dangerous trick used to disguise malware as image files. Explore these control characters further on the special characters page.

HTML and CSS for Bidirectional Text

In HTML, use the dir attribute (dir="rtl" or dir="auto") on block elements to inform the renderer. CSS provides direction: rtl and unicode-bidi: bidi-override for finer control. The dir="auto" value is particularly useful for user-generated content: the browser inspects the first strong directional character and sets direction accordingly.