نسختك العربية معطوبة، وسمة dir="rtl" لم تُصلحها
قلب سمة الاتجاه يمثّل نحو 20% من العمل. أمّا الـ80% الباقية فهي حيث تنهار أغلب المواقع متعدّدة اللغات بصمت.
لم يُترجَم هذا المقال إلى لغتك بعد، لذا يُعرَض بالإنجليزية. أمّا بقية الموقع فمترجمة بالكامل.
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.
تريد تطبيق هذا على مشروعك؟
احصل على نطاق سعري لما تخطّط له، أو أرسل وصفًا وستحصل على ردّ مكتوب خلال 24 ساعة.