Skip to main content Skip to docs navigation
مشاهدة على الـ GitHub

الإتجاه (RTL)

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

في هذه الصفحة

التعرّف على الأساسيات

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

قد ترغب أيضاً في الاطلاع على مشروع RTLCSS، إذ إنه يشكّل الأساس الذي نعتمد عليه في دعم RTL.

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

متطلبات HTML

هناك متطلبان أساسيان لتمكين RTL في الصفحات المبنية باستخدام Bootstrap.

  1. تعيين dir="rtl" في عنصر <html>.
  2. إضافة سمة lang مناسبة، مثل lang="ar"، في عنصر <html>.

بعد ذلك، ستحتاج إلى تضمين نسخة RTL من CSS الخاص بنا. على سبيل المثال، فيما يلي ورقة الأنماط (stylesheet) الخاصة بملف CSS المترجم والمصغّر (minified) لدينا مع تفعيل RTL:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css" integrity="sha384-CfCrinSRH2IR6a4e6fy2q6ioOX7O6Mtm1L9vRvFZ1trBncWmMePhzvafv7oIcWiW" 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/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css" integrity="sha384-CfCrinSRH2IR6a4e6fy2q6ioOX7O6Mtm1L9vRvFZ1trBncWmMePhzvafv7oIcWiW" 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/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>
    -->
  </body>
</html>

أمثلة RTL

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

النهج

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

  1. أولاً، قررنا بناء ذلك باستخدام مشروع RTLCSS. يمنحنا هذا بعض الميزات القوية لإدارة التغييرات والتجاوزات عند الانتقال من LTR إلى RTL. كما يتيح لنا بناء نسختين من الـ Bootstrap من قاعدة بيانات برمجية واحدة.

  2. ثانياً، قمنا بتغيير أسماء مجموعة من الفئات (classes) الاتجاهية لاعتماد نهج الخصائص المنطقية. لقد تفاعل معظمكم بالفعل مع الخصائص المنطقية بفضل أدوات المرونة (flex) الخاصة بنا — فهي تستبدل خصائص الاتجاه مثل left و right لصالح start و end. وهذا يجعل أسماء الفئات (classes) وقيمها مناسبة لـ LTR و RTL دون أي عبء إضافي.

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

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

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

عندما يتعلق الأمر بـ التخصيص، فإن الطريقة المفضلة هي الاستفادة من المتغيرات، والخرائط (maps)، والمزجات (mixins). يعمل هذا النهج بنفس الطريقة بالنسبة لـ 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}*/ في مجموعة الخطوط (font stack) الخاصة بك لتعديل أسماء عائلات الخطوط.

على سبيل المثال، للتبديل من خط Helvetica Neue لـ LTR إلى Helvetica Neue Arabic لـ RTL، يمكن أن يبدو كود الـ 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 الخاصة بك بفئة (class)، وقم بتعيين قاعدة إعادة تسمية مخصصة لـ 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، سيتم إضافة .ltr قبل كل محدد (selector) في ملفات CSS الخاصة بك و .rtl لملفات RTL. الآن يمكنك استخدام كلا الملفين في نفس الصفحة، وببساطة استخدم .ltr أو .rtl على أغلفة المكونات (components wrappers) لاستخدام أحد الاتجاهين.

الحالات الاستثنائية والقيود المعروفة التي يجب مراعاتها عند العمل مع تنفيذ مدمج لـ LTR و RTL:

  1. عند التبديل بين .ltr و .rtl، تأكد من إضافة سمات dir و lang وفقاً لذلك.
  2. قد يكون تحميل كلا الملفين عائقاً حقيقياً في الأداء: فكر في بعض التحسينات، وربما تحاول تحميل أحد هذه الملفات بشكل غير متزامن.
  3. تداخل الأنماط بهذه الطريقة سيمنع المزج (mixin) الخاص بـ form-validation-state() من العمل كما هو مقصود، مما يتطلب منك تعديله قليلاً بنفسك. راجع #31223.

هل تريد أتمتة هذه العملية ومعالجة العديد من الحالات الاستثنائية التي تتضمن كلا الاتجاهين داخل ورقة أنماط (stylesheet) واحدة؟ إذاً، فكر في استخدام PostCSS RTLCSS كإضافة (plugin) لـ PostCSS لمعالجة ملفات المصدر الخاصة بك. يستخدم PostCSS RTLCSS مشروع RTLCSS في الخلفية لإدارة عملية قلب الاتجاه، ولكنه يفصل التصريحات المقلوبة إلى قواعد ببادئة مختلفة لـ LTR و RTL، وهو أمر يسمح لك بامتلاك كلا الاتجاهين داخل ملف ورقة أنماط (stylesheet) واحد. من خلال القيام بذلك، يمكنك التبديل بين اتجاهات LTR و RTL ببساطة عن طريق تغيير dir الخاص بالصفحة (أو حتى عن طريق تعديل فئة (class) محددة إذا قمت بتكوين الإضافة وفقاً لذلك).

أشياء مهمة يجب مراعاتها عند استخدام PostCSS RTLCSS لبناء تنفيذ مدمج لـ LTR و RTL:

  1. يوصى بإضافة سمة dir إلى عنصر html. بهذه الطريقة، ستتأثر الصفحة بأكملها عند تغيير الاتجاه. تأكد أيضاً من إضافة سمة lang وفقاً لذلك.
  2. وجود حزمة واحدة تحتوي على كلا الاتجاهين سيزيد من حجم ورقة الأنماط (stylesheet) النهائية (في المتوسط بنسبة 20% - 30%): فكر في بعض التحسينات.
  3. ضع في اعتبارك أن PostCSS RTLCSS غير متوافق مع توجيهات /* rtl:remove */ لأنه لا يقوم بإزالة أي قاعدة CSS. يجب عليك استبدال توجيهات /* rtl:remove */ و /* rtl:begin:remove */ و /* rtl:end:remove */ بتوجيهات /* rtl:freeze */ و /* rtl:begin:freeze */ و /* rtl:end:freeze */ على التوالي. ستقوم هذه التوجيهات بوضع بادئة للاتجاه الحالي على القواعد أو التصريحات المستهدفة ولكنها لن تنشئ نظيراً لـ RTL (نفس نتيجة توجيهات remove في RTLCSS).

حالة مسار التصفح (Breadcrumb)

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

موارد إضافية