Right-to-Left (RTL)
Text direction for languages like Arabic, Hebrew, and Persian that read from right to left.
Definition
Right-to-Left (RTL) refers to languages where text is written and read from right to left. Major RTL languages include Arabic, Hebrew, Persian (Farsi), and Urdu. Supporting RTL requires more than just text direction—UI layouts must be mirrored: navigation moves to the right, icons flip, and alignment changes. Modern CSS provides logical properties (inline-start/inline-end) to handle this elegantly.
Examples
- →Setting dir='rtl' on the HTML element for Arabic
- →Using CSS logical properties: margin-inline-start instead of margin-left
- →Flipping chevron icons: → becomes ←
- →Navigation bar moves from left to right side
Frequently Asked Questions
Do I need separate layouts for RTL?
Not necessarily. Use CSS logical properties (margin-inline-start, padding-block-end) instead of physical properties (margin-left). With CSS logical properties, the same CSS works for both LTR and RTL—the browser handles the flip.
What about mixed LTR/RTL content?
This is called bidirectional (bidi) text. Use the Unicode Bidirectional Algorithm (handled by browsers) and mark embedded LTR text with <bdo> or dir attributes. Numbers and embedded English in Arabic text need proper handling.