الصورة الرمزية ومجموعتها

في الإنجليزية تجلس أول صورة عند اليسار وتنزلق كل تالية تحت سابقتها نحو اليمين، وفي العربية ينقلب هذا كلّه: أول صورة عند اليمين والصفّ ينمو نحو اليسار. اكتب الإزاحة margin-inline-start: -8px على كل صورة عدا الأولى، فهي تسحب الصورة نحو سابقتها أياً كانت جهة «السابقة». أمّا margin-left: -8px فيظلّ يسحب نحو اليسار بعد الانعكاس، فتنزلق كل صورة تحت التي تليها بدل التي تسبقها، وتلتصق الأولى بالثانية بلا تداخل، وتسحب الأخيرة حافّة الصفّ البعيدة ثمانية بكسل إلى الداخل. ولا تعالجها بإضافة margin-right داخل [dir="rtl"]، فالخاصّية المنطقية تؤدّي العمل كاملاً بلا استثناء.

المظهر الذي تنزلق فيه كل صورة تحت سابقتها يأتي من z-index يسير عكس ترتيب DOM: الأولى تأخذ أعلى قيمة والأخيرة أدناها، لأن المتصفّح بغير ذلك يرسم العنصر المتأخّر فوق المتقدّم فينقلب المظهر. وهذه القيم لا تتغيّر بتغيّر الاتجاه، فـ z-index خاصّية رسم لا خاصّية تخطيط وليس لها صيغة منطقية أصلاً، وإعادة عكسها داخل [dir="rtl"] ترفع آخر صورة فوق الجميع ويظهر الصفّ مقلوباً. والذي ينتقل فعلاً هو الهلال المخفيّ من كل دائرة: يبقى عند البداية المنطقية، فينتقل من الحافّة اليسرى لكل صورة في الإنجليزية إلى حافّتها اليمنى في العربية. وتجنّب حيلة flex-direction: row-reverse مع ترتيب DOM معكوس للوصول إلى نفس المظهر، لأن row-reverse تُحسب بالنسبة إلى direction فتقلب الصفّ العربي كلّه رأساً على عقب.

النقطة تجلس في الزاوية السفلية عند النهاية المنطقية: أسفل اليمين في الإنجليزية وأسفل اليسار في العربية. ثبّتها بـ inset-inline-end: 0 مع inset-block-end: 0 بدل right: 0. والفخّ في الإزاحة الصغيرة التي تدفعها نحو الحافّة، فـ transform ليس له صيغة منطقية أصلاً: القيمة الموجبة في translate(25%, 25%) تدفع نحو اليمين دائماً، فحين تنتقل نقطة الارتساء إلى الجهة اليسرى في العربية صارت الإزاحة نفسها تزحف بالنقطة إلى داخل الوجه بدل أن تخرج بها. اضرب المحور الأفقي في إشارة ‎--dir‎ قيمتها ‎-1‎ داخل [dir="rtl"]، أو استغنِ عن transform واستعمل inset-inline-end: -2px. وإن وضع مكوّن جاهز الشارة بقيمة اسمها "left" أو "right" فالاسم فيزيائي: MUI يحلّ anchorOrigin بالنسبة إلى theme.direction، فتحقّق هل تفعل مكتبتك المثل قبل أن تعتمد على انعكاسها وحدها.

العدّاد يقف عند النهاية المنطقية للصفّ، فينتقل من أقصى اليمين في الإنجليزية إلى أقصى اليسار في العربية. وهذا يحدث وحده إن كان الصفّ flex عادياً وكانت الشارة آخر عنصر في DOM، أمّا لو رصفت الصور بـ position: absolute مع left: calc(i * 20px) فانقل الحساب إلى inset-inline-start وإلا استقرّ العدّاد فوق أول صورة. ويبقى النصّ نفسه محتاجاً إلى علاج مستقلّ عن التخطيط. فعلامة الزائد لا اتجاه لها: صنف U+002B في خوارزمية Unicode للاتجاه الثنائي هو ES، وهو صنف ضعيف لا قويّ ولا محايد، فتأخذ العلامة اتجاه ما حولها ويُرسم ما كُتب «+٣» على السطر العربي هكذا «٣+». هذا سلوك سليم من الخوارزمية وهو مع ذلك ليس ما رسمه المصمّم، فاعزل الرمز في span بـ dir="ltr"، وهي سمة تمنحه unicode-bidi: isolate من ورقة أنماط المتصفّح نفسها، أو اكتب العدد لفظاً مثل «و٣ آخرون».

الصورة محتوى لا زخرفة. والقاعدة الشاملة ‎[dir="rtl"] img, [dir="rtl"] svg { transform: scaleX(-1) }‎ التي يكتبها البعض لقلب الأيقونات تقلب معها الوجوه والشعارات وأي حروف مرسومة داخل الشعار، فاقصر القلب على صنف تضعه على الأسهم وحدها. وخاصّية object-position تقبل الكلمات الفيزيائية فقط، وهذا هو الصواب هنا لأن القصّ يخصّ الصورة لا الصفحة: قيمة object-position: right center تظلّ تعني الحافّة اليمنى للملفّ بعد الانعكاس، وهو المطلوب. أمّا الحروف الأولى فنصّ يرتّبه محرّك الاتجاه الثنائي وحده، فلا تعكس ترتيبه يدوياً في العربية، ووسّطه بـ text-align: center حتى لا يختلف موضع الحرف الواحد عن موضع الحرفين.