Recipe

Recipe: RTL (Arabic/Hebrew) design checklist

Ship bidirectional layouts that feel native in every script.

Direction scaffolding

  • Set dir="rtl" on the root <html> tag.
  • Use logical properties: margin-inline-start not margin-left.
  • Tailwind ltr:ml-4 rtl:mr-4 for direction-specific overrides.

Typography & mirroring

  • Set lang attribute for correct font fallback and ligature shaping.
  • Icons that imply direction (arrows, progress) must flip.
  • Text alignment defaults to start; avoid hardcoding left/right.

Layout & interaction

  • Flexbox and Grid respect dir automatically — no extra work needed.
  • Swipe gestures and carousels must reverse their default axis.
  • Form fields: labels on the right, input text right-aligned.

Testing

  • Toggle dir in DevTools and scan every viewport.
  • Test with real Arabic/Hebrew placeholder strings — not just reversed Latin.
  • Check number formatting, date pickers, and input masks.
← Back to docs