margin-inline-start: هامش يتبع اتجاه النص العربي والإنجليزي

الخلاصة السريعة

جرّب مسافة واحدة باتجاهين

في مثالنا الأفقي، يترك margin-inline-start: 24px مسافة 24px يسار البطاقة ذات الاتجاه ltr، ويمين البطاقة ذات الاتجاه rtl؛ تعتمد المطابقة على اتجاه العنصر نفسه. [1][3]

أنشئ حاويتين من الفئة frame وداخل كل منهما عنصر item. أعط الأولى dir="ltr" والثانية dir="rtl"، واترك العنصرين الداخليين يرثان الاتجاه. في هذه التجربة لا نضيف حدودًا أو حشوًا؛ يمكن تلوين الحاوية والبطاقة لرؤية الفراغ. غيّر الاتجاه وحده ولا تغيّر قيمة الهامش. [1]

مرّر الشيفرة أفقيًا عند الحاجة.

.frame { display: flex; width: 300px; writing-mode: horizontal-tb; }
.item {
  display: block;
  width: 100px;
  margin: 0;
  margin-inline-start: 24px;
}

لماذا لا تعني البداية اليسار دائمًا؟

محور inline يسير مع السطر، ومحور block يتبع تعاقب الكتل؛ يكون inline أفقيًا في الكتابة العربية والإنجليزية المعتادة، وقد يصير رأسيًا عند تغيير writing-mode. [2]

تصف left وright جهتين ثابتتين، بينما تصف start وend علاقتين بتدفق المحتوى. لذلك نختار الخاصية بحسب الغرض: هل نريد مسافة عند يسار الصفحة مهما كانت لغتها، أم عند بداية السطر؟ في واجهة تتبدل لغتها، يجعل الوصف الثاني مقصد التصميم أوضح. لا تفترض أن inline يعني أفقيًا في كل الأنماط؛ تغيير نمط الكتابة يغيّر المحور نفسه، وليس اتجاه الحركة عليه فقط. [2]

ثبّت الاتجاه في HTML

استخدم dir="rtl" للمحتوى العربي وdir="ltr" للإنجليزي المعروف الاتجاه؛ lang يحدد اللغة ولا يحدد اتجاهها تلقائيًا، ويرث العنصر الاتجاه عادةً إذا لم يحدده. [4]

تمثل العينة التالية المحتوى نفسه الذي نستعمله مع التنسيق السابق. عيّن الاتجاه صراحة لأن اللغتين معلومتان. أما النص الآتي من مستخدم ولا تعرف اتجاهه، فتتيح dir="auto" استنتاج الاتجاه أساسًا من أول محرف ذي اتجاه قوي؛ هذه آلية لتحديد الاتجاه وليست كشفًا للغة. قد تبدأ جملة عربية باسم إنجليزي، فلا تجعل التخمين بديلًا عن معلومة تعرفها. [4]

مرّر الشيفرة أفقيًا عند الحاجة.

<div class="frame" dir="ltr" lang="en">
  <div class="item">Preview</div>
</div>
<div class="frame" dir="rtl" lang="ar">
  <div class="item">معاينة</div>
</div>

افحص التعارض مع الهامش القديم

في الكتابة الأفقية ltr، إذا كتبنا margin-inline-start: 24px ثم margin-left: 8px داخل القاعدة نفسها، تصبح المسافة اليسرى 8px؛ ومع rtl يحددان جهتين مختلفتين: 24px يمينًا و8px يسارًا. [3]

تتنافس الخاصية المنطقية والخاصية المادية حين تحددان الجانب نفسه وفق ترتيب وأولوية CSS. المثال يفترض تصريحين عاديين داخل قاعدة واحدة، دون قاعدة أعلى أولوية تتدخل. عند تحويل تصميم قديم، راجع margin-left وmargin-right وmargin معًا. كذلك إن حدد العنصر الداخلي اتجاهًا مختلفًا عن أبيه، فمطابقة هامشه تتبع اتجاهه هو؛ لا تستنتجها من لغة الصفحة وحدها. [3]

مرّر الشيفرة أفقيًا عند الحاجة.

.item {
  margin-inline-start: 24px;
  margin-left: 8px;
}