What RTL means
Languages like Arabic and Hebrew read right to left. Their interfaces should mirror: text aligns right, the layout flows from the right, and directional icons flip.
Set direction, not just alignment
- Set the dir attribute to rtl on the html or a region. This flips text flow and default alignment.
- Browsers mirror many things automatically once direction is set.
Logical properties do the work
Replace physical properties with logical ones so styles adapt to direction.
- Use margin inline start instead of margin left.
- Use padding inline end instead of padding right.
- Use text align start instead of text align left.
These resolve to the correct physical side based on direction, so one stylesheet serves both LTR and RTL.
Watch out
- Bidirectional content like a phone number inside Arabic text needs care so digits stay readable.
- Not everything flips. Logos, media controls, and progress can stay as is.
Key idea
RTL support means setting dir and using logical properties so the layout mirrors automatically, while leaving non directional elements alone.