الدرج الجانبي

هذا هو الانعكاس الذي ينساه الجميع: ليس محتوى الدرج ما ينقلب، بل الحافّة التي يرتكز عليها ويخرج منها. فدرج التنقّل الذي يخرج من يسار الشاشة في الإنجليزية يجب أن يخرج من يمينها في العربية، لأنه مربوط ببداية القراءة لا باليسار الفيزيائي. اكتبه inset-inline-start: 0 مع inset-block: 0 و inline-size صريح، واحذف left و width تماماً، وحوّل الفاصل بين اللوح والمحتوى إلى border-inline-end بدل border-right. والاستثناء المشروع الوحيد درج مرتبط بمعنى ثابت لا بالقراءة، كلوحة تفاصيل تفتح دائماً عند نهاية جدول، وحتى هذا يُكتب inset-inline-end لا right.

لا يوجد نظير منطقي لـ translateX: دالة الإزاحة تعمل على المحور الفيزيائي X مهما كان اتجاه الصفحة، ولا شيء اسمه translate-inline في المواصفة. لذا translateX(-100%) الثابت يجعل الدرج في العربية يبدأ خارج الشاشة من الجهة المقابلة لحافّته ويعبر عرضها كلّه قبل أن يستقرّ. عرّف ‎--dir: 1 على الجذر و ‎--dir: -1 داخل [dir="rtl"]، ثم اكتب transform: translateX(calc(-100% * var(--dir))). البديل تحريك inset-inline-start من ‎-320px إلى صفر وهو ينعكس مجّاناً، لكنه يجبر المتصفّح على إعادة التخطيط في كل إطار بينما transform يُنفَّذ على المُركِّب.

إحداثيات المؤشّر واللمس فيزيائية دائماً: clientX يزداد نحو يمين الشاشة في العربية والإنجليزية على السواء، والمتصفّح لا يعكسها لك في RTL. لذا شرط مثل if (deltaX < -60) close() خطأ صريح لا مسألة ذوق: في العربية يجلس الدرج المرتكز على البداية عند يمين الشاشة، فالسحبة التي تُبعده نحو حافّته تتّجه يميناً وتُعطي deltaX موجباً لا يحقّق الشرط أبداً فيرتدّ اللوح إلى مكانه، بينما الحركة الوحيدة التي تحقّقه هي السحب يساراً بعيداً عن الحافّة نحو داخل الصفحة، فينغلق الدرج بجرّه فوق المحتوى: عكس ما تفعله يد المستخدم تماماً. اقرأ الاتجاه وقت الحدث عبر const sign = getComputedStyle(panel).direction === "rtl" ? -1 : 1، واضرب فيه الفرق قبل أي مقارنة. ونفس الإصلاح يلزم حدّ السرعة velocityX ومفتاحي ArrowLeft و ArrowRight إن أضفتهما.

الاثنان ينتقلان معاً إلى الجهة المقابلة. زرّ × يقف عند النهاية المنطقية لرأس اللوح: اجعله آخر ابن في صفّ flex مع justify-content: space-between فينضبط وحده، أو ثبّته بـ inset-inline-end بدل right. أمّا الظلّ فمصيدة أهدأ: box-shadow ليس له صيغة منطقية في CSS إطلاقاً، وقيمة مثل 8px 0 24px تُلقي الظلّ بعد الانعكاس خارج حافّة الشاشة حيث يقصّه المتصفّح، فيفقد اللوح ارتفاعه فوق المحتوى الذي يُفترض أنه يعلوه. اكتب الإزاحة الأفقية calc(8px * var(--dir))، أو صفّرها واكتفِ بالتمويه وحده فهو متماثل بطبعه. والرمز × متماثل حول محوره الرأسي فلا يُقلب، بينما سهم الطيّ « أيقونة اتجاهية تنعكس معه.

اتجاه الصفحة يحكم المحور المضمّن وحده. فالدرج المرتكز على حافّة كتلية، كالحافّة السفلية، لا ينتقل بين اللغتين أبداً: inset-block-end: 0 يبقى الأسفل نفسه، ومحور سحبه deltaY يبقى بنفس الإشارة، فلا تضف إليه متغيّر اتجاه من الأساس. والطبقة الحاجبة محايدة كذلك: inset: 0 يغطّي كل شيء وليس فيه ما ينقلب. وقفل التمرير خلف الدرج محايد هو الآخر، فـ overflow: hidden و overscroll-behavior: contain لا علاقة لهما بالاتجاه، وفيه شيء واحد ينقلب: موضع شريط التمرير المختفي يقع عند الحافّة المنطقية النهائية، أي على اليسار في صفحة dir="rtl"، فعوّضه بـ scrollbar-gutter: stable لا بـ padding-right ثابت.