- Arabic & RTL
- Web Platforms
Arabic-First Software: Why RTL Is So Much More Than Flipping the Layout
Most Arabic software feels broken because RTL is treated as a translation task. Here's what Arabic-first design and architecture actually require — and why it matters.
Arabic support is often treated as "flip the layout and translate the strings" — and that's exactly why so much Arabic software feels broken. Text collides with icons, numbers face the wrong way, forms fight the user, and the whole thing reads like a machine translation of an English product. It usually is.
Building genuinely Arabic software isn't a translation task. It's a design and engineering decision you make on day one — or pay for later.
What does "Arabic-first" actually mean?
Arabic-first means you design and architect for Arabic and RTL from the start, then adapt to English — not the reverse. It's the opposite of the common pattern: build the English product, ship it, and months later "add Arabic" by bolting a translation layer onto a codebase that assumes left-to-right everywhere.
That assumption is baked deeper than most teams expect. It lives in layout, in component logic, in how you store and sort data, in which font you loaded, in the way a date is formatted. You can't translate your way out of it.
When Arabic is a first-class citizen, the reverse becomes easy: a product built to flex between directions handles English cleanly. A product built only for English almost never handles Arabic cleanly.
Why isn't RTL just mirroring the screen?
Mirroring gets you maybe 60% of the way, and the last 40% is where credibility lives. Real Arabic interfaces have to handle several things that a simple flip breaks.
Bidirectional (bidi) text. Arabic sentences routinely embed Latin words, phone numbers, prices, URLs, and code. The paragraph flows right-to-left, but "iPhone 15" or "+20" inside it still runs left-to-right. Getting this wrong scatters characters into nonsense — the single most common tell of bolt-on Arabic. This is a job for the Unicode bidi algorithm and correct use of logical text direction, not manual string surgery.
Logical, not visual, layout. Modern layouts should be written in logical terms — start and end, not left and right. margin-inline-start instead of margin-left. When your CSS speaks in logical properties, one codebase serves both directions. When it's hardcoded to left/right, every screen needs a manual mirror, and one will always be missed.
Selective mirroring. Some things flip; some absolutely must not.
- Flip: navigation arrows, back/forward, progress bars, breadcrumbs, list indentation, chat bubble sides.
- Don't flip: clocks, media playback controls (play still points "forward" in reading order but rewind/fast-forward keep their universal meaning), checkmarks, brand logos, and any real-world imagery. A mirrored clock or a backwards play button reads as a bug instantly.
What breaks when Arabic is an afterthought?
The failures are consistent, and users notice every one of them:
- Tofu boxes (□□□) where the font has no Arabic glyphs, because the team shipped a Latin-only typeface.
- Broken letter joining. Arabic is cursive; letters connect. Apply
letter-spacingto "fix" spacing and you shear the word apart into disconnected shapes. Arabic typography has no room for the letter-spacing hacks common in Latin design. - LTR leaks — a stray English label, an un-mirrored icon, a left-aligned number column in an otherwise right-aligned table.
- Truncation from the wrong end, so an ellipsis cuts the beginning of an Arabic phrase instead of the end.
- Overflowing buttons, because Arabic translations can run noticeably longer or shorter than the English, and the layout was pixel-fitted to English strings.
- Sorting and search that ignore Arabic, treating diacritics, hamza variants, and alef forms inconsistently so results feel random.
Individually small. Together they broadcast that the product was never really built for its user.
Bolt-on Arabic vs. Arabic-first, side by side
| Concern | Bolt-on Arabic | Arabic-first |
|---|---|---|
| Layout | Hardcoded left/right, manually mirrored per screen | Logical properties (start/end); direction flips cleanly |
| Typography | Latin font + letter-spacing hacks; tofu boxes | Proper Arabic typeface, correct letter joining, tuned line height |
| Numerals | Whatever the default is | Deliberate choice: Arabic-Indic (٠١٢) or Western (012), consistent per locale |
| Bidi text | Latin/numbers scatter mid-sentence | Unicode bidi handled; mixed content stays readable |
| Forms | LTR fields, misaligned labels, English-only validation | RTL fields, correct label side, Arabic error messages |
| Data tables | Left-aligned columns, wrong-end truncation | Right-aligned, direction-aware truncation, Arabic-aware sorting |
| Content | Fixed to English string length | Flexes for text that expands or contracts |
Which details separate "works" from "feels native"?
A few decisions carry disproportionate weight:
Numerals are a choice, not a default. Arabic-Indic numerals (٠-٩) feel native in much of the Gulf; Western digits (0-9) are widely used and often preferred in Egypt, especially for prices and phone numbers. Pick per locale, apply it consistently, and never let a single screen mix both by accident.
Dates, currency, and calendars need real formatting. "15/05/2026," Hijri vs. Gregorian, EGP vs. SAR placement and separators — these follow locale rules, not string concatenation. Use the platform's internationalization APIs rather than hand-rolling formats.
Forms are where trust is won or lost. Fields align right, labels sit on the correct side, and validation messages are written in natural Arabic — not translated verbatim from English error copy. A form that stumbles is where users quietly leave.
Fonts are infrastructure. The Arabic typeface has to carry the full glyph set, join letters correctly, and hold up at UI sizes with a line height tuned for Arabic's taller ascenders and lower descenders. This is a real design task, not a fallback.
Why does this matter commercially in MENA?
Because in Egypt and the Gulf, a polished Arabic experience reads as respect — and a broken one reads as "this wasn't built for you."
Arabic-first work directly affects trust, adoption, and reach. It widens your addressable market beyond the English-comfortable minority, lowers support load because people aren't fighting the interface, and signals that you take the market seriously. For consumer products and internal tools alike, that's the difference between something people tolerate and something they rely on. It's a core reason we build web platforms and mobile apps Arabic-first by default, and why our own products start from Arabic rather than retrofit to it. The same discipline underpins good multi-tenant SaaS, where every tenant may need its own locale.
The short version
- Arabic-first means architecting for Arabic and RTL from day one, then adapting to English — not translating an English product afterward.
- RTL is not mirroring. Handle bidirectional text, use logical layout, and mirror selectively — arrows yes, clocks and media controls no.
- Bolt-on Arabic fails visibly: tofu boxes, sheared letters, LTR leaks, wrong-end truncation, overflowing buttons, broken sorting.
- Sweat the specifics: numeral system per locale, real date/currency/calendar formatting, RTL forms with Arabic validation, direction-aware tables, and a proper Arabic typeface.
- In MENA, this is not polish — it's trust, adoption, and reach.
If you're weighing an Arabic build, or fixing one that's fighting its users, we're happy to think it through with you before anyone writes code.