A client asked us to "add Arabic" to a platform built over two years. The quote was 40% of the original build cost. They thought we were opportunistic. We were not — the application had a hundred places where a decision made casually in English had to be unpicked.

Arabic-first development is not about translating strings. It is a set of architectural choices that are cheap on day one and expensive on day four hundred.

Arabic-first development: decisions for week one

Database collation

Choose a Unicode collation that sorts Arabic sensibly, and set it before the first row is written. Changing collation on a populated production table means downtime, a migration, and a period where sorting silently differs between environments.

Test with real Arabic names, including definite articles. A list where every name beginning with ال sorts together under one letter is a collation problem, and users notice immediately.

Store text as text, not as layout

Never store pre-formatted strings that assume direction — no "Name: " + value concatenation that will read backwards in Arabic. Store the parts, format at render time, and let the template handle direction.

Decide the numeral policy once

Arabic-Indic digits (٠١٢٣) or Western (0123)? In Jordan, Western numerals are standard in commerce and finance, while Arabic-Indic appear in formal and religious contexts. Pick one for your interface, apply it everywhere, and be aware that mixing them in a table makes columns impossible to scan.

Whichever you choose, store the value as a number. Formatting is a display concern; a digit stored as a string will eventually be sorted alphabetically and produce nonsense.

Layout: logical properties, not physical ones

This is the single change that eliminates most RTL work. Modern CSS has direction-aware properties that flip automatically.

  • margin-inline-start instead of margin-left
  • padding-inline-end instead of padding-right
  • inset-inline-start instead of left
  • text-align: start instead of text-align: left

Arabic-first development means writing these from the beginning, and the Arabic layout is then largely free. Retrofit them into a mature stylesheet and you will spend weeks, because every override has to be found and verified.

One caution learned the hard way: inset-inline-start: 50% combined with translateX(-50%) does not centre in RTL. It maps to right, and the element moves off-screen. For true centring, use physical left: 50% or a flex container.

Text expansion is real

Arabic is often shorter than English in characters but taller in rendered height, because of diacritics and descenders. Interface elements sized to fit English text exactly will clip.

Test every component with the longest realistic Arabic string you have, not with a placeholder. Buttons, table headers and navigation items are where this breaks first.

Fonts, and the mixed-script problem

Latin faces have no Arabic glyphs, and most Arabic faces have weak Latin. A stack naming only one leaves the other script falling back to whatever the operating system supplies — which is why so many bilingual applications look inconsistent.

Name both faces in one stack, in the order you want them chosen:

font-family: "Inter", "Cairo", system-ui, sans-serif;

The browser takes each glyph from the first face that has it, so Latin renders in Inter and Arabic in Cairo without any language switching. Load the same weights for both faces, or the browser will synthesise the missing one and the mismatch will be visible.

What genuinely cannot be retrofitted cheaply

  • Database collation — requires migration and downtime.
  • Concatenated display strings — scattered through the codebase, each needing individual review.
  • Hard-coded physical CSS — hundreds of properties, each with a chance of regression.
  • Fixed-width components — a design system change, not a code change.
  • Images with embedded English text — every asset needs remaking.

The pragmatic minimum for Arabic-first development

If you are not building both languages now but expect to later, do these five things anyway. They cost almost nothing today.

  1. Set a Unicode collation on the database.
  2. Use logical CSS properties everywhere.
  3. Put every user-facing string in a translation file, even with one language.
  4. Never concatenate display text in code.
  5. Keep text out of images.

That is perhaps two days of discipline during the build. It is the difference between adding Arabic later for the cost of translation, and adding it for 40% of the original project.