الشريحة

الترتيب داخل الشريحة منطقي لا فيزيائي: الأيقونة عند البداية المنطقية والـ × عند النهاية، فتجلس الأيقونة يميناً والـ × يساراً في الصفحة العربية. وحاوية display: flex بـ flex-direction: row تفعل هذا وحدها لأن المحور المضمّن يتبع direction، فلا تضف row-reverse داخل [dir="rtl"] لأنه يعكس الانعكاس ويعيد الـ × إلى جهة الأيقونة. والذي يحتاج تحويلاً هو الحشو غير المتماثل: padding: 4px 12px 4px 8px تصبح padding-block: 4px مع padding-inline: 8px 12px، و margin-right على الأيقونة تصبح margin-inline-end.

الالتفاف نفسه ينعكس وحده لأنه يتبع المحور المضمّن، فالفخّ ليس في flex-wrap بل في المحاذاة: justify-content: left و justify-content: right قيمتان فيزيائيتان لا تلتفتان إلى direction، بينما flex-start و start تتبعانه، فاستبدل left بـ flex-start وإلا تكدّست الشرائح على الجهة الخطأ في العربية بينما تبدو سليمة تماماً في الإنجليزية. ونفس القاعدة على text-align: left داخل الشريحة، بديلها text-align: start. وإن كان الصفّ قديماً مبنيّاً على inline-block و float: left فبدّل الـ float إلى inline-start، لأن float فيزيائي بحت ولا يعرف اتجاه الصفحة أصلاً.

مفاتيح الأسهم فيزيائية وترتيب الشرائح في الـ DOM منطقي، فالربط بينهما ينقلب: في مجموعة عربية يجب أن ينقل ArrowRight التركيز إلى الشريحة السابقة و ArrowLeft إلى التالية، وإلا مشى التركيز عكس أصابع المستخدم. اقرأ الاتجاه من العنصر نفسه لا من إعداد عام في التطبيق: getComputedStyle(el).direction === "rtl" أو el.matches(":dir(rtl)")، ثم اضرب مقدار الحركة في ‎-1. أمّا Home و End و Tab فلا تنقلب أبداً لأنها منطقية أصلاً: Home هي أوّل شريحة في الـ DOM أياً كان موضعها على الشاشة.

لو كان الصفّ شريطاً يُمرَّر أفقياً بدل أن يلتفّ، فحسابات التمرير هي أوّل ما ينكسر: في RTL تساوي scrollLeft صفراً عند بداية القراءة (الحافّة اليمنى) وتصير سالبة كلما تقدّم المستخدم نحو النهاية، وهو السلوك الذي استقرّت عليه المتصفّحات الحديثة، فأي كود يفترض المدى من صفر إلى موجب يمرّر في الاتجاه الخطأ أو لا يتحرّك أصلاً. ولا تحسبها يدوياً: استخدم chip.scrollIntoView({ inline: "nearest", block: "nearest" }) لإحضار شريحة مختارة، و scrollBy({ left: … }) مع عكس إشارة القيمة حسب الاتجاه في أزرار التمرير. وأضف scroll-padding-inline-start حتى لا تلتصق الشريحة بحافّة الشريط عند التمرير التلقائي.

الشريحة تحمل قيمة تأتي من المستخدم أو من الـ API، وكثيراً ما تكون لاتينية داخل واجهة عربية: «الإطار: React 18» أو «الملف: report-v2.pdf». والمحارف المحايدة (النقطة والشرطة والقوسان والنقطتان والـ × نفسها) لا اتجاه لها، فتأخذ اتجاه ما حولها، فيقع «(12)» في الجهة الخطأ من الاسم اللاتيني أو تلتصق الشرطة بالكلمة العربية التالية. والحلّ عزل لا فرض اتجاه: لُفّ القيمة بـ <bdi>، وهي مكافئة لـ <span dir="auto"> لأن الـ UA يطبّق عليها unicode-bidi: isolate و dir="auto" افتراضاً، أو طبّق unicode-bidi: isolate على span النصّ مباشرة. ولا تستعمل <bdo> هنا: هي تفرض الاتجاه قسراً وتقلب ترتيب المحارف نفسها.