الخصائص المنطقية في لغة CSSCSS Logical Properties

ترتبط خصائص الصندوق التقليدية في CSS — مثل margin-left وpadding-right وborder-left وright: 12px — باتجاهات الشاشة الفيزيائية الثابتة. فعند تصميم بطاقة تنبيه إنجليزية بشريط جانبي عبر border-left وهامش أيقونة عبر margin-right، تنكسر الواجهة فوراً عند تحويل الصفحة إلى العربية dir="rtl"؛ إذ يظل الشريط عالقاً في اليسار خلف نهاية الجملة وتلتصق الأيقونة بالكلمة العربية الأولى.

تحل الخصائص المنطقية هذه المشكلة جذرياً؛ فبدلاً من تقييد التصميم باليمين واليسار الثابتين، تصف الأبعاد والمسافات نسبةً إلى بداية التدفق ونهايته، ليتكيف ملف أنماط واحد تلقائياً مع العربية والإنجليزية دون كتابة قواعد استثنائية مكررة.

تعتمد جميع الخصائص المنطقية على محورين قياسيين يتبعان حركة القراءة:

• المحور السطري Inline Axis: يمتد بموازاة سطر الكلمات؛ فحافته الابتدائية inline-start تمثل اليمين في العربية rtl واليسار في الإنجليزية ltr، بينما تمثل حافته الختامية inline-end اليسار بالعربية واليمين بالإنجليزية.
• المحور الكتلي Block Axis: يمتد باتجاه تتابع الفقرات؛ ففي الوضع الأفقي الافتراضي horizontal-tb توافق بداية الكتلة block-start الأعلى، وتوافق نهايتها block-end الأسفل في اللغتين معاً.

تستبدل خصائص الأبعاد المنطقية كلاً من العرض والارتفاع الفيزيائيين بأبعاد مرنة تتبع محاور الكتابة النشطة:

• الحجم السطري inline-size وحدوده min-inline-size وmax-inline-size: يضبط امتداد العنصر على طول السطر، فيكافئ width وحدوده في الوضع الأفقي، ويتحول تلقائياً لضبط الطول العمودي عند تدوير العنصر بوضع كتابة عمودي.
• الحجم الكتلي block-size وحدوده min-block-size وmax-block-size: يضبط بُعد تكدس الكتل، فيكافئ height وحدوده في الوضع الأفقي المعتاد.

فعند كتابة max-inline-size: 420px مع min-block-size: 120px تحصل على صندوق متجاوب يحافظ على تناسقه سواء عُرض أفقياً أو عمودياً.

بدلاً من كتابة استثناءات منفصلة لمسافات الأيقونات والقوائم عند تعريب الواجهة، توفر الهوامش والحشوات المنطقية خصائص فردية ومختصرة بالغة الوضوح:

• خصائص الحافة الواحدة: margin-inline-start وmargin-inline-end وmargin-block-start وmargin-block-end، ويقابلها تماماً في الحشوات الداخلية padding-inline-start وpadding-inline-end وpadding-block-start وpadding-block-end.
• المختصرات المحورية: تتيح قاعدة margin-inline: auto توسيط الحاوية أفقياً بسطر واحد، كما تضبط padding-inline: 16px حشوة البداية والنهاية معاً، وتضبط padding-block: 10px الحشوة العلوية والسفلية معاً.

تستخدم صناديق الملاحظات والاقتباسات وعناصر القوائم النشطة شريطاً جانبياً ملوناً عند بداية السطر مع زوايا دائرية في الجهة المقابلة. وتوفر خصائص الإطارات والزوايا المنطقية تحكماً كاملاً يتبع اتجاه اللغة تلقائياً:

• الإطارات المنطقية: border-inline-start وborder-inline-end وborder-block-start وborder-block-end، إضافة إلى المختصرين border-inline وborder-block.
• تدوير الزوايا المنطقي: يُكتب بترتيب المحور الكتلي أولاً ثم السطري عبر الأربع خصائص border-start-start-radius وborder-start-end-radius وborder-end-start-radius وborder-end-end-radius.

تعتمد أزرار الإغلاق وشارات الإشعارات العلوية على التموضع المطلق position: absolute داخل بطاقة نسبية position: relative. وعند تثبيت الشارة فيزيائياً بقاعدة right: 10px فإنها تصطدم بعنوان البطاقة العربي فور تحويل الاتجاه إلى dir="rtl".

تعالج عائلة inset المنطقية إزاحات التموضع بمرونة تامة:

• الإزاحة الكتلية inset-block-start وinset-block-end: تحل محل top وbottom في الوضع الأفقي.
• الإزاحة السطرية inset-inline-start وinset-inline-end: تثبت الشارة في الزاوية الختامية عبر inset-inline-end: 10px فتظهر أقصى اليمين بالإنجليزية وتنتقل تلقائياً لأقصى اليسار بالعربية.
• المختصرات: inset-block وinset-inline والمختصر الشامل inset: 0 لملء الحواف الأربع بقاعدة واحدة.

لا تقتصر المنطقية على أسماء الخصائص الجديدة، بل تمتد أيضاً إلى قيم محاذاة النصوص والطفو لضبط الجداول والنماذج والصور المرافقة للمقالات تلقائياً:

• المحاذاة المنطقية text-align: start وtext-align: end: تحل محل left وright الصريحتين؛ فتضمن start محاذاة العناوين وخلايا الجداول مع بداية اللغة، وتضمن end محاذاة أعمدة الإجراءات والأزرار عند حافة النهاية.
• الطفو والمسح المنطقي float: inline-start وfloat: inline-end مع clear: inline-start وclear: inline-end: تضع الصورة الرمزية للكاتب في بداية الفقرة يميناً بالعربية ويساراً بالإنجليزية تلقائياً.

لنجمع الآن الأبعاد والهوامش والحشوات والإطارات وتدوير الزوايا وإزاحات التموضع المنطقية في ملف أنماط موحد لبطاقة منتج متكاملة تعمل بالعربية dir="rtl" والإنجليزية dir="ltr" معاً دون سطر استثنائي واحد:

احتفظ بجدول التحويل الشامل التالي كمرجع عملي سريع عند ترقية الأنماط الفيزيائية إلى خصائص منطقية حديثة: