9 RTL Mistakes That Make Your Arabic Site Look Broken

Your English site looks sharp. Then someone opens the Arabic version and something feels off. The text is right-aligned, technically, but the page reads like a mirror held up to the wrong things. Arabic is read right to left, and too many sites treat that as a checkbox instead of a design decision. Here are the nine mistakes that make Arabic pages look broken — grouped by where they hide.

Mirrored is not the same as flipped

A proper RTL page is mirrored: reading order, layout and visual hierarchy all start from the right. A flipped page just pushes text to the right edge and hopes. That gap is where the first three mistakes live.

1. Flipping the text but not the layout. Someone adds text-align: right and calls it done. The navigation still runs left to right, the logo sits where an Arabic reader expects the menu, and cards stack in the wrong order. An Arabic reader's eye enters the page from the top right — if your hierarchy doesn't start there, the whole page feels backwards even when every word is Arabic.

2. Mirroring things that should never mirror. The opposite failure. Logos keep their orientation. Phone numbers still read left to right. Clocks, checkmarks and media progress bars follow real-world convention, not reading direction. The rule: mirror what encodes reading order, leave alone what encodes the physical world or your brand.

3. Faking RTL with overrides instead of declaring it. Set dir="rtl" on the page and the browser does most of the heavy lifting — text direction, default alignment, list markers. Pair it with CSS logical properties (margin-inline-start instead of margin-left) and one stylesheet serves both languages. Skip this and you end up with hundreds of ad-hoc CSS patches that break every time anything changes. This is the core discipline behind proper bilingual web design in the UAE: one structure, two directions, nothing bolted on.

Arabic type is not a fallback

4. Letting the browser pick your Arabic font. Your brand font probably covers Latin only. When Arabic text hits it, the browser silently drops to a system default — different weight, different personality, different era. The result reads as two websites sharing one page. Choose a real Arabic typeface (or the Arabic companion to your brand family) and load it as deliberately as you loaded the English one.

5. Reusing English sizes and line-heights. Arabic has no capital letters, and much of its meaning lives in dots and marks above and below the baseline. At the same pixel size it usually reads smaller and denser than the Latin text beside it, and a tight English line-height can clip those marks. Arabic typically needs a slightly larger size and more breathing room between lines. Test it with real copy, not lorem ipsum.

6. Letter-spacing a connected script. Arabic letters join to each other — that's how the script works. Add tracking for "elegance" and you snap the joins, leaving words that are literally broken apart. The same goes for faux bold: if the font family doesn't ship the weight, the browser fakes it, and connected letterforms fake badly.

Numbers, icons and forms: where RTL quietly breaks

7. Scrambled numbers and prices. Mixed-direction text is where the browser's bidi algorithm springs surprises. A price can render with the currency on the wrong side; a phone number pasted into Arabic copy can come out reordered. Embedded left-to-right fragments — prices, phone numbers, codes, URLs — need to be isolated with dir="ltr" or a <bdi> element so they hold their shape wherever they land.

8. Icons that ignore direction. In RTL, "back" points right and "forward" points left. Breadcrumb chevrons, carousel arrows and next-step indicators all need to flip — while symbolic icons like the search magnifier, the checkmark and the play button stay put. Audit your icon set once, mark each icon directional or symbolic, and the decision never has to be made twice.

9. Forms that stay left-handed. Labels hugging the wrong edge, error messages floating away from their fields, checkboxes sitting after their text instead of before it. And the subtle one: email, URL and phone fields should keep left-to-right input inside an RTL form, or customers watch their own phone number type out backwards. On a business website, the form is where the money is — if filling it in feels broken, the enquiry never arrives.

Audit your Arabic pages this week

You don't need a specialist to find these problems. Thirty minutes and this list will do it:

• Open the English and Arabic versions side by side. Does the Arabic page start from the top right?
• Walk the navigation, cards and breadcrumbs. Is the order mirrored, or just the text?
• Compare the type. Same weight and presence as the English, or a thin system fallback?
• Find every price and phone number. Still intact?
• Check every arrow. Does it point the way an Arabic reader travels?
• Fill in your own contact form in Arabic, on a phone.

If the audit turns up more red than you expected, that's fixable — these are exactly the details a serious web design process in Dubai handles from day one instead of patching after launch. We build bilingual EN/AR sites with proper RTL as a core capability, with scope, timeline and price in writing before work starts, and full sites ship in 2–4 weeks. Get an instant quote — see your price in under a minute — or message us on WhatsApp and tell us what your Arabic pages are doing wrong.