انتقل إلى محتوى الدرس

Logical Start and End اتجاها البداية والنهاية

فعّل الدعم الأصيل للغة العربية RTL في Bootstrap 5.3 عبر dir="rtl" وملف bootstrap.rtl.min.css، وأتقن الاتجاهات المنطقية start وend ودمج الخطوط العربية وعزل BiDi.
3 صفوف تعليمية
بوتستراب 5
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

لكي يعمل قالب HTML واحد بكفاءة تامة في كلتا اللغتين العربية والإنجليزية دون تعديل الكلاسات، استبدل بوتستراب 5 التسميات المكانية الجامدة بمفهوم الاتجاهات المنطقية المرتبطة بتدفق القراءة:

  • نقطة البداية start: تشير إلى الحافة اليمنى في المستندات العربية RTL لأن العين تبدأ القراءة من اليمين، وتشير تلقائياً إلى الحافة اليسرى في المستندات الإنجليزية LTR.
  • نقطة النهاية end: تشير إلى الحافة اليسرى في المستندات العربية RTL، وتنعكس إلى الحافة اليمنى في المستندات الإنجليزية LTR.

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

الصف 2 كود برمجي
HTML
<div class="container">
  <blockquote class="rtl-box">
    <p>Logical border-inline-start sits on the right!</p>
    <ul>
      <li>First RTL item aligned to start</li>
      <li>Second RTL item with mirrored marker</li>
    </ul>
  </blockquote>
</div>
الصف 3 معاينة حية