HTML Academy · درس

dir=rtl للنص من اليمين إلى اليسار

تمكين التخطيط من اليمين إلى اليسار للغة العربية والعبرية وغيرها من اللغات ذات الاتجاه RTL

dir=rtl للنص من اليمين إلى اليسار درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

ما الذي تفعله السمة dir

تعلن السمة dir اتجاه النص الأساسي للعنصر. تشير dir="ltr" (من اليسار إلى اليمين، وهو الاتجاه الافتراضي لمعظم اللغات) أو dir="rtl" (من اليمين إلى اليسار، للعربية والعبرية والفارسية والأردية) إلى اتجاه النص.

تعيينها على html لتطبيق RTL على الموقع بأكمله

في مواقع العربية والعبرية والفارسية والأردية، عيّن dir="rtl" على العنصر الجذر. يؤدي ذلك إلى عكس التدفق الافتراضي لكل كتلة: تصطف النصوص إلى اليمين، وتُحاذى القوائم بمسافة بادئة إلى اليمين، وتنتقل أشرطة التمرير إلى اليسار، وتعكس التخطيطات نفسها تلقائيًا باستخدام CSS الحديثة.

<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>

النص ثنائي الاتجاه

يتبع النص المختلط الاتجاهات، مثل العربية التي تتضمن أسماء علامات تجارية بالإنجليزية، خوارزمية Unicode ثنائية الاتجاه تلقائيًا. ويتحكم الاتجاه الأساسي (المحدد بواسطة dir) في ترتيب المقاطع أحادية الاتجاه على مستوى السطر؛ بينما تتدفق مجموعات الأحرف الفردية وفق الاتجاه الطبيعي لنظام الكتابة الخاص بها.

الخصائص المنطقية في CSS

تستخدم CSS الحديثة خصائص منطقية تتكيف مع الاتجاه: margin-inline-start (يسارًا في LTR ويمينًا في RTL)، وpadding-inline-end، وborder-inline-start. ويتيح استبدال left/right بـ start/end استخدام ورقة أنماط واحدة في كلا الاتجاهين.

/* Works in both directions */
.card {
  padding-inline-start: 16px;
  margin-block-end: 12px;
  border-inline-end: 1px solid #ccc;
}

يتكيف Flexbox وGrid تلقائيًا

يحترم اتجاه الصف في Flexbox السمة dir: ففي RTL تتدفق العناصر من اليمين إلى اليسار. كما تنعكس أعمدة قالب Grid. وهذا يعني أن معظم التخطيطات المكتوبة باستخدام flex أو grid تعمل في RTL دون أي CSS خاص بالاتجاه؛ فالتخطيط الحديث مستقل عن الاتجاه.

الأيقونات التي ينبغي عكسها

يجب عكس الأيقونات الاتجاهية، مثل سهم الرجوع وسهم التالي والتراجع/الإعادة، في RTL. استخدم CSS transform: scaleX(-1) داخل [dir="rtl"]، أو وفّر إصدارات SVG منفصلة لـ RTL. أما الأيقونات غير الاتجاهية، مثل البحث والإعدادات والترس، فتبقى كما هي.

[dir="rtl"] .icon-back {
  transform: scaleX(-1);
}

محاذاة النص

فضّل text-align: start على text-align: left؛ إذ تتحول start إلى اليسار في LTR وإلى اليمين في RTL. وينطبق الأمر نفسه على end. تلغي المحاذاة الواعية بالاتجاه فئة من الأخطاء عند إضافة دعم RTL.

تجاوز dir لكل عنصر

عيّن dir="auto" على عنصر للسماح للمتصفح باكتشاف الاتجاه من أول محرف قوي الاتجاه: <p dir="auto">{user.name}</p> يتعامل مع أسماء المستخدمين المُرسلة التي قد تكون عربية أو إنجليزية أو مختلطة دون معالجة خاصة لكل حالة.

تضمين Bidi

يوفّر العنصران bdi (العزل ثنائي الاتجاه) وbdo (التجاوز ثنائي الاتجاه) تحكمًا دقيقًا في كيفية تعامل خوارزمية bidi مع نص محدد، وهو أمر مفيد عند إعادة إنتاج إدخال المستخدم حرفيًا أو فرض اتجاه معين لمقطع من التعليمات البرمجية داخل نص متدفق.

حقول النماذج

ترث الحقول اتجاه dir من العنصر الأب. بالنسبة إلى النص الذي يقدمه المستخدم ويتغير اتجاهه، مثل تطبيق محادثة يضم مستخدمين متعددي اللغات، عيّن dir="auto" على كل حقل إدخال كي يُعرض كل حقل بصورة صحيحة استنادًا إلى محتواه.

اختبار تخطيطات RTL

تتيح المتصفحات معاينة RTL عبر تعيين document.documentElement.dir = "rtl" مؤقتًا في وحدة تحكم DevTools. افحص اتجاه الأيقونات، والمسافات الداخلية والخارجية، وموضع شريط التمرير، وتحقّق من عدم استخدام أي عنصر للقيم hardcoded left/right التي ينبغي أن تكون start/end.

يختلف اتجاه CSS عن اتجاه التخطيط

لخاصية CSS المسماة direction ولسمة HTML المسماة dir التأثير نفسه في معظم جوانب التخطيط. فضّل سمة HTML لأن التقنيات المساعدة وبرامج إرسال البريد والمستهلكين الآخرين يقرؤونها، بينما تؤثر خاصية CSS في العرض داخل المتصفحات فقط.

اختبار المعرفة

لماذا تُفضَّل الخصائص المنطقية في CSS، مثل margin-inline-start، على margin-left عند دعم اللغات التي تُكتب من اليمين إلى اليسار؟

الملخص

يؤدي dir="rtl" على <html> إلى عكس الاتجاه الأساسي لمواقع العربية والعبرية والفارسية والأردية. وتتكيف الخصائص المنطقية في CSS، مثل margin-inline-start وpadding-block-end، تلقائيًا. كما تنعكس تخطيطات Flexbox وGrid دون تغييرات. اعكس الأيقونات الاتجاهية، واستخدم text-align: start/end، واستخدم dir="auto" لمحتوى المستخدم ذي الاتجاه غير المعروف.

الأسئلة الشائعة

هل درس «dir=rtl للنص من اليمين إلى اليسار» مجاني؟

نعم — نص درس «dir=rtl للنص من اليمين إلى اليسار» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «dir=rtl للنص من اليمين إلى اليسار»؟

تمكين التخطيط من اليمين إلى اليسار للغة العربية والعبرية وغيرها من اللغات ذات الاتجاه RTL تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «dir=rtl للنص من اليمين إلى اليسار»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى HTML Academy