Naar de inhoud
Alle artikelen
Engineering9 min lezen

Your Arabic site is broken, and `dir="rtl"` did not fix it

Flipping the direction attribute is about 20% of the work. The other 80% is where most multilingual builds quietly fall apart.

Dit artikel is nog niet in uw taal vertaald en wordt daarom in het Engels getoond. De rest van de site is volledig vertaald.

Adding `dir="rtl"` to the html element mirrors your text and your block layout. It does not mirror your assumptions. Almost every RTL bug that reaches production comes from a hardcoded direction sitting somewhere a developer forgot direction existed.

Stop writing left and right

Every `margin-left`, `padding-right`, `left-0` and `text-left` in your codebase is a future bug. CSS has had logical properties for years: use `margin-inline-start`, `padding-inline-end`, `inset-inline-start`. In Tailwind these are `ms-*`, `me-*`, `ps-*`, `pe-*`, `start-*`, `end-*` and `text-start`. They resolve correctly in both directions without a single conditional.

Icons that must flip, and icons that must not

Directional icons — back arrows, next chevrons, progress indicators, send buttons — carry meaning that depends on reading direction, so they must mirror. Icons representing objects must not. A mirrored clock is wrong. A mirrored logo is worse. A mirrored magnifying glass is merely strange, but people notice.

Numbers, dates and mixed content

Numbers stay left-to-right inside right-to-left text. So do Latin brand names, URLs and code. The browser's bidirectional algorithm handles most of this, but it guesses at boundaries — a price next to a currency symbol, or a phone number in a sentence, will occasionally land in the wrong order. Wrap ambiguous runs and let the layout algorithm stop guessing.

Typography is not a font swap

  • Arabic script needs more vertical space — line-height that looks generous in Latin looks cramped in Arabic
  • Arabic has no capital letters, so uppercase styling and letter-spacing tricks do nothing except damage legibility
  • Many Latin display faces have no Arabic coverage at all; picking a companion face is a design decision, not a fallback
  • Text expands and contracts on translation — a button sized to fit English will overflow

Test it the only way that works

Open every page in Arabic and use it as a task, not as a screenshot. Submit the forms. Open the menus. Page through the results. RTL bugs hide in interaction — a drawer that slides in from the wrong edge, a carousel that advances backwards, a focus order that jumps across the screen. None of that shows up in a static review.

If nobody on the project reads Arabic, you have not built an Arabic site. You have built a mirrored English one.


Wilt u dit toegepast zien op uw project?

Krijg een prijsbandbreedte voor wat u van plan bent, of stuur een briefing en ontvang binnen 24 uur schriftelijk antwoord.

Ontvang de volgende

Alleen het journaal. Uw adres gaat nooit naar iemand anders.