في هذا الدرس 6تصفّح المواضيع
تُقرأ الواجهات العربية والفارسية والأردية من اليمين إلى اليسار RTL؛ وفي الأجيال السابقة من أطر العمل كان المطورون يضطرون لكتابة ملفات ترقيع يدوية مرهقة أو الاعتماد على نسخ مجتمعية خارجية سرعان ما تتعطل مع كل تحديث رسمي للإطار.
حسم Bootstrap 5 هذه المعضلة جذرياً بدمج محرك التحويل الآلي RTLCSS داخل خط البناء الرسمي للإطار؛ فأصبح كل إصدار رسمي يصدر مصحوباً بملف bootstrap.rtl.min.css المعتمد، مع استبدال الاتجاهات الفيزيائية الجامدة باتجاهات منطقية تتكيف بسلاسة مع هوية الصفحة العربية.
يشترط التوثيق الرسمي لبوتستراب 5 تحقيق ركنين إلزاميين معاً لتفعيل الواجهة العربية بصورة هندسية صحيحة:
- إضافة السمتين
dir="rtl"وlang="ar"مباشرةً على الوسم الجذري<html>في أعلى المستند. - استدعاء ملف التنسيق العربي
bootstrap.rtl.min.cssبدلاً من الملف القياسي داخل<head>.
تؤدي سمة lang="ar" دوراً جوهرياً في إمكانية الوصول؛ إذ توجه قارئات الشاشة لاختيار النطق الصوتي العربي السليم وتضبط قواعد التدقيق الإملائي في المتصفح.
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
href="/vendor/bootstrap-5.3/css/bootstrap.rtl.min.css">
</head>
<body>
<div class="container"><h1>RTL Starter Ready</h1></div>
</body>احذر تماماً من تحميل ملفي bootstrap.min.css و bootstrap.rtl.min.css معاً في الصفحة الواحدة؛ لأن ذلك يضاعف حجم التنسيقات المحمّلة ويخلق تضارباً مباشراً في القيم الأفقية. في التطبيقات ثنائية اللغة مثل Laravel نضع وسم <link> واحداً فقط ونبدّل مساره ديناميكياً وفق لغة الزائر الحالية.
لكي يعمل قالب HTML واحد بكفاءة تامة في كلتا اللغتين العربية والإنجليزية دون تعديل الكلاسات، استبدل بوتستراب 5 التسميات المكانية الجامدة بمفهوم الاتجاهات المنطقية المرتبطة بتدفق القراءة:
- نقطة البداية
start: تشير إلى الحافة اليمنى في المستندات العربيةRTLلأن العين تبدأ القراءة من اليمين، وتشير تلقائياً إلى الحافة اليسرى في المستندات الإنجليزيةLTR. - نقطة النهاية
end: تشير إلى الحافة اليسرى في المستندات العربيةRTL، وتنعكس إلى الحافة اليمنى في المستندات الإنجليزيةLTR.
بهذه القاعدة الهندسية الموحدة تكتب هيكل الواجهة مرة واحدة فقط، ويتكفل ملف التنسيق بعكس جميع الإحداثيات الأفقية تلقائياً.
<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>تبدو حزمة خطوط النظام الافتراضية في بوتستراب أنيقة مع الحروف اللاتينية، لكن الخط العربي البديل الافتراضي قد يظهر صغير الحجم أو متفاوت السماكة بين أنظمة التشغيل المختلفة. يمكنك دمج خط ويب عربي هندسي واضح مثل Cairo أو Tajawal أو IBM Plex Sans Arabic على مستوى المشروع كله في سطر واحد فقط عبر تخصيص متغير الجذر --bs-body-font-family.
<style>
:root {
--bs-body-font-family: 'Cairo', system-ui, sans-serif;
--bs-body-line-height: 1.7;
}
</style>
<div class="container">
<h2>Custom Typography via --bs-body-font-family</h2>
</div>نادراً ما تخلو واجهة عربية حقيقية من مقاطع إنجليزية أو رموز تقنية مدمجة وسط السطر مثل عناوين الروابط، ومسارات الملفات، وأكواد البرمجة، والبريد الإلكتروني، والأرقام القياسية 0-9. من دون تطبيق عزل النصوص ثنائية الاتجاه BiDi قد تنقلب مواضع الشرطة المائلة أو النقطتين الرأسيتين أو إشارة السالب:
- أحط مسارات الملفات والأكواد وأرقام الهواتف الدولية بعنصر يحمل السمة
dir="ltr"لضمان قراءتها من اليسار لليمين دون تشوه. - غلّف المعرفات الديناميكية وأسماء الحسابات المختلطة بوسم العزل الدلالي
<bdi>لحماية علامات الترقيم العربية المحيطة بها.
<div class="container">
<p>Endpoint: <span dir="ltr">/api/v2/users</span></p>
<p>Support: <span dir="ltr">+966 11 555 0199</span></p>
<p>Account: <bdi>dev_ahmed_99</bdi></p>
</div>| الجانب الهندسي | الوضع اليساري القياسي LTR | الوضع العربي اليميني RTL | القاعدة العملية المعتمدة |
|---|---|---|---|
| سمات الوسم الجذري | lang="en" dir="ltr" | lang="ar" dir="rtl" | تحديد اللغة والاتجاه معاً على عنصر <html> |
| ملف التنسيق المعتمد | bootstrap.min.css | bootstrap.rtl.min.css | ربط ملف واحد فقط حسب اللغة وعدم الجمع بينهما |
| حزمة السكريبت التفاعلي | bootstrap.bundle.min.js | bootstrap.bundle.min.js | نفس الملف يتعرف تلقائياً على اتجاه المستند |
معنى البداية start | الحافة اليسرى للشاشة | الحافة اليمنى للشاشة | بناء التخطيط بالاتجاهات المنطقية دائماً |
| المسارات والأكواد المدمجة | تتدفق طبيعياً من اليسار | تُعزل عبر dir="ltr" أو <bdi> | حماية الرموز البرمجية والأرقام من الانعكاس |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرفت في هذا الدرس على الدعم الأصيل للغة العربية في Bootstrap 5 عبر محرك RTLCSS، وتفعيل سمتي lang="ar" و dir="rtl" مع ملف bootstrap.rtl.min.css، وفلسفة البداية والنهاية المنطقية، ودمج الخطوط العربية بمتغير --bs-body-font-family، وضوابط عزل النصوص ثنائية الاتجاه. الخطوة التالية: انتقل الآن إلى الدرس الرابع «التطبيع القياسي Reboot في بوتستراب 5» لاكتشاف القواعد التأسيسية التي يطبقها الإطار تلقائياً على عناصر الصفحة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 RTLCSS محرك التحويل الآلي RTLCSS
- أداة المعالجة الآلية المعتمدة رسمياً في خط بناء بوتستراب 5 لتوليد ملف التنسيقات العربي المعكوس أفقياً بدقة.
- للمراجعة
- 02 Inline Start (start) بداية السطر المنطقية start
- الحافة التي يبدأ منها تدفق القراءة حسب لغة المستند؛ وتكون اليمين في العربية واليسار في الإنجليزية.
- للمراجعة
- 03 Inline End (end) نهاية السطر المنطقية end
- الحافة التي ينتهي عندها السطر؛ وتكون اليسار في الواجهات العربية واليمين في الواجهات الإنجليزية.
- للمراجعة
- 04 BiDi Isolation عزل النصوص ثنائية الاتجاه
- تغليف المقاطع المغايرة لاتجاه الجملة كالمسارات البرمجية والمعرفات بوسم <bdi> أو dir="ltr" لمنع اختلاط علامات الترقيم.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 RTL RTL
- Right-to-Left
- اتجاه تخطيط الواجهات وتدفق النصوص من اليمين نحو اليسار كما في اللغة العربية.
- للمراجعة
- 02 LTR LTR
- Left-to-Right
- الاتجاه الأفقي الافتراضي من اليسار نحو اليمين المستخدم في اللغات اللاتينية كالإنجليزية.
- للمراجعة
- 03 BiDi BiDi
- Bidirectional Text Algorithm
- القواعد القياسية المسؤولة عن عرض الجمل التي تمزج بين كلمات عربية يمينية وأكواد أو أرقام يسارية.
- للمراجعة
- 04 AST AST
- Abstract Syntax Tree
- التمثيل الهيكلي لقواعد CSS الذي يحلله محرك RTLCSS لعكس الخصائص الأفقية تلقائياً.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
بدّل بين التبويبات الثلاثة في محاكي RTL لملاحظة انعكاس الحافة المنطقية start وكيف يحمي العزل بـ dir="ltr" و<bdi> مسارات الملفات والمعرفات.
-
افتح مثال تخصيص الخط العربي في محرر التجريب وجرّب تعديل قيمة --bs-body-line-height بين 1.5 و1.8 لملاحظة أثرها على وضوح القراءة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
ما الشرطان الإلزاميان لتفعيل وضع اللغة العربية RTL رسمياً في Bootstrap 5؟
يلزم ضبط dir="rtl" مع lang="ar" على عنصر <html> الجذري وتحميل ملف bootstrap.rtl.min.css بدلاً من الملف القياسي.
في المواقع ثنائية اللغة يُنصح بتحميل ملفي bootstrap.min.css وbootstrap.rtl.min.css معاً في نفس الصفحة دائماً.
خطأ؛ لا يجوز الجمع بين الملفين معاً منعاً لتضارب القواعد الأفقية ومضاعفة حجم التحميل، بل يُحمَّل ملف واحد حسب لغة الصفحة.
في مستند عربي مضبوط على dir="rtl"، إلى أي حافة فيزيائية من الشاشة يشير الاتجاه المنطقي start؟
بما أن القراءة في العربية تبدأ من اليمين، فإن الاتجاه المنطقي start يطابق الحافة اليمنى تلقائياً.
يُستخدم نفس ملف السكريبت bootstrap.bundle.min.js في كلٍّ من الصفحات العربية RTL والإنجليزية LTR دون الحاجة لنسخة JS منفصلة.
صواب؛ تتعرف إضافات جافاسكريبت في بوتستراب 5 تلقائياً على سمة dir="rtl" في المستند دون ملف سكريبت منفصل.
أي متغير CSS جذري يتيح تعميم خط ويب عربي مثل Cairo على نصوص الصفحة في Bootstrap 5؟
تعديل المتغير الجذري --bs-body-font-family يعمم الخط المختار تلقائياً على عناصر المستند.
كيف تعرض مسار ملف برمجي مثل /vendor/bootstrap/app.js وسط فقرة عربية بحيث لا تنقلب الشرطة المائلة إلى اليمين؟
تغليف المسارات التقنية بسمة dir="ltr" أو وسم العزل <bdi> يحفظ ترتيب الرموز من اليسار لليمين وسط السطر العربي.
ما الأداة الرسمية التي يعتمدها خط بناء Bootstrap 5 لتوليد ملف bootstrap.rtl.min.css تلقائياً؟
يعتمد Bootstrap 5 رسمياً على أداة RTLCSS لعكس القواعد الأفقية أثناء عملية البناء.
لماذا يُعد وجود سمة lang="ar" بجانب dir="rtl" على عنصر <html> مهماً لإمكانية الوصول؟
تعتمد قارئات الشاشة على سمة lang لاختيار محرك النطق الصوتي العربي السليم وقواعد القراءة اللغوية.