مجموعة أزرار الاختيار

في مجموعة أفقية ينقلب معنى السهمين مع الاتجاه: ArrowRight هو «التالي» في LTR، وفي RTL يصير ArrowLeft هو التالي و ArrowRight هو السابق، تماماً كما في شريط التبويبات. Chromium يطبّق هذا وحده على <input type="radio"> الأصلي، فتحت direction: rtl ينقل ArrowLeft التركيز إلى الخيار التالي في ترتيب المصدر ويختاره معه، أمّا مجموعة يدوية بـ role="radio" فلا ينالها شيء من ذلك: اقرأ الاتجاه وقت التنفيذ من group.matches(":dir(rtl)") أو getComputedStyle(group).direction ثم اضرب الخطوة في ‎-1، ولا تستنتجه من لغة الواجهة لأن أي حاوية قد تُقلب وحدها. أمّا ArrowUp و ArrowDown فلا ينقلبان أبداً، لأن الانعكاس يقع على المحور المضمّن وحده والمحور الكتليّ يبقى من أعلى إلى أسفل في اللغتين.

الدائرة تجلس عند البداية المنطقية للخيار، أي يميناً في العربية ويساراً في الإنجليزية: اجعل صفّ الخيار flex بفجوة gap ودع ترتيب الـ DOM يتكفّل بالباقي، أو استعمل padding-inline-start بدل padding-left إن رسمت الدائرة بـ ::before. والنصّ الوصفيّ تحت التسمية يُزاح بـ margin-inline-start حتى يحاذي أوّل حرف من التسمية لا حافّة الدائرة، وأيّ margin-left هنا يدفعه إلى الجهة الخطأ بمجرّد انعكاس الصفحة. أمّا إخفاء الـ input الأصلي بـ position: absolute; left: -9999px فلا يكلّف شيئاً في LTR ويضيف شريط تمرير أفقياً في RTL: القياس في Chrome يُظهر أن input واحداً يرفع scrollWidth لحاوية عرضها ٣٠٠ بكسل إلى نحو ١٠٠٠٠ بكسل، لأن الفائض نحو اليسار قابل للتمرير تحت direction: rtl ويُقصّ تحت ltr، فاقصص الـ input في مكانه بمربّع ١ بكسل مع clip-path: inset(50%).

الصفّ الأفقي يُملأ من اليمين في العربية، وعند الالتفاف يبدأ السطر الثاني من اليمين أيضاً، وهذا هو سلوك flex-wrap الافتراضي تحت direction: rtl فلا يحتاج أيّ تدخّل. لا تكتب flex-direction: row-reverse لتصحيح الاتجاه، فالمحور المضمّن انعكس مرّة بالفعل، والعكس الثاني يُخالف بين الترتيب البصري وترتيب الـ DOM فتتحرّك الأسهم عكس ما تراه العين. ولو بنيت التخطيط بـ grid فترقيم خطوط الشبكة يتبع المحور المضمّن كذلك: grid-column: 1 هو العمود الأيمن في العربية، فاستعمل الترقيم كما يأتي ولا تعكسه يدوياً.

إذا رسمت المجموعة شريطاً ملتحماً بمؤشّر ينزلق خلف الخيار المختار، فالمؤشّر يسافر على المحور المنطقي من اليمين إلى اليسار في العربية، و offsetLeft عاجز عن وصف ذلك لأنه يُقاس من الحافّة اليسرى مهما كان الاتجاه فيوقف المؤشّر تحت الخيار الخطأ. قِس المسافة من البداية المنطقية بدلاً منه: في RTL هي group.getBoundingClientRect().right ناقص item.right، وفي LTR هي item.left ناقص group.left. ثمّ حرّكه بـ inset-inline-start، أو بـ translateX مضروباً في متغيّر ‎--dir قيمته ‎-1 داخل [dir="rtl"]، لأن transform فيزيائي ولا مكافئ منطقي له في CSS.

الانعكاس بصريّ بحت ولا يمسّ ترتيب الـ DOM، فـ«الخيار الأوّل» يظلّ أوّل عنصر في المصدر وهو الأقصى يميناً في مجموعة أفقية عربية. وعليه فنقطة الدخول عند غياب اختيار مسبق هي هذا العنصر نفسه، والالتفاف بالأسهم يتبع ترتيب المصدر فيقفز التركيز من الخيار الأقصى يساراً على الشاشة إلى الأقصى يميناً، وإن أضفت Home و End فهما يقصدان أوّل وآخر عنصر في المصدر كذلك. كما أن name و value بيانات لا تخطيط فلا تتغيّران مع الاتجاه، وترتيب الحقول في FormData يتبع المصدر لا الشاشة، والدائرة والنقطة داخلها متماثلتان حول محورهما الرأسي فأخرجهما من أيّ قاعدة scaleX(-1) عامّة تطبّقها على الأيقونات.