كتابة CSS عربي دون مفاجآت — دليل عملي لـ logical properties

العمل على واجهات عربية يكشف بسرعة محدوديّات الـ CSS التقليدي. padding-left وmargin-right تنقلب على وجوهها في اتجاه RTL، وتُحدِث مفاجآت غير مرغوبة.

Logical properties: الأساس

بدلاً من left/right وtop/bottom، استخدموا:

• inline-start / inline-end بدل left/right
• block-start / block-end بدل top/bottom
• padding-block وpadding-inline
• margin-block وmargin-inline

أمثلة عمليّة

كلّ ما تكتبونه بـ logical properties يعمل تلقائيّاً في الاتجاهين، دون كود إضافي للـ RTL.

عند البناء لمشروع عربي، اعتبروا أنّ كلّ left أو right هو خطأ محتمل.

الاستثناءات

هناك أماكن قليلة تحتاجون فيها الاتجاه الفيزيائي: الأيقونات التي لا تنقلب (سهام التشغيل في الفيديو، مثلاً)، أو محتوى لاتيني داخل سياق عربي.