عند تصميم مواقع الويب ، يعد تقديم الطعام لكل من لغات اليسار إلى اليمين (LTR) واليمين إلى اليسار (RTL) ضروريًا للجمهور العالمي. في حين أن معظم المطورين على دراية باستخدام الهامش اليساري والهامش اليمين لتعديلات التخطيط ، فإن هذه الخصائص تقصر في البيئات التي يتغير فيها اتجاه النص. أدخل Margin-Inline-Start ونظرائها المنطقي-خصائص CSS الحديثة التي تجعل التصميم للمحتوى متعدد اللغات وثليبيًا أسهل.

في هذه المقالة ، سنستكشف كيفية التحول من الهامش-اليسار/الهامش إلى اليمين إلى الهامش في البداية والهامش في نهاية الخطية يحسن المرونة ويحافظ على الاتساق عبر لغات LTR و RTL.

فهم الخصائص المنطقية في CSS

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

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

• بداية الهامش: يستبدل الهامش لتراجع LTR و Hargin-Right لـ RTL.
• نهاية الهامش: يستبدل يمين الهامش لـ LTR و Margin-Left لـ RTL.

تتماشى هذه الخصائص بشكل أفضل مع التدفق الطبيعي للنص ثنائي الاتجاه ، مما يجعلها لا غنى عنها لتصميم الويب الدولي.

لماذا تستخدم الهامش-إنترت؟

1 - دعم RTL سلس
عند استخدام الهامش اليسرى ، فإنه يطبق دائمًا الهامش على الجانب الأيسر من عنصر ، بغض النظر عن اتجاه النص. لا يتغير هذا السلوك حتى عندما تتحول الصفحة إلى RTL ، مما يؤدي إلى تخطيطات غير متوازنة. على النقيض من ذلك ، يتكيف الهامش في البداية بناءً على اتجاه النص ، بتطبيق الهامش على الجانب المناسب:

/* Logical property */
.element {
 margin-inline-start: 20px;
}
/* Equivalent to */
:root[dir="ltr"] .element {
 margin-left: 20px;
}
:root[dir="rtl"] .element {
 margin-right: 20px;
}

2 - رمز نظافة
بدون خصائص منطقية ، يتطلب دعم كل من LTR و RTL أنماطًا خاصة بالاتجاه ، مما يضيف التعقيد وإمكانية الأخطاء. إليك مقارنة:

النهج التقليدي:

:root[dir="ltr"] .element {
 margin-left: 20px;
}
:root[dir="rtl"] .element {
 margin-right: 20px;
}

النهج الحديث:

.element {
 margin-inline-start: 20px;
}

3 - مقاومة في المستقبل وقابلة للتطوير
الخصائص المنطقية هي جزء من تطور CSS المستمر نحو التخطيطات التكيفية والمرنة. من خلال تبني الهامش في البداية ، يمكنك مواءمة تصميماتك مع المعايير الحديثة ، مما يجعلها أكثر قابلية للتطوير وقابلة للصيانة.

مثال حقيقي

إليك كيف يمكنك إعادة إنشاء تخطيط بطاقة نموذجي لدعم RTL أفضل:
قبل: استخدام الهامش ليف

.card {
 margin-left: 1rem;
 padding-left: 2rem;
}

في RTL ، سوف ينظر التصميم لأن التباعد يبقى مثبتًا على الجانب الأيسر.
بعد: استخدام Margin-Inline-Start

.card {
 margin-inline-start: 1rem;
 padding-inline-start: 2rem;
}

الآن ، تعدل الهوامش والحمل تلقائيًا عندما يتغير الاتجاه ، مما يضمن تجربة مستخدم ثابت.

دعم المتصفح

الخصائص المنطقية مدعومة بشكل جيد في المتصفحات الحديثة ، بما في ذلك الكروم ، الحافة ، Firefox ، و Safari. إذا كنت بحاجة إلى دعم المتصفحات القديمة ، ففكر في استخدام الاحتياطات:

.card {
 margin-left: 1rem; /* Fallback */
 margin-inline-start: 1rem;
}

الأفكار النهائية

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

إذن في المرة القادمة التي تصل فيها إلى الهامش اليساري ، وقفة ، وتفكر في: هل سيقوم الهامش في بدء العمل بشكل أفضل؟ فرص ، سوف.

ترميز سعيد ، وقد تتدفق تصميماتك بشكل جميل في أي لغة!