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.
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.
Want this applied to your project?
Get a price range for what you are planning, or send a brief and get a written reply within 24 hours.