الخطّ الفاصل

الخطّ الذي يبدأ بعد أيقونة الصفّ يجب أن يتبع الأيقونة عند انعكاس الصفحة. اكتب ‎margin-inline-start: 56px‎ لا ‎margin-left: 56px‎، وإلا بقيت الإزاحة على اليسار في العربية بينما انتقلت الأيقونة إلى اليمين، فيبدو الخطّ مقطوعاً من الطرف الخطأ. أمّا الإزاحة المتساوية من الجهتين فقيمة واحدة ‎margin-inline: 16px‎ ولا تحتاج انعكاساً لأنها متماثلة أصلاً. ولاحظ أن المتصفّح نفسه يكتب هوامش ‎<hr>‎ الافتراضية بخصائص منطقية (‎margin-inline: auto‎)، فالكود الفيزيائي هنا يتراجع عن الافتراضي بدل أن يبني عليه.

الفاصل الذي تتوسّطه كلمة لا يحتاج انعكاساً إذا بُني بصفّ flex فيه ‎flex: 1‎ على الخطّين المحيطين بالكلمة: المحور المضمّن يرتّب نفسه، والتوسيط متماثل في الاتجاهين. والفاصل الذي تبدأ كلمته من أول السطر يُضبط بـ ‎text-align: start‎ أو بترتيب عناصر flex، ولا يُكتب له ‎text-align: left‎ أبداً. البناء الوحيد الذي ينكسر هنا هو الذي يرسم الخطّين بـ ‎::before‎ و ‎::after‎ مثبّتين بـ ‎left: 0‎ و ‎right: 0‎، فحوّلهما إلى ‎inset-inline-start‎ و ‎inset-inline-end‎.

الخطّ الرأسي الذي يفصل مجموعتي أزرار في شريط أدوات يُرسم عادةً كحدّ على المجموعة التالية. اكتب ‎.group + .group { border-inline-start: 1px solid var(--line) }‎: المُحدِّد ‎+‎ يتبع ترتيب DOM، والحافّة inline-start تتبع اتجاه القراءة، والاثنان يتّفقان في العربية كما يتّفقان في الإنجليزية. أمّا ‎border-left‎ فينتقل بعد الانعكاس إلى الحافّة الخارجية للمجموعة الأخيرة، فيظهر خطّ زائد على طرف الشريط ويختفي الخطّ الذي كان بين المجموعتين. وإن رسمت الفاصل عنصراً مستقلاً بعرض ‎1px‎ داخل صفّ flex فهو محايد اتجاهياً ولا يحتاج أي تعديل.

الخطّ الذي يتلاشى نحو نهايته يُرسم بـ ‎linear-gradient‎، والتدرّجات لا تعرف الكلمات المنطقية: القيم المتاحة ‎to right‎ و ‎to left‎ وزوايا بالدرجات، ولا وجود لـ ‎to inline-end‎. فالخطّ المكتوب ‎to right‎ يتلاشى عكس اتجاه القراءة في العربية. عالجه بقاعدة صريحة ‎[dir="rtl"] .fade { background-image: linear-gradient(to left, …) }‎، أو بتدرّج متماثل يخفت من الطرفين معاً فلا يبقى للاتجاه أثر. والقيد نفسه ينطبق حرفياً على ‎mask-image‎ إذا أخفيت به طرف الخطّ.

الفاصل الذي يأخذ التركيز ويحرّكه المستخدم يتحوّل من عنصر بنيوي إلى أداة تحكّم، فيصير ‎aria-valuenow‎ مطلوباً عليه، بينما القيمتان الضمنيتان لـ ‎aria-valuemin‎ و ‎aria-valuemax‎ هما ٠ و ١٠٠. وأحداث المؤشّر تسلّمك إزاحة فيزيائية بحتة: ‎clientX‎ يزيد نحو اليمين مهما كان اتجاه الصفحة، فالسحب يميناً في العربية يجب أن يصغّر اللوح الأول لا أن يكبّره. اضرب الفرق في إشارة تقرأها من ‎getComputedStyle(el).direction === "rtl" ? -1 : 1‎ قبل تحديث القيمة، وطبّق القلب نفسه على ‎ArrowLeft‎ و ‎ArrowRight‎ حتى يظلّ المقبض يتحرّك بصرياً في اتجاه السهم المضغوط. واجعل ‎aria-valuenow‎ يصف نسبة اللوح عند البداية المنطقية لا اللوح الأيسر.