الشريط المقسّم

ترتيب DOM لا يتغيّر، والذي ينعكس هو المحور المضمّن، فيقع الخيار الأول عند يمين الشريط في العربية والأخير عند يساره. وهذا يحدث وحده في صفّ flex أو grid، فلا تضف flex-direction: row-reverse ولا خاصية order داخل [dir="rtl"]، لأن الانعكاس الثاني يعيد الترتيب البصري إلى ما كان عليه ويجعل ما تراه العين مخالفاً لما يمشي عليه Tab. والشيء الوحيد الذي يبقى عليك عكسه بيدك هو الرسم الذي يحمل اتجاهاً بذاته: أيقونات محاذاة النصّ خطوط متراصّة تلتصق بجهة واحدة، و«محاذاة إلى البداية» في العربية تلتصق باليمين، فاقلبها بـ transform: scaleX(-1) داخل [dir="rtl"] أو استعمل ملفّ SVG ثانياً.

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

الشريط مدوّر من طرفيه فقط وأقسامه الوسطى قائمة الزوايا. و rounded-l و rounded-r، أي border-top-left-radius وأخواتها، تثبّت التدوير على اليسار واليمين الفيزيائيين، فيصير القسم الأول في العربية مربّع الزاوية من الخارج مدوّرها من الداخل. استخدم border-start-start-radius و border-end-start-radius على القسم الأول، و border-start-end-radius و border-end-end-radius على الأخير؛ الكلمة الأولى تسمّي المحور الكتلي والثانية المحور المضمّن، وفي Tailwind هما rounded-s-* و rounded-e-*. ويبقى ‎:first-child هو المحدّد الصحيح، لأنه يتبع ترتيب DOM وهو نفسه ترتيب البداية المنطقية.

في مجموعة الاختيار ينقل السهم التركيز ويغيّر القيمة في الضغطة نفسها، ومعنى «التالي» في العربية هو ArrowLeft. ولا تعتمد على المحرّك في تبديل المفتاحين: Chromium يقرأ اتجاه المدخل المحسوب فيبدّل بين ArrowLeft و ArrowRight تحت rtl، أمّا WebKit فيبقى ArrowRight عنده «التالي» مهما كان الاتجاه، والترميز نفسه يمشي إلى الخلف في Safari. اقرأ الاتجاه بـ getComputedStyle(el).direction داخل معالج keydown وبدّل المفتاحين هناك مع preventDefault، سواء كتبت المجموعة بيدك أو رقّعت مدخلات radio أصلية. أمّا ArrowUp و ArrowDown فلا يتبادلان أبداً، لأن المحور الكتلي لا ينعكس مع العربية.

تسميات هذا العنصر قصيرة، وكثير منها لاتيني خالص: PNG و SVG، أو 1D و 1W، أو USD. الكلمة اللاتينية وحدها تُعرض سليمة، لكن أي محرف محايد ملاصق لها يأخذ اتجاه الفقرة وينتقل إلى الطرف الآخر من التسمية، فتظهر «+20%» داخل شريط عربي على الشاشة هكذا: «20%+». اعزل كل تسمية بذاتها بـ dir="ltr" على عنصرها أو بـ <bdi>، ولا تعالج الأمر بوضع dir="ltr" على الشريط كله وإلا انقلب ترتيب الأقسام معه.