Generative UI Meets Arabic: The RTL Problem Nobody's Talking About

Why is RTL a generative UI problem specifically?

Static Arabic sites already struggle with RTL, but at least every screen gets human review before shipping. Generative UI removes the review. An AI composing a settings panel or a form for an Arabic user at runtime will hit, unassisted:

• Mirroring judgment. Layout direction mirrors in RTL; real-world references don’t. Navigation, progress indicators, and back arrows flip. Clocks, play buttons, and charts showing time do not. Getting this wrong is the most common RTL bug in human-built products — expecting a model trained on LTR data to intuit it is optimistic.

• Mixed-direction text. Arabic sentences containing English brand names, numbers, or emails are bidirectional strings, and they break constantly: punctuation jumping to the wrong end, numbers appearing in the wrong position. Human developers wrestle with this for years. A composing model will generate these combinations freely.

• Component internals. A component that looks fine in isolation can assume LTR inside — text aligned left, chevrons pointing right, padding on the wrong side. The AI doesn’t know; it just composes.

• Arabic type metrics. Arabic script needs more line height and different optical sizing than Latin. Components designed for English metrics clip or crowd Arabic text.

In a static product these are bugs. In a generative product they’re bugs that regenerate themselves, differently, for every user.

Where does the fix actually live?

Not in the prompt. You can’t instruct your way out of this per-generation. The fix lives in the only place generative UI allows control: the component layer and the composition rules.

Build components RTL-native from the start. CSS logical properties (margin-inline-start, notmargin-left), direction-aware icons with explicit mirror/no-mirror flags, and bidirectional text handling baked in. A component built this way renders correctly in both languages without the AI deciding anything.

Encode the mirroring rules in the design system. Which icons flip, which don’t, how progress and navigation behave — stated as rules, not conventions. This is exactly the “composition rules” layer from the design-system article in this series, with a bilingual dimension added.

Test generated output in Arabic first, not second. If you evaluate your generative surfaces in English and spot-check Arabic, you’ll ship English-quality generation with Arabic-quality disasters. Reverse the ratio. Arabic is where the failure modes live, so Arabic is where the testing budget goes.

Is this a threat or an opening?

Both, but the opening is bigger. The global generative UI ecosystem will get Arabic right slowly — it’s not their first market. A MENA product with an RTL-native, machine-readable design system will deliver generated Arabic interfaces years before regional competitors who wait for the tooling to catch up. In a market where Arabic-first quality is already a differentiator, being first to trustworthy generative Arabic UI is a real moat.

The prerequisites are unglamorous: the design system work, the RTL discipline, the testing protocol. But that’s the pattern of this whole series — the future belongs to the teams with the best-governed components, and for us, governance includes direction.

Arabic-first design systems are home turf for us — it’s what we build for clients across the GCC and Egypt. If you’re preparing a bilingual product for the generative era, talk to our product design team →