0Pricing
CSS Academy · درس

اتجاها الكتلة والسطر

تعلّم اتجاهي تدفق الكتلة والسطر وكيف يتوافقان مع المحورين الرأسي والأفقي

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

اتجاه الكتلة

يشير اتجاه الكتلة إلى الاتجاه الذي تتراص فيه المربعات على مستوى الكتلة. وفي أنظمة الكتابة الأفقية (LTR وRTL)، يكون اتجاه الكتلة من أعلى إلى أسفل. أما في أنماط الكتابة العمودية، فيتغير إلى من اليسار إلى اليمين أو من اليمين إلى اليسار.

اتجاه السطر المضمّن

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

خاصية writing-mode

تحدد writing-mode الاتجاه الأساسي لتدفق النص:

  • horizontal-tb — نص أفقي من أعلى إلى أسفل (الافتراضي)
  • vertical-rl — نص عمودي، وأعمدة من اليمين إلى اليسار
  • vertical-lr — نص عمودي، وأعمدة من اليسار إلى اليمين

نظام الكتابة الأفقي

في writing-mode: horizontal-tb (الافتراضي):

  • اتجاه الكتلة = رأسي (من أعلى → إلى أسفل)
  • اتجاه السطر المضمّن = أفقي (من اليسار → إلى اليمين في LTR، ومن اليمين → إلى اليسار في RTL)
  • بداية الكتلة = top، ونهاية الكتلة = bottom
  • بداية السطر المضمّن = left (في LTR) أو right (في RTL)

نظام الكتابة العمودي

في writing-mode: vertical-rl:

  • اتجاه الكتلة = أفقي (من اليمين → إلى اليسار)
  • اتجاه السطر المضمّن = رأسي (من أعلى → إلى أسفل)
  • بداية الكتلة = right، ونهاية الكتلة = left
  • بداية السطر المضمّن = top، ونهايته = bottom

تصوّر المحاور

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

text-orientation

في أنماط الكتابة العمودية، تتحكم text-orientation في اتجاه الأحرف الفردية:

  • mixed: تدوير الأحرف اللاتينية مع إبقاء أحرف CJK مستقيمة
  • upright: إبقاء جميع الأحرف مستقيمة (لأحرف CJK العمودية)
  • sideways: تدوير جميع الأحرف إلى الجانب

تسميات عمودية جانبية

استخدام عملي: تدوير تسميات الشريط الجانبي أو تسميات محاور المخططات في سياقات الكتابة الأفقية:

<div class="chart-label">Revenue</div>

مزج أنماط الكتابة

يمكن أن تكون للحاوية نمط كتابة واحد، بينما تستخدم العناصر المضمّنة الفردية نمطًا آخر. ويُستخدم ذلك لمزج النصوص اللاتينية ونصوص CJK في الفقرة نفسها.

block-size وinline-size

المكافئان المنطقيان للعرض والارتفاع:

  • inline-size = العرض في horizontal-tb (البعد المضمّن)
  • block-size = الارتفاع في horizontal-tb (بعد الكتلة)
<div class="box">inline-size sets the width in LTR</div>

خاصية text-combine-upright

بالنسبة إلى النص العمودي الذي يتضمن أرقامًا أو اختصارات، تُبقي text-combine-upright (tcy) التسلسلات القصيرة من الأحرف مستقيمة ومضغوطة داخل خلية نص عمودية واحدة.

تحقق سريع

في writing-mode: horizontal-tb مع لغة LTR، ما المحور الذي يُعد محور «الكتلة»؟

مراجعة

محور الكتلة هو اتجاه تراص مربعات الكتلة، ومحور السطر المضمّن هو اتجاه تدفق النص. في أنظمة الكتابة الأفقية، تكون الكتلة رأسية والسطر المضمّن أفقيًا. وفي الكتابة العمودية ينعكس ذلك. وتتحكم writing-mode في الاتجاه الأساسي للمحاور. وتتكيّف الخصائص المنطقية مع المحورين الحاليين للكتلة والسطر المضمّن.

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

هل درس «اتجاها الكتلة والسطر» مجاني؟

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

ماذا ستتعلم في «اتجاها الكتلة والسطر»؟

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

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

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

كم من الوقت يستغرق درس «اتجاها الكتلة والسطر»؟

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

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

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

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

  1. لماذا نستخدم الخصائص المنطقية: التدويل
  2. اتجاها الكتلة والسطر
  3. الهامش والحشو والحدود المنطقية
  4. الخصائص المنطقية في تخطيطات RTL
← العودة إلى CSS Academy