CSS Academy · درس

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

أنشئ تخطيطًا ثنائي الاتجاه فعليًا ينقلب تلقائيًا للعربية والعبرية باستخدام الخصائص المنطقية

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

إعداد RTL في HTML

صرّح عن RTL في HTML باستخدام السمة dir وlang المطابقة:

<div dir="rtl" lang="ar" class="rtl-box">مرحبا بكم في تخطيط RTL</div>

dir="rtl" في CSS

يمكنك أيضًا ضبط الاتجاه في CSS، وهذا مفيد للاختبار أو لأجزاء RTL الجزئية:

<div dir="rtl">هذا العنصر باتجاه RTL</div>

اختبار التبديل بين LTR وRTL

اختبار سريع: أضف dir="rtl" إلى <html>. ينبغي أن ينعكس التخطيط بصورة صحيحة عند استخدام الخصائص المنطقية. أما عند استخدام الخصائص الفيزيائية، فسترى ما يحتاج إلى إصلاح.

ما الذي يتكيّف تلقائيًا

عند ضبط dir="rtl"، تنعكس العناصر التالية تلقائيًا باستخدام الخصائص المنطقية:

محاذاة النص (البداية/النهاية)
الهوامش والمسافات الداخلية (البداية/النهاية ضمن الاتجاه السطري)
الحدود (البداية/النهاية ضمن الاتجاه السطري)
العناصر العائمة (البداية/النهاية ضمن الاتجاه السطري)
تحديد المواضع (البداية/النهاية ضمن الاتجاه السطري)

ما الذي لا يتكيّف تلقائيًا

حتى مع استخدام الخصائص المنطقية، تحتاج العناصر التالية إلى معالجة خاصة في RTL:

صور الخلفية التي تحتوي على محتوى اتجاهي
أيقونات SVG ذات دلالة اتجاهية (الأسهم وعلامات الزاوية)
التحويلات مثل translateX() — استخدم translateX(calc(-1 * var(--offset))) مع مؤشر للاتجاه
تحديد المواضع المطلقة باستخدام قيم بكسل صريحة

عكس اتجاه أيقونات SVG

يوفّر CSS طريقة واضحة لعكس اتجاه الأيقونات الاتجاهية في RTL:

<div dir="rtl"><span class="icon-arrow"></span> Mirrored arrow in RTL</div>

متغير CSS المراعي للاتجاه

حيلة باستخدام متغير CSS لإنشاء قيم تراعي الاتجاه:

<div dir="rtl" class="drawer">Drawer</div>

مثال عملي على RTL

مكوّن بطاقة يستخدم الخصائص المنطقية:

<div dir="rtl" class="card"><span class="card__icon">🔔</span><span class="card__text">تنبيه جديد</span></div>

font-size وRTL

تظهر بعض الخطوط العربية بحجم أكبر أو أصغر عند استخدام الحجم نفسه بالبكسل مقارنةً بالخطوط اللاتينية. حدّد font-size لكل نظام كتابة عند الحاجة:

<p>Default text (16px)</p>
<p lang="ar">نص عربي (17px)</p>

أدوات الاختبار

يمكن لأدوات مطوّري المتصفح محاكاة التخطيطات ثنائية الاتجاه. استخدم أيضًا شجرة إمكانية الوصول في Chrome للتحقق من أن ترتيب القراءة يتبع الترتيب المنطقي بدلًا من الترتيب المرئي لقارئات الشاشة.

قائمة التحقق العملية لـ RTL

قائمة التحقق من RTL:

تستخدم جميع الهوامش والمسافات الداخلية الخصائص المنطقية
تستخدم جميع الحدود البداية/النهاية ضمن الاتجاه السطري
تستخدم محاذاة النص البداية/النهاية
تُعكس الأيقونات الاتجاهية باستخدام scaleX(-1)
تستخدم المواضع المطلقة inset-inline-* عند الحاجة
تُمرَّر الحاويات القابلة للتمرير من الحافة الصحيحة

تحقق سريع

ما تحويل CSS الأبسط لعكس اتجاه أيقونة سهم SVG اتجاهية في تخطيطات RTL؟

خلاصة

اضبط dir="rtl" على عنصر html لإنشاء تخطيط RTL. تتكيّف الخصائص المنطقية تلقائيًا مع الهوامش والمسافات الداخلية والحدود والمحاذاة. لكن القيم الفعلية بالبكسل في التحويلات وتحديد المواضع المطلقة ما تزال تحتاج إلى مراعاة RTL يدويًا. اعكس اتجاه الأيقونات الاتجاهية باستخدام scaleX(-1). اختبر ذلك بتبديل dir="rtl" على العنصر الجذر.

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

هل درس «الخصائص المنطقية في تخطيطات RTL» مجاني؟

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

ماذا ستتعلم في «الخصائص المنطقية في تخطيطات RTL»؟

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

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

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

كم من الوقت يستغرق درس «الخصائص المنطقية في تخطيطات RTL»؟

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

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

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

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

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