Welcome
This is a demo interface that adapts to text direction.
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-rightdir="rtl"- Right-to-leftdir="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)<bdi>- Bidirectional Isolate (auto-detects direction)
Example 5: <bdi> Element
The <bdi> isolates usernames to prevent affecting surrounding text:
User مستخدم123 posted 5 comments.
CSS direction and unicode-bidi
CSS properties for controlling text direction:
direction: ltr | rtlunicode-bidi: normal | embed | bidi-override | isolate | isolate-override | plaintext
Example 6: CSS Properties
Experiment with CSS direction and unicode-bidi:
Hello مرحبا 123 World عالم
Bidirectional Text in Web User Interfaces
Common UI Challenges
When building multilingual UIs, consider:
- Input fields with mixed content
- Lists and tables with RTL data
- Navigation menus and buttons
- Icons and text alignment
- Form validation messages
Example 7: Form Input with dir="auto"
Input fields should adapt to the user's language:
Type something above...
Example 8: User List with Mixed Names
Displaying user-generated content safely:
- John Smith - joined today
- أحمد محمد - joined today
- Sarah Cohen - joined today
RTL Layout Considerations
When building RTL interfaces:
- Mirror layout: sidebars, navigation, icons
- Use logical properties:
margin-inline-start,padding-inline-end - Don't mirror: media controls, progress bars, charts
- Test with actual RTL content, not reversed LTR text
Example 9: Full RTL Interface
Toggle between LTR and RTL layout:
My Application
Best Practices
- Use
dir="auto"for user-generated content - Use
<bdi>for untrusted or dynamic content - Test with real RTL languages (Arabic, Hebrew, Persian)
- Use CSS logical properties for automatic mirroring
- Declare document language with
<html lang="..."> - Avoid hardcoding text direction in JavaScript