Arabic first: what right-to-left really changes

Most products meet Arabic late. The English version ships, someone adds a language switch, and the layout is flipped in one sprint. The result works, and it reads like a translation. Arabic speakers notice on the first screen.

Arabic first means the opposite order: the Arabic interface is designed, not derived. Here is what that changes in practice, for designers and engineers.

Mirroring is a layout rule, not a filter

In a right-to-left interface the reading path starts at the top right. Everything follows it: navigation, back buttons, side menus, progress steps, carousels, swipe gestures. “Back” points right.

The engineering lesson is short. Never write left or right. Write start and end.

• Web: set dir="rtl" on the page and use logical properties such as margin-inline-start and text-align: start.
• iOS and Android: use leading and trailing, start and end. The system then mirrors the layout for you.
• Flutter: use the directional classes, such as EdgeInsetsDirectional.
• Game engines: check early that your text component joins Arabic letters and orders them correctly. Not every one does by default.

Built this way, one codebase serves both directions. Built with left and right, every screen is fixed twice.

Typography: taller lines, no tracking

Arabic letters join. They carry dots above and below, and sometimes vowel marks on top of those. A line height tuned for Latin text clips them.

• Give Arabic body text more line height. Start near 1.7 where you would use 1.5 for Latin, then adjust for the typeface.
• Arabic looks smaller than Latin at the same size. Expect to set it one step larger.
• Never add letter-spacing. It breaks the joins between letters.
• Arabic has no capitals and no native italic. Build hierarchy and emphasis from weight, size and color.

Numerals and mixed text

Arabic text runs right to left. Numbers inside it run left to right. So do English brand names, email addresses, links and code. Every Arabic screen is bidirectional, and this is where the most visible bugs live.

• Pick one digit set, 123 or ١٢٣, and use it everywhere. Many Saudi products use 123.
• Isolate every left-to-right run: phone numbers, prices, order codes, user names. On the web that is the <bdi> element. Elsewhere, use Unicode isolate characters.
• The classic failures: the plus sign of +966 jumps to the far end. Brackets flip. A full stop lands on the wrong side of an English word.
• Format dates, currency and plurals with the platform’s locale tools. Arabic has six plural forms. Joining strings cannot produce them.

Forms

• Labels and helper text align right. Email, link, phone, card and one-time-code fields stay left to right, even on an Arabic screen.
• Free-text fields take their direction from what the user types: dir="auto" on the web.
• Accept Arabic letters in names. A pattern that allows only A to Z rejects your customer at step one.
• Search must forgive spelling variants: the forms of alef, ta marbuta and ha, ya and alef maqsura, and optional vowel marks.

Icons that must not mirror

Mirror what shows direction: back and forward arrows, the send arrow, list and indent icons, progress bars.

Leave these as they are:

• Media controls. Play, rewind and fast-forward follow the tape, not the text. The playback bar itself stays left to right.
• Clocks, and anything that turns clockwise.
• Check marks, logos and brand marks.
• Numbers, and any icon with Latin text in it.

One exception is often missed: the question mark. Arabic writes it facing the other way (؟), so a help icon takes that form.

Testing

• From the first week, turn on forced right-to-left layout in Android’s developer options and the right-to-left pseudolanguage in Xcode. They expose mirroring faults before a word of Arabic is written.
• Test with real Arabic copy, written by a writer. Machine-translated placeholder text hides layout and tone problems together.
• Test the hard cases: a name with vowel marks, and a sentence that mixes Arabic, an English product name and a price.
• Give the build to a native reader on a phone, not screenshots in a document.

Words before layout

Direction is half of it. The other half is the language itself. SANAM, the game we built for Rai Alnadhar, is Arabic first. Its interface keeps the heritage’s own terms, from manqiyah to al-Namous. A word the player already knows needs no tutorial.

The dabb looks first, then moves. For an Arabic product, looking means opening the design in Arabic on day one, not on the day before launch.