RTL Guidelines
Best practices for building RTL-first interfaces that work seamlessly in both left-to-right and right-to-left languages.
Core Principles
- Use Logical Properties:
Always use start/end instead of left/right for margins, padding, and positioning
- Test Both Directions:
Always test your UI in both LTR and RTL modes during development
- Mirror Directional Icons:
Navigation and directional icons should flip in RTL
- Respect Language Direction:
Content flow should follow the natural reading direction
1. Logical Properties
The foundation of RTL-first development is using logical CSS properties:
Avoid
ml-, mr-, pl-, pr-, left-, right-Use
ms-, me-, ps-, pe-, start-, end-2. Flexbox & Grid
Flexbox and Grid automatically respect direction changes:
3. Icon Mirroring
Directional icons should mirror in RTL, but symbols should not:
Icons to Mirror
- • Arrows (forward, back, next, previous)
- • Navigation icons
- • Directional indicators
- • Chevrons in sequential contexts
Icons to NOT Mirror
- • Symbols (settings, search, user, etc.)
- • Media controls (play, pause)
- • Brand logos
- • Universal symbols
4. Text Alignment
Use logical text alignment classes: