Building for Arabic users: the RTL details founders miss

Flipping the layout is the easy part. Numbers, mixed text, forms, type and icons decide whether an Arabic version feels built for its reader or translated for them.

Adding dir="rtl" to a page takes a minute. Making an Arabic product feel like it was built for the person reading it takes longer, and most of that work hides in small details. Users notice them straight away, even when they cannot name them.

These are the details we check on every bilingual product, this website included.

Mirror what has a direction, leave the rest

Navigation, text alignment, back and next arrows, progress bars, sliders and carousels all reverse. Logos, video play buttons, clocks, check marks and charts with a time axis usually stay as they are.

Use logical CSS properties, like margin-inline-start instead of margin-left, from the first line of code. Adding them later means going back through every component.

Mixed text and numbers

Arabic text is full of Latin pieces: email addresses, links, product names, prices, code. Without isolation, the browser can move punctuation to the wrong side or flip a time range, so 09:00–18:00 shows up as 18:00–09:00. We caught exactly that bug on this site. Wrap these runs in <bdi> or give them dir="ltr", and test with real strings, not placeholder text.

Decide on digits early. Many Arabic products use Western digits (0–9) inside Arabic text, others use Eastern Arabic digits. Pick one and apply it to dates, prices and phone numbers everywhere. Do the same for the calendar.

Forms

• Email, phone, URL and code fields stay left to right, even on an Arabic page. Labels, hints and errors are in Arabic.
• Phone fields should accept the formats people actually type, with or without the country code.
• Write validation messages, do not machine-translate them. A clumsy error message is where trust drops fastest.

Type

Arabic needs a typeface designed for it, not a Latin font with an Arabic fallback. Set Arabic a size or two larger than English and give it more line height. Never add letter spacing to Arabic: the letters join, and spacing pulls them apart. Arabic has no italics and no capitals, so emphasis comes from weight or colour.

Copy

Machine-translated Arabic is spotted in seconds. Write the Arabic version, or have a native writer rewrite it, in plain modern standard Arabic. Speak to the reader directly, keep sentences short, and leave established technical terms like API and MVP in Latin script.

If a page is not ready in Arabic, do not publish it with English text inside an Arabic layout. Ship both languages together, or wait.

Test on a phone, with real content

Most RTL bugs appear on small screens: labels cut off at the wrong end, icons on the wrong side of a button, a swipe that moves the wrong way. Before launch, test with the longest real strings you have, in both languages.