خصائص CSS المنطقية لتخطيطات RTL
لماذا تنكسر left وright في RTL
الخصائص مثل <code>;margin-left<;/code>; و<code>;padding-right<;/code>; تشير إلى جهة ثابتة من الشاشة. وفي الواجهة العربية تكون بداية السطر على اليمين، فيظهر الفراغ الذي كان مقصودًا قبل الأيقونة بعدها.
الخصائص المنطقية تصف الجهات بالنسبة لاتجاه الكتابة بدل الجهة الفيزيائية. بذلك تخدم ورقة أنماط واحدة الإنجليزية والعربية دون مجموعة قواعد ثانية.
من الأعراض المعتادة لاستخدام الخصائص الفيزيائية في صفحة RTL ما يلي:
- أيقونة تقع في الجهة الخطأ من تسميتها ويظهر فراغها على الحافة الخارجية.
- شريط ملوّن يبقى على الحافة اليسرى للبطاقة بينما يبدأ النص من اليمين.
- زر إغلاق يبقى في الزاوية اليسرى من نافذة حوار، بعيدًا عن المكان الذي يتوقعه القارئ العربي.
المحور السطري والمحور الكتلي
يمثّل المحور السطري (inline) اتجاه جريان النص داخل السطر: من اليسار إلى اليمين في الإنجليزية ومن اليمين إلى اليسار في العربية. أما المحور الكتلي (block) فهو اتجاه تراكب الأسطر، من الأعلى إلى الأسفل في اللغتين.
تحلّ البداية والنهاية (start وend) محل اليسار واليمين، ويصبح الأعلى والأسفل block-start وblock-end.
عادة مفيدة أن تقرأ كل قاعدة تباعد كأنها جملة عن ترتيب القراءة: فراغ قبل التسمية وفراغ بعد الأيقونة. فإن بقيت الجملة سليمة بعد انقلاب الصفحة فالقاعدة منطقية غالبًا، وإن ذكرت جهة من الشاشة فأعد كتابتها.
البدائل الشائعة
التباعد
يحل مكان الهامش الأيسر هامش البداية <code>;margin-inline-start<;/code>;، ويحل مكان الحشو الأيمن حشو النهاية <code>;padding-inline-end<;/code>;. أما القيمة <code>;padding-inline: 16px<;/code>; فتضبط جهتي السطر معًا في تصريح واحد.
الموضع
استبدل القيمة <code>;left: 0</code>; بالقيمة <code>;inset-inline-start: 0</code>; لتلتصق العناصر المثبّتة بحافة البداية.
الحدود
استبدل الخاصية <code>;border-left<;/code>; بالخاصية <code>;border-inline-start<;/code>; مثلًا في شريط جانبي أو اقتباس.
محاذاة النص
تُستبدل القيمة <code>;text-align: left<;/code>; بالقيمة <code>;text-align: start<;/code>;، وتُستبدل القيمة right بالقيمة end، فتتبع المحاذاة لغة الصفحة.
Flexbox وgrid يتبعان الاتجاه تلقائيًا. عند وضع <code>;dir="rtl"</code>; على عنصر <code>;html<;/code>; يبدأ صف عناصر flex من اليمين دون أي شيفرة إضافية.
اضبط الاتجاه مرة واحدة على <code>;html<;/code>; عبر <code>;dir<;/code>; و<code>;lang<;/code>;، وليس على المكوّنات واحدًا واحدًا.
متى تحتاج استثناءات RTL
بعض الأمور ليس لها نسخة منطقية وتحتاج قاعدة خاصة بالاتجاه:
- قيم <code>;transform: translateX()</code>; والدوران، مثل لوحة تنزلق من الجانب.
- موضع الخلفية <code>;background-position<;/code>; عند استخدام الكلمتين left أو right فيه.
- الأيقونات الاتجاهية، مثل سهم يجب أن يشير إلى الجهة المعاكسة.
في هذه الحالات أضف استثناءً صغيرًا مثل <code>;[dir=rtl] .arrow { transform: scaleX(-1); }</code>; وأبقِ القائمة قصيرة.
دعم الخصائص المنطقية واسع في المتصفحات الحديثة. ومع ذلك تحقق من المتصفحات التي يستخدمها جمهورك فعلًا قبل حذف القواعد الفيزيائية القديمة، واختبر الصفحة في الاتجاهين بعد كل تغيير.
المصادر
- MDN Web Docs. CSS logical properties and values. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
- W3C. CSS Logical Properties and Values Level 1. https://www.w3.org/TR/css-logical-1/
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.