Learn about bidi text, Unicode characters, HTML/CSS controls, and UI implementation
Basics of Bidirectional Text and Unicode
What is Bidirectional Text?
Bidirectional (bidi) text contains both left-to-right (LTR) and right-to-left (RTL) text. Languages like Arabic, Hebrew, and Persian are written RTL, while English and most European languages are LTR.
Example 1: Mixed Text Direction
Try editing the text below to see how Arabic and English mix:
Hello مرحبا World عالم 123
Hello مرحبا World عالم 123
Unicode Bidi Characters
Unicode provides special invisible characters to control text direction:
LRM (U+200E): Left-to-Right Mark
RLM (U+200F): Right-to-Left Mark
LRE (U+202A): Left-to-Right Embedding
RLE (U+202B): Right-to-Left Embedding
LRO (U+202D): Left-to-Right Override
RLO (U+202E): Right-to-Left Override
PDF (U+202C): Pop Directional Formatting
LRI (U+2066): Left-to-Right Isolate
RLI (U+2067): Right-to-Left Isolate
FSI (U+2068): First Strong Isolate
PDI (U+2069): Pop Directional Isolate
Example 2: Using Directional Marks
See how RLM and LRM affect the display of mixed content:
اتصل +972-123-4567 الآن
اتصل +972-123-4567 الآن
Example 3: Bidi Isolates (LRI, RLI, FSI)
Isolates prevent text from affecting surrounding content:
The title is "مرحبا World" in the document.
The title is "مرحبا World" in the document.
Bidi Controls in HTML and CSS
HTML dir Attribute
The dir attribute specifies text direction:
dir="ltr" - Left-to-right
dir="rtl" - Right-to-left
dir="auto" - Automatic detection based on first strong character
Example 4: The dir Attribute
Change the dir attribute to see its effect:
Hello עולם مرحبا World 123!
HTML Bidi Elements
<bdo> - Bidirectional Override (requires dir attribute)