How do I add Arabic and RTL support to an app or website properly?
Direction is set once
Put dir="rtl" on the html element for the Arabic edition, and nowhere else. Setting direction on individual elements is how layouts end up half-mirrored. The route structure should carry the language from the start: /en/... and /ar/..., so that Arabic is a second edition of every page, not a retrofit.
Logical properties, not left and right
Every margin, padding and border in the stylesheet should use start and end, not left and right. In Tailwind that means ps-, pe-, ms-, me-, border-s, border-e, and never pl-, pr-, ml-, mr-. One left in the codebase is a bug that appears in week nine, in Arabic, on the client's phone. Grep for the directional classes before every release.
Type built for Arabic
Arabic needs a typeface designed for it. IBM Plex Sans Arabic for interfaces and Amiri for longer reading are both good and both free. Line height should be about 1.7, higher than Latin, because Arabic ascenders and descenders need the room. Letter-spacing must be zero: tracking Arabic breaks the joins between letters and is the single most common error on Qatar websites.
Numbers and currency
Choose one numeral system and hold it. Cliqom uses Western numerals in both editions, which matches how Qatari business documents are written. Currency in Arabic is written as 12,000 ريال.
Copy written by a person
Machine-translated Arabic is the fastest way to tell a Doha reader you did not care. The Arabic edition should be written in Arabic, in the right register: Modern Standard Arabic for product surfaces and formal pages, Khaleeji for warm personal messages. Test every screen with real Arabic strings, which can run 20 to 40 percent longer or shorter than the English, and watch for truncation.
Mobile apps
For a Flutter app, use EdgeInsetsDirectional and start and end alignment throughout, keep every user-facing string in the localisation files for both languages, and take separate App Store screenshots for each locale. Apple reviews the Arabic screenshots too.
Related questions
Should numbers be Arabic-Indic or Western in Arabic pages?
Cliqom uses Western numerals in both language editions, matching Qatari business collateral. Pick one convention and hold it everywhere, including prices.
Which fonts work for Arabic?
Use a face designed for Arabic, such as IBM Plex Sans Arabic for interfaces or Amiri for editorial text. Never a Latin font's automatic Arabic companion, and never letter-spacing on Arabic.
Do icons need to be mirrored?
Only directional ones: arrows, back buttons, progress indicators. A clock, a phone or a logo stays as it is.
Can I translate the English with a tool as a first draft?
No. A person who writes Arabic should write it. A translated draft carries English sentence shapes that a native reader feels immediately.