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

#css #webdev #a11y #i18n

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.

DEV Community