RTL and Persian UX: Building Interfaces That Feel Native, Not Mirrored
RTL is more than direction: rtl on html. Typography, numbers, icons, and component libraries need intentional design for Persian users.
Ali Mortazavi
Founder, Paradise Code
Foundation: dir, lang, and Logical Properties
Set html lang='fa' and dir='rtl' at the root. Use logical CSS — margin-inline-start, padding-inline-end, border-inline — so components flip correctly without duplicate RTL stylesheets.
Tailwind v4 and modern libraries support logical utilities. Avoid hard-coded ml- and mr- pairs that double maintenance.
Test both RTL and LTR if you ship bilingual products. Locale switch should update dir, font stack, and formatted dates together.
Typography and Readability
Persian needs proper font choice — Vazirmatn, IRANSans, or brand-licensed faces — with weights for headings and body. System fonts often lack glyph quality for فارسی.
Line height and letter spacing differ from Latin. Body text around 1.7–1.8 line-height often reads better for Persian paragraphs.
Hyphenation and justification: avoid justified Persian blocks on narrow mobile; uneven spacing hurts readability.
Numbers, Dates, and Mixed Content
Decide policy for Eastern Arabic numerals versus Western digits in prices and phones. Be consistent; mixing without rules confuses scanning.
Use Intl.DateTimeFormat and Intl.NumberFormat with fa-IR locale. Store ISO dates in data; format at display.
Mixed LTR inside RTL — URLs, emails, codes — use unicode-bidi isolate or dir='ltr' spans so strings render in correct order.
Icons, Imagery, and Layout Psychology
Mirror directional icons — back arrows, chevrons indicating forward — but not symmetric icons like search or close. A simple allowlist prevents wrong flips.
Marketing imagery with text may need RTL-specific assets; auto-mirror photos with embedded English text looks broken.
Primary actions remain where users expect after local testing; do not assume mirrored LTR patterns always map to RTL mental models.
Components and Libraries
Verify UI library RTL support — HeroUI, MUI, Radix-based kits — before committing. Popovers, modals, and sliders are common failure points.
Forms: labels above or beside fields with clear tab order. Error messages in Persian, associated with aria-describedby.
Tables align numbers on the left or use tabular-nums for comparison; headers stay readable with sticky support in RTL.
QA and Cultural Fit
Native speaker review for microcopy — not only grammar but tone. Formal شما versus informal تو affects trust in B2B versus consumer apps.
Automated visual tests in RTL catch layout regressions. Manual pass on real Android and iOS devices for input methods and keyboard.
RTL Persian UX succeeds when direction, typography, and mixed content are engineered, not auto-flipped from an English template. Paradise Code ships Persian products that feel local because we test with real users and real content early.
Insights
Need these ideas implemented in your product?
Paradise Code supports you from consult to full delivery.