لماذا تنكسر مكتبات المكوّنات في وضع RTL، وما الذي تفحصه أولًا

١. الخصائص الفيزيائية

المكوّن المكتوب بـ margin-left وpadding-right وleft: 0 وtext-align: left يعمل تمامًا حتى يتغيّر الاتجاه، فتشير كل تلك القيم عندها إلى الجهة الخاطئة. أما المكافئات المنطقية — margin-inline-start وpadding-inline-end وinset-inline-start وtext-align: start — فتُعكس تلقائيًا ولا تحتاج ملفّ أنماط ثانيًا.

٢. التحويلات والإزاحات ذات الإشارة

الدالة translateX(-50%) لا تُعكس. ولا شريط شرائح يتقدّم بطرح بكسلات، ولا درج ينزلق من translateX(100%)، ولا سهم يزحف +٤ بكسل عند التمرير. فـ CSS لا يملك تحويلًا منطقيًا، ولذلك تُعالج هذه لكل اتجاه على حدة — والعطل صامت، لأن الكود ما زال يعمل والعنصر ما زال يتحرّك، لكن نحو الحافة الخاطئة.

٣. أيقونات تحمل اتجاهًا

• اعكس هذه: أسهم الرجوع والتقدّم، والتالي والسابق، والإزاحة، والتراجع والإعادة، والردّ، وخطوط الاتجاه، وأسهم التقدّم.
• لا تعكس هذه أبدًا: الساعة، وزرّ التشغيل، وعلامة الصحّ، والشعار، والعدسة، وكل ما يحوي نصًّا لاتينيًا.
• تطبيق transform: scaleX(-1) على كل أيقونة في RTL سيقلب شعارك وزرّ التشغيل. ويحدث هذا باستمرار.

٤. المحتوى المختلط والنصّ ثنائي الاتجاه

رقم هاتف أو سعر أو رقم إصدار أو تاريخ أو اسم منتج لاتيني داخل جملة عربية ستعيد الخوارزمية ثنائية الاتجاه ترتيبه ما لم يُعزَل المقطع. والنتيجة ليست خللًا تنسيقيًا — فتاريخٌ يُعرض ١٣-٠٩-٢٠٢٦ وحقّه أن يُقرأ ٢٠٢٦-٠٩-١٣ حقيقة خاطئة على الصفحة، والآلة التي تقرؤها تسجّل الحقيقة الخاطئة.

<!-- reorders: the + jumps, the groups swap -->
<p>اتصل على +20 150 515 5999</p>

<!-- holds: the Latin run is isolated -->
<p>اتصل على <span dir="ltr">+20 150 515 5999</span></p>

٥. إعدادات طباعية لا تنطبق

العربية خطّ متّصل. وخاصية letter-spacing تفكّ وصلاته وتنتج نصًّا يُقرأ كأنه معطوب — فنظام التصميم الذي يطبّق تباعدًا عامًّا على العناوين يجب أن يبطله في RTL. وينطبق الأمر نفسه على text-transform: uppercase التي لا تفعل شيئًا بالعربية، وعلى أوزان الخطوط، لأن العربية بالوزن الرقمي نفسه تُقرأ دائمًا أثقل من اللاتينية.