CSS Academy · درس

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

افهم سبب تسبّب خصائص CSS الفيزيائية في تعطيل تخطيطات RTL وكيف تصلح الخصائص المنطقية ذلك

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

مشكلة الخصائص الفيزيائية

تستخدم CSS التقليدية اتجاهات فيزيائية: top وright وbottom وleft. وهي مناسبة للغات التي تُكتب من اليسار إلى اليمين (LTR) مثل الإنجليزية، لكنها لا تناسب اللغات التي تُكتب من اليمين إلى اليسار (RTL) مثل العربية والعبرية، ولا أنظمة الكتابة العمودية مثل اليابانية التقليدية.

الفيزيائي مقابل المنطقي

قارن بين ما يلي:

الفيزيائي: top وright وbottom وleft — ثابت بالنسبة إلى الشاشة
المنطقي: block-start وblock-end وinline-start وinline-end — مرتبط بنمط الكتابة

محورا الكتلة والسطر المضمّن

لكل نظام كتابة ما يلي:

محور الكتلة: الاتجاه الذي تتراص فيه كتل النص (رأسيًا في LTR وRTL، وأفقيًا في الكتابة العمودية)
محور السطر المضمّن: الاتجاه الذي يتدفق فيه النص داخل السطر (أفقيًا في LTR وRTL، ورأسيًا في الكتابة العمودية)

التخطيط في LTR وRTL

في LTR (الإنجليزية): يكون inline-start = left وinline-end = right. وفي RTL (العربية): يكون inline-start = right وinline-end = left. تتكيف الخصائص المنطقية تلقائيًا من دون استخدام استعلامات الوسائط أو JavaScript.

التكلفة الفعلية للخصائص الفيزيائية

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

نمط الكتابة يؤثر في المحاور

عند ضبط writing-mode: vertical-rl (اليابانية والكورية العمودية)، يصبح محور الكتلة أفقيًا ومحور السطر المضمّن رأسيًا. وتتكيف الخصائص المنطقية تلقائيًا.

<div class="vertical-text">縦書きテキスト Vertical Text</div>

اعتمادها في CSS الحديثة

تدعم جميع المتصفحات الرئيسية الخصائص المنطقية. وتوصي مواصفة CSS الآن باستخدام الخصائص المنطقية لأي خاصية تتعلق باتجاه يمكن أن يتغير مع نمط الكتابة أو الاتجاه.

الأثر العملي

تدعم قاعدة شيفرة واحدة تستخدم الخصائص المنطقية على نحو صحيح أنظمة الكتابة LTR وRTL والكتابة العمودية من دون تكرار. وتتبع CSS ببساطة قيمتَي direction وwriting-mode في العنصر الجذر.

dir="rtl" في HTML

اضبط اتجاه الكتابة في HTML، وليس في CSS فقط:

<div dir="rtl" lang="ar" class="rtl-demo">هذا نص من اليمين إلى اليسار</div>

الاعتماد التدريجي

لا تحتاج إلى إعادة كتابة CSS بأكملها دفعة واحدة. ابدأ باستخدام الخصائص المنطقية في المكوّنات الجديدة. ومع مرور الوقت، أعد هيكلة الخصائص الفيزيائية في المكوّنات الموجودة ضمن الأجزاء الحساسة للتدويل.

خاصية CSS المسماة direction

تؤثر خاصية CSS المسماة direction (ltr أو rtl) في اتجاه تدفق السطر المضمّن. وهي تعمل إلى جانب writing-mode لتحديد سياق نظام الكتابة الكامل للعنصر.

تحقق سريع

لماذا تسبب خصائص CSS الفيزيائية مثل margin-left مشكلات في تخطيطات RTL؟

مراجعة

تستخدم الخصائص المنطقية في CSS نموذج الكتلة والسطر المضمّن بدلًا من top وright وbottom وleft الفيزيائية. ويتيح ذلك لملف أنماط واحد العمل مع أنظمة الكتابة LTR وRTL والكتابة العمودية. وتحدد الخاصيتان direction وwriting-mode السياق الذي تتكيف معه الخصائص المنطقية تلقائيًا.

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

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

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

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

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

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

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

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

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

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

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

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

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