تخطَّ إلى المحتوى
كل المقالات
الهندسةقراءة 9 دقيقة

نسختك العربية معطوبة، وسمة 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 ساعة.

استلم المقال القادم

المجلّة فقط. ولن يصل بريدك إلى أي جهة أخرى.