A Bilingual Arabic/English (RTL + LTR) UX Checklist for Web Teams

Sites that serve the Gulf and the wider Arabic-speaking market often need to work equally well in Arabic (right-to-left) and English (left-to-right). Mirroring the English layout is not enough: typography, forms, icons, numbers and search annotations all need attention. This checklist is meant for designers, developers and QA testers working on the same release.

Document and layout

• [ ] Set lang and dir on the <html> element: <html lang="ar" dir="rtl"> for Arabic pages, <html lang="en" dir="ltr"> for English.
• [ ] Use CSS logical properties (margin-inline-start, padding-inline-end, inset-inline-start, text-align: start) instead of left and right, so one stylesheet works in both directions.
• [ ] Flex and grid layouts follow the writing direction automatically; check any component that uses absolute positioning or transforms.
• [ ] Mixed-direction strings (an English brand name inside an Arabic sentence, a phone number, a URL) are wrapped in elements with dir="auto" or use <bdi> where the direction is unknown.

Typography

• [ ] Choose an Arabic typeface designed for screen use and test it at body sizes, not only in headlines.
• [ ] Arabic text usually needs a larger font size and line height than Latin text to be equally readable; do not reuse English values blindly.
• [ ] Do not apply letter-spacing to Arabic - it breaks the connected script.
• [ ] Avoid all-caps styling rules that only make sense for Latin scripts.
• [ ] Check that text truncation (text-overflow: ellipsis) works from the correct side.

Icons and imagery

• [ ] Mirror directional icons: back/forward arrows, chevrons in breadcrumbs, progress indicators, "send" icons.
• [ ] Do not mirror icons that represent real-world objects or universal symbols: play buttons, clocks, checkmarks, logos, media controls.
• [ ] Carousels and sliders move in the reading direction; swipe gestures match.
• [ ] Photographs with text or directional composition may need separate crops, not a flipped image.

Forms

• [ ] Labels, help text and error messages align to the start edge.
• [ ] Inputs that hold Latin-only data (email, URL, some IDs) can be set to dir="ltr" so characters do not appear reversed while typing.
• [ ] Phone inputs accept both Western Arabic (0-9) and Eastern Arabic (٠-٩) digits, or clearly state which is expected - and the backend normalises them.
• [ ] Validation messages are translated, not just the labels.
• [ ] Date pickers respect the locale's first day of the week and reading direction.

Numbers, dates and currency

• [ ] Decide deliberately whether Arabic pages display Western Arabic or Eastern Arabic numerals, and apply it consistently. Use Intl.NumberFormat and Intl.DateTimeFormat with the right locale rather than hand-built strings.
• [ ] Currency symbols and codes (AED, SAR, QAR, KWD, BHD, OMR) appear in the position readers expect for the locale.

Content and navigation

• [ ] The language switcher is visible on every page, labelled in the target language ("English" / "العربية"), and links to the equivalent page, not the homepage.
• [ ] Translations are written or reviewed by a native speaker, and adapted for the market - not machine-translated and published.
• [ ] Navigation order reads correctly from the start edge.

Search and metadata

• [ ] Each language version has its own URL (for example /ar/... and /en/...), its own title and meta description, and a self-referencing canonical.
• [ ] hreflang annotations link each language version to the others and back to itself, and include x-default if there is a language selector page.
• [ ] Structured data on Arabic pages is written in Arabic where it describes visible content.

QA pass

Test every key template in both languages on a real mobile device, with long real-world strings (long names, long company names, mixed Arabic/English addresses). Most RTL bugs only appear with real content.

Further reading

• W3C Internationalization: Structural markup and right-to-left text in HTML
• MDN: CSS logical properties and values
• Google Search Central: Localized versions of your pages
• For how research, wireframing and design systems come together in interface work, see the UI/UX design page from Gorilla Vibe.