An Arabic version of your site is not an English page with the text aligned right — every navigation item, icon, grid and form flow must reverse direction. This practical RTL website design checklist covers what to mirror, what to leave alone, Arabic typography, numerals and AED pricing, mixed-direction text, RTL forms and pre-launch testing, built for UAE businesses.
What should you mirror in an RTL layout — and what should you leave alone?
Mirror: navigation menus, breadcrumbs, back/forward buttons, grid columns, form field order, carousels and progress indicators. Leave alone: logos (unless the mark itself is directional), media player controls, clocks, phone number input order, and code snippets.
How do you handle Arabic typography on the web?
Use fonts designed for Arabic script (not system fallbacks with mismatched x-heights), set generous line-height for tall glyphs and diacritics, never use faux-bold or faux-italic on Arabic, and test rendering on real devices — Arabic shaping bugs are invisible in Latin-only QA.
How do you display numerals and AED pricing in Arabic layouts?
Decide per audience: Western digits (0–9) with AED are common in UAE commerce, while Eastern Arabic numerals suit formal or government-adjacent content. Never mix numeral systems on one page, and always test price strings like "AED 1,299" in both directions.
What is the RTL pre-launch testing checklist?
- Full-page screenshot review in Arabic on desktop and mobile — look for unmirrored icons and overlapping text.
- Form completion test: fill every form right-to-left with Arabic data, including phone numbers and addresses.
- Mixed-direction strings: product names, SKUs, phone numbers and prices render correctly.
- Checkout end-to-end in Arabic, including payment gateway pages and confirmation emails.
- Screen-reader pass with lang="ar" and dir="rtl" set correctly.
This checklist covers the Arabic side of the layout; the planning decisions behind running both languages on one site — URL structure, translation scope and which pages to build first — are covered in our guide to bilingual website design in English and Arabic.
Frequently asked questions
What is RTL website design?
Designing layouts that flow right-to-left for Arabic (and Hebrew, Persian, Urdu) readers — mirroring navigation, grids, icons and forms, not just aligning text right.
Should I mirror my logo for an Arabic site?
Usually no — keep the logo as-is unless the mark itself implies direction. Mirror everything around it.
How do phone numbers work in RTL forms?
Keep the +971 number in logical order (left-to-right within the field) using bidi isolation, so digits never scramble.
What is the biggest RTL mistake UAE sites make?
Machine-translated copy pasted into a mirrored template with no Arabic QA — broken typography, scrambled numbers and untranslated checkout steps.
Conclusion
RTL website design is a full layout discipline: mirror what flows, leave alone what does not, set Arabic typography properly, handle numerals and AED pricing deliberately, and test every form and checkout in Arabic before launch.
