RTL

تعرف على كيفية تمكين الدعم للنص من اليمين إلى اليسار في Bootstrap عبر التخطيط والمكونات والأدوات المساعدة الخاصة بنا.

على هذه الصفحة

تعرف على الأمر

نوصي بالتعرف على Bootstrap أولاً من خلال قراءة صفحة مقدمة البدء . بمجرد تشغيله ، تابع القراءة هنا لمعرفة كيفية تمكين RTL.

قد ترغب أيضًا في قراءة مشروع RTLCSS ، لأنه يدعم نهجنا في RTL.

ميزة تجريبية

لا تزال ميزة RTL قيد التجربة ومن المحتمل أن تتطور وفقًا لتعليقات المستخدمين. رصدت شيئا أو لديك تحسن لاقتراحه؟ افتح مشكلة ، يسعدنا أن نحصل على رؤيتك.

مطلوب HTML

هناك نوعان من المتطلبات الصارمة لتمكين RTL في الصفحات التي تعمل بنظام Bootstrap.

ضع dir="rtl"على <html>العنصر.
أضف سمة مناسبة lang، مثل lang="ar"، على <html>العنصر.

من هناك ، ستحتاج إلى تضمين إصدار RTL من CSS الخاص بنا. على سبيل المثال ، إليك ورقة الأنماط الخاصة بـ CSS المترجمة والمصغرة مع تمكين RTL:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">

نموذج المبتدئين

يمكنك رؤية المتطلبات المذكورة أعلاه في قالب بداية RTL المعدل.

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">

    <title>مرحبا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبا بالعالم!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

أمثلة من RTL

ابدأ بأحد أمثلة RTL العديدة الخاصة بنا .

يقترب

يأتي نهجنا لبناء دعم RTL في Bootstrap مع قرارين مهمين يؤثران على كيفية كتابتنا واستخدامنا لـ CSS:

أولاً ، قررنا أن نبنيها بمشروع RTLCSS . يمنحنا هذا بعض الميزات القوية لإدارة التغييرات والتجاوزات عند الانتقال من LTR إلى RTL. كما يسمح لنا ببناء نسختين من Bootstrap من قاعدة كود واحدة.
ثانيًا ، قمنا بإعادة تسمية مجموعة من فئات الاتجاه لاعتماد نهج الخصائص المنطقية. لقد تفاعل معظمكم بالفعل مع الخصائص المنطقية بفضل أدواتنا المرنة - فهي تحل محل خصائص الاتجاه مثل leftو rightfavour startو end. هذا يجعل أسماء الفئات والقيم مناسبة لـ LTR و RTL دون أي تكاليف إضافية.

على سبيل المثال ، بدلاً من .ml-3for margin-left، استخدم .ms-3.

العمل مع RTL ، من خلال مصدرنا Sass أو CSS المترجم ، لا ينبغي أن يكون مختلفًا كثيرًا عن LTR الافتراضي الخاص بنا.

تخصيص من المصدر

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

قيم RTL المخصصة

باستخدام توجيهات قيم RTLCSS ، يمكنك جعل الناتج المتغير قيمة مختلفة لـ RTL. على سبيل المثال ، لتقليل الوزن في $font-weight-boldجميع أنحاء مصدر البرنامج ، يمكنك استخدام /*rtl: {value}*/بناء الجملة:

$font-weight-bold: 700 #{/* rtl:600 */} !default;

والذي سينتج إلى ما يلي من أجل CSS و RTL CSS الافتراضيين:

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

مكدس الخطوط البديلة

إذا كنت تستخدم خطًا مخصصًا ، فاعلم أنه ليست كل الخطوط تدعم الأبجدية غير اللاتينية. للتبديل من عائلة Pan-European إلى مجموعة الخطوط العربية ، قد تحتاج إلى استخدام /*rtl:insert: {value}*/مجموعة الخطوط لتعديل أسماء مجموعات الخطوط.

على سبيل المثال ، للتبديل من Helvetica Neue WebfontLTR إلى Helvetica Neue ArabicRTL ، يبدو كود Sass الخاص بك كما يلي:

$font-family-sans-serif:
  Helvetica Neue #{"/* rtl:insert:Arabic */"},
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  Arial,
  // Linux
  "Noto Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

LTR و RTL في نفس الوقت

هل تحتاج إلى كل من LTR و RTL في نفس الصفحة؟ بفضل RTLCSS String Maps ، هذا واضح جدًا. قم بلف @importصفك ، وقم بتعيين قاعدة إعادة تسمية مخصصة لـ RTLCSS:

/* rtl:begin:options: {
  "autoRename": true,
  "stringMap":[ {
    "name": "ltr-rtl",
    "priority": 100,
    "search": ["ltr"],
    "replace": ["rtl"],
    "options": {
      "scope": "*",
      "ignoreCase": false
    }
  } ]
} */
.ltr {
  @import "../node_modules/bootstrap/scss/bootstrap";
}
/*rtl:end:options*/

بعد تشغيل Sass ثم RTLCSS ، سيتم إضافة كل محدد في ملفات CSS بواسطة .ltr، ولملفات .rtlRTL. يمكنك الآن استخدام كلا الملفين في نفس الصفحة ، واستخدام أغلفة المكونات .ltrأو .rtlعلى أغلفة المكونات لاستخدام أحد الاتجاهين أو الاتجاه الآخر.

حالات الحافة والقيود المعروفة

في حين أن هذا النهج مفهوم ، يرجى الانتباه إلى ما يلي:

عند التبديل .ltrوتأكد من .rtlالإضافة والسمات وفقًا لذلك.dirlang
يمكن أن يكون تحميل كلا الملفين عقبة حقيقية في الأداء: ضع في اعتبارك بعض التحسين ، وربما حاول تحميل أحد هذين الملفين بشكل غير متزامن .
ستؤدي أنماط التعشيش بهذه الطريقة إلى منع form-validation-state()المزيج الخاص بنا من العمل على النحو المنشود ، وبالتالي يتطلب منك تعديله قليلاً بنفسك. انظر # 31223 .

فاصل مسار التنقل هو الحالة الوحيدة التي تتطلب متغيرًا جديدًا خاصًا به - أي $breadcrumb-divider-flipped- الافتراضي $breadcrumb-divider.

RTL