// Design & engineering
Arabic (RTL) website checklist: what to review before launch
//2 min read
Short answer
An Arabic website needs more than translated text: the page direction, layout, forms, numbers and fonts all have to work right-to-left. A quick test is to ask whether each screen was designed for Arabic from the start, or only mirrored from an English version.
Set direction and language correctly
The page should declare dir="rtl" and lang="ar" on the root element, so browsers, screen readers and search engines treat the text as Arabic. For a site with both languages, link the Arabic and English versions with hreflang and give each its own canonical address.
Build the layout with logical properties
Instead of margin-left and padding-right, use CSS logical properties such as margin-inline-start and padding-inline-end. They follow the reading direction, so one stylesheet works in both Arabic and English without a second, mirrored copy.
What to mirror and what not to
Mirror the things that express reading order; leave alone the things that do not:
- //Mirror: navigation order, back and forward arrows, progress indicators, sliders and carousels
- //Do not mirror: logos, photographs and video playback controls
Mixed Arabic and English text
Brand names, emails, URLs and phone numbers inside an Arabic sentence can end up with misplaced punctuation. Mark them as left-to-right (dir="ltr" or the bdi element) so they keep their own direction without breaking the sentence around them.
Numbers and currency
Choose one numeral style, Western digits (0-9) or Arabic-Indic digits (٠-٩), and use it everywhere: prices, dates, phone numbers and forms. Mixing them in one page looks careless and confuses users. Do the same for the currency label.
Fonts and typography
Arabic needs more care than simply switching the font:
- //Pick a font with full Arabic support and several weights, for example Cairo or Tajawal
- //Give lines more height than you would for Latin text
- //Never add letter-spacing to Arabic: it breaks the joining between letters
Forms
Email, phone and URL fields should stay left-to-right even in an Arabic form, so what the user types is not scrambled. Write validation messages in Arabic, use proper autocomplete values, and design address fields for Egyptian governorates and districts rather than a foreign format.
Search and data
Arabic users type the same word in several spellings: different forms of alef, ya and ya-without-dots, ta marbuta and ha, with or without diacritics. Normalise text in search so people find what they mean, not only what they typed exactly.
Test like a user
Review every template on real phones, have a native speaker read the copy, and check printed pages and PDF invoices, which are often forgotten. Most RTL problems are found by looking, not by code review.