Blog Overview
Mirroring a layout is not Arabic design. These are eleven recurring RTL mistakes, each with a practical test, plus an eight-item pre-launch checklist.
When a development team says “the Arabic version is ready,” it usually means the English file was flipped and the translation was dropped in. That is not Arabic design. It is an English design in a mirrored coat, and it shows at the first long form, the first mixed number, or the first Arabic reader on a small phone.
These are eleven mistakes we see repeatedly in Saudi projects, with a way to test each one. This is not a cosmetic list. Every mistake costs a user time or causes a data-entry error.
Why mirroring fails
Mirroring works only at the visual level. It changes column direction, not reading logic, arrow meaning, number order, or text truncation. Material Design puts it clearly: an RTL layout reverses alignment and ordering, but components must be designed for both directions rather than flipped after the fact.
Four layers are affected by direction, and each needs a different test.
| Layer | What changes | How to test it |
|---|---|---|
| Layout | Columns, alignment, logical spacing, element order | Switch language mid-task and watch focus position |
| Content | Copy, truncation, line height, long headings | Use the longest real company name and error message |
| Numbers | Arabic-Indic vs Western digits, ranges, dates, currency | Enter a mixed number, render a range and a Hijri date |
| Assets | Icons, images, email, PDF, store screenshots | Open the email and PDF on a real Arabic device |
Eleven mistakes and how to test each one
Mirroring every icon. A “next” arrow should point left in RTL, but a play icon, a checkmark, and a logo should not flip. Fix: an icon registry that marks each icon as directional or not. Test: walk every icon and ask whether its meaning changes when mirrored.
Reversing field order without reading order. The first field moves right, but tab order stays left to right. Fix: use logical properties such as margin-inline-start, and test Tab order. Test: complete the form with the keyboard only.
Breadcrumbs that still run left to right. “Home / Services / Design” reads right to left in Arabic, but the separator stays in the wrong direction. Fix: reverse the item order, not just the text, and use a neutral separator. Test: click the first item and confirm it is the parent, not the child.
Mixed strings without bidi isolation. A name like “ABC شركة” or an email inside an Arabic sentence flips punctuation and brackets. Fix: use dir="auto" or Unicode isolation around the Latin segment. Test: enter an email and a number at the end of an Arabic sentence.
Numbers without a policy. Mixing Arabic-Indic and Western digits on the same screen breaks comparison. Fix: one declared policy, such as Western digits in financial interfaces or Arabic-Indic in editorial content, with a documented exception. Test: render an amount, a range, and a date in one card.
A date picker with reversed weekdays. The weekday order stays LTR while the interface is RTL. Fix: reverse the day and week order, and test both Hijri and Gregorian. Test: tap a date and confirm the selected day is the one that appears.
Tables that flip columns but leave numbers. The first column moves right, but numbers stay left-aligned. Fix: right-align numbers in RTL, and test sortable columns. Test: sort a numeric column and confirm the direction is clear.
A modal with the close button on the wrong side. The close control stays top-left while the user starts on the right. Fix: keep it top-left only if the global pattern leads there; otherwise use a clear position with a label. Test: open the modal with the keyboard and close it.
A progress indicator that fills backwards. The bar fills from the left while step one is on the right. Fix: tie the fill direction to the logical direction, and test step one through the last. Test: complete a step and confirm the bar moved forward visually.
Truncation and line height tuned for Latin. Arabic breaks mid-word or the dots above letters collide. Fix: a larger line height, extra vertical space, and testing with long names. Test: use a 60-character Arabic title in the narrowest column.
Email and PDF left in LTR. Templates are copied from English without direction, so the message arrives reversed in Outlook. Fix: direction: rtl, an Arabic font fallback, and testing in Gmail, Outlook, and iPhone. Test: send the message to yourself and open it in three clients.
A twenty-minute RTL test
You do not need a whole team to find most of these mistakes. You need an Arabic device, real content, and twenty minutes.
From reading to shipping
Want this built, not just explained?
Bring us the problem behind the article. We will tell you what it takes, what it costs, and whether we are the right team.
Switch language mid-task. Did focus stay in place, or jump to another element?
Complete a form with the keyboard only. Does Tab order follow Arabic reading order?
Use the longest real copy. A company name, an error message, a service title. No placeholder text.
Enter an email and a number inside an Arabic sentence. Did brackets or punctuation flip?
Turn on a screen reader. Does it read the right order, and pronounce numbers as expected?
Zoom to 200%. Is the text still readable and the button still clickable?
Print a page or generate a PDF. Are direction and font intact?
Open the email on a phone. Does it render RTL in the mail client?
Typography, numbers, and mixed strings
Arabic needs a typeface designed for interfaces, not a thin editorial face. Noto Kufi Arabic and IBM Plex Sans Arabic are open options with clear licensing, and both cover the weights an interface needs. Set line height to leave room for dots and diacritics, and test small sizes on a real phone screen.
Numerals are a product decision, not a designer's preference. Choose one policy, write it in the content guide, and apply it across the interface, reports, and invoices. The important part is that an amount, a range, and a date stay readable in the right order when Arabic and English mix.
Fixing these mistakes is not always a separate project. It usually sits inside a design sprint or an existing audit. To see where it falls in scope, read UI/UX design cost in Saudi Arabia.
What belongs in the design system
If these mistakes keep repeating, the design system does not know direction. Add four things: logical spacing and alignment tokens, an icon registry that marks directionality, ready patterns for forms, tables, and navigation, and content rules for numerals and mixed strings. Then add Storybook stories that render every component in both directions, so the engineer sees the difference before the build.
Frequently asked questions
Does RTL mean flipping everything? No. It reverses layout and reading order, and leaves icon and logo meaning intact.
Should we use Arabic-Indic or Western digits? It depends on the audience and context. What matters is one documented policy, not two screens that disagree.
Do we need a different Arabic font? Usually yes. A Latin face does not cover Arabic joins and vertical metrics.
How do we test without Arabic speakers? You will not get a reliable result. You need at least one Arabic reviewer, and preferably five users.
Which mistake is the most serious? Tab order and mixed content, because they cause wrong data entry rather than visual annoyance.
Sources
- Material 3: bidirectionality and RTL — layout reverses alignment and order, and components are designed for both directions.
- Google Fonts: Noto Kufi Arabic — an open Arabic interface face.
- IBM Plex Sans Arabic — an open alternative with clear licensing.
- UI/UX design and research — how we design both directions from the first wireframe.
