لماذا تنعكس قيم الهوامش بصريا في المتصفحات العربية؟

مرحبا،

عندما نكتب CSS نستخدم قاعدة الهوامش بهذا الشكل:

margin: 3px 30px 2px 5px;

وهذه القيم تعني:

• 3px: هامش من الأعلى
• 30px: هامش من اليمين
• 2px: هامش من الأسفل
• 5px: هامش من اليسار

لكن في اللغة العربية أو أي لغة تكتب من اليمين إلى اليسار سيتم عرض الصفحة بالعكس لكن قيم CSS لا تتغير تلقائيا ففي اللغة الإنجليزية سيظهر الهامش الأيمن (30px) على يمين العنصر بينما في اللغة العربية سيظهر نفس الهامش (30px) لكن على يسار العنصر (لأن الاتجاه انعكس).

لحل هذه المشكلة يمكنك استخدام خصائص CSS الحديثة التي تتكيف مع اتجاه اللغة:

margin-block-start: 3px; 
margin-inline-end: 30px; 
margin-block-end: 2px;    
margin-inline-start: 5px; 

وفي حال كان سؤالك متعلقا بإحدى الدورات التي قمت بالاشتراك فيها، أرجو منك الانتقال إلى قسم "دوراتي" ثم أسفل الدرس الذي واجهت فيه المشكلة، قم بإضافة سؤالك هناك، وهذا لمساعدتك بشكل أفضل.
بالتوفيق إن شاء الله.