أوضاع الكتابة وتخطيط CSS

هذه ليست مقالة حول التطبيق العملي أو الإبداعي لهذه الخاصية. بدلاً من ذلك ، أريد أن أوضح سبب أهمية فهم أوضاع الكتابة - حتى لأولئك منا الذين نادرًا ما يحتاجون إلى تغيير نمط الكتابة لصفحة أو مكون. يعد دعم أوضاع الكتابة المتعددة مفتاحًا للطريقة التي تم بها تصميم أساليب التخطيط الجديدة الخاصة بنا لـ Flexbox و Grid Layout. يمكن لفهم هذا أن يفتح لك فهماً أفضل لكيفية عمل أساليب التخطيط هذه.

ما هي أوضاع الكتابة؟

يشير وضع كتابة المستند أو المكون إلى الاتجاه الذي يتدفق فيه النص. في CSS ، للعمل مع أوضاع الكتابة ، نستخدم خاصية writing-mode . يمكن أن تأخذ هذه الخاصية القيم التالية:

• horizontal-tb
• vertical-rl
• vertical-lr
• sideways-rl
• sideways-lr

إذا كنت تقرأ هذا المقال في Smashing Magazine باللغة الإنجليزية ، فإن وضع الكتابة في هذا المستند هو horizontal-tb ، أو Horizontal Top To Bottom . في اللغة الإنجليزية ، تتم كتابة الجمل أفقياً - يبدأ الحرف الأول من كل سطر على اليسار.

تحتوي لغة مثل العربية أيضًا على وضع كتابة horizontal-tb . إنه مكتوب أفقيًا ، من أعلى إلى أسفل ، ولكن الخط العربي يُكتب من اليمين إلى اليسار ، وهكذا تبدأ الجمل باللغة العربية على اليمين.

تتم كتابة الصينية واليابانية والكورية بشكل عمودي ، حيث يكون الحرف الأول من الجملة الأولى أعلى اليمين. تضاف الجمل التالية إلى اليسار. لذلك ، فإن طريقة الكتابة المستخدمة هي الوضع vertical-rl . وضع كتابة عمودي يمتد من اليمين إلى اليسار.

تتم كتابة المنغولية أيضًا بشكل عمودي ، ولكن من اليسار إلى اليمين. لذلك ، إذا كنت ترغب في تنضيد البرنامج النصي المنغولي ، فستستخدم وضع الكتابة vertical-lr .

تم تصميم القيمتين الأخريين لوضع writing-mode لأغراض إبداعية أكثر من تنضيد النصوص الرأسية. يؤدي استخدام sideways-lr و sideways-rl إلى تحويل النص بشكل جانبي - حتى الأحرف المكتوبة عادةً رأسيًا ومستقيمًا. القيم ، للأسف ، مدعومة فقط في Firefox في الوقت الحالي. يُظهر CodePen التالي جميع القيم المختلفة لوضع writing-mode ، ستحتاج إلى استخدام Firefox إذا كنت تريد رؤية العناصر sideways-* في العمل.

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

قبل أن أفعل ذلك - إذا كنت مهتمًا باستخدام أوضاع الكتابة للنص الرأسي - فإليك بعض الموارد المفيدة:

• يحتوي موقع W3C Internationalization على ثروة من المعلومات المفيدة. اقرأ عن نصوص RTL النصية والنص الرأسي.
• كتب Jen Simmons مقالة ممتازة حول أوضاع كتابة CSS والتي تتضمن أيضًا عدة أمثلة من طباعة هذه الأوضاع قيد الاستخدام.
• أفكار حول العالم وأنظمة الكتابة لدينا - Chen Hui Jing
• إعادة النظر في التنضيد الرأسي مع وضع الكتابة - Chen Hui Jing
• خاصية وضع الكتابة في MDN

الكتلة والأبعاد المضمنة

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

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

نظرًا لأن عناصر الكتلة والعناصر المضمنة تتعلق بوضع الكتابة في وثيقتنا ، فإن البعد المضمّن يكون أفقيًا فقط إذا كنا في وضع كتابة أفقي. لا يتعلق الأمر بالعرض ، ولكن بدلاً من ذلك يتعلق بالحجم المضمّن. يكون بُعد الكتلة عموديًا فقط عندما يكون في وضع الكتابة الأفقي. لذلك لا يتعلق الأمر بالارتفاع ، بل بالحجم.

الخصائص المنطقية ذات الصلة بالتدفق

تُستخدم هذه المصطلحات ، الحجم المضمّن وحجم الكتلة أيضًا كأسماء لخصائص CSS الجديدة المصممة لتعكس عالمنا الواعي لوضع الكتابة الجديد. إذا استخدمت الخاصية inline-size بدلاً من width في وضع الكتابة الأفقي ، فستعمل بنفس طريقة العرض تمامًا - حتى تقوم بتبديل وضع الكتابة للمكون الخاص بك. إذا كنت تستخدم width الذي سيكون دائمًا بُعدًا ماديًا ، فسيكون دائمًا حجم المكون أفقيًا. إذا كنت تستخدم inline-size ، فسيكون هذا هو الحجم في البعد المضمن ، كما يوضح المثال أدناه.

نفس الشيء صحيح بالنسبة height . ستكون خاصية height دائمًا هي الحجم عموديًا. يتعلق بمدى ارتفاع العنصر. ومع ذلك ، فإن خاصية block-size تعطي الحجم في بُعد الكتلة ، عموديًا إذا كنا في وضع كتابة أفقي وأفقي في وضع رأسي.

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

أوضاع الكتابة والشبكة و Flexbox

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

عندما بدأت في تقديم موضوع شبكة CSS لأول مرة ، كانت عروضي التقديمية المبكرة عبارة عن ملخص لجميع الخصائص في المواصفات. لقد ذكرت أنه يمكن استخدام خاصية grid-area لتعيين جميع الأسطر الأربعة لوضع عنصر الشبكة. ومع ذلك ، لم يكن ترتيب هذه السطور هو الأعلى ، واليمين ، والقاع ، واليسار المألوف الذي نستخدمه لتعيين الهوامش الأربعة. بدلاً من ذلك ، نحتاج إلى استخدام أعلى ، يسار ، أسفل ، يمين - عكس ذلك الترتيب! حتى فهمت العلاقة بين أوضاع الشبكة والكتابة ، بدا هذا قرارًا غريبًا للغاية. أدركت أن ما نقوم به هو تحديد كلا خطي البداية ، ثم كلا خط النهاية. استخدام أعلى ، اليمين ، الأسفل واليسار سيعمل بشكل جيد إذا كنا في وضع كتابة أفقي ، اقلب الشبكة على جانبها ولكن هذا لا معنى له. إذا استخدمنا grid-area: 1 / 2 / 3 / 5; كما هو الحال في القلم أدناه ، يتم تعيين الخطوط على النحو التالي:

• grid-row-start: 1; - بداية منع
• grid-column-start: 2 - بداية مضمنة
• grid-row-end: 3 - نهاية الكتلة
• grid-column-end: 5 - نهاية مضمنة

راجع القلم [منطقة الشبكة] (https://codepen.io/rachelandrew/pen/zgEEQW) بقلم راشيل أندرو.

صفوف وأعمدة Flexbox

إذا كنت تستخدم Flexbox وأضفت display: flex إلى حاوية ، فسيتم عرض عناصرك كصف حيث أن القيمة الأولية لخاصية flex-direction هي row . سيتبع الصف البعد المضمن لوضع الكتابة قيد الاستخدام. لذلك إذا كان وضع الكتابة لديك horizontal-tb تشغيل الصف أفقيًا. إذا كان اتجاه النص للنص الحالي من اليسار إلى اليمين ، فستصطف العناصر بدءًا من اليسار ، وإذا كانت من اليمين إلى اليسار ، فسوف تصطف بدءًا من اليمين.

ومع ذلك ، استخدم وضع كتابة رأسي ، مثل vertical-rl flex-direction: row في تخطيط العناصر عموديًا ، حيث يكون الاتجاه الداخلي عموديًا. في هذا CodePen التالي ، جميع الأمثلة لها flex-direction: row ، فقط وضع الكتابة أو الاتجاه قد تغير.

أضف flex-direction: column ، وتخطيط العناصر في بُعد الكتلة في وضع الكتابة الخاص بك. في وضع الكتابة الأفقي ، يكون بُعد الكتلة من أعلى إلى أسفل ، وبالتالي يكون العمود رأسيًا. مع وضع الكتابة vertical-rl يكون العمود أفقيًا. كما هو الحال مع المثال السابق ، فإن الاختلاف الوحيد بين التنسيقات المرنة أدناه هو وضع الكتابة المستخدم.

شبكة التنسيب التلقائي

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

حاول تغيير تدفق العناصر إلى column كما في المثال أدناه. ستتدفق العناصر الآن في بُعد الكتلة - عموديًا في وضع كتابة أفقي وأفقياً في وضع عمودي.

وضع خط الشبكة

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

قم بتغيير وضع الكتابة إلى vertical-rl وسيكون العمود 1 في أعلى الشبكة ، ويمتد العنصر إلى مسارين عموديًا. لا يزال يمتد على عمودين ، ولكن الأعمدة تعمل الآن أفقيًا.

المحاذاة في الشبكة و Flexbox

واحدة من الأماكن الأولى التي يتعامل معها العديد من الأشخاص مع الطريقة التي تعامل بها Flexbox مع أوضاع الكتابة ، ستكون عند محاذاة العناصر في تخطيط مرن. إذا أخذنا flex-direction: row المثال أعلاه ، واستخدمنا الخاصية justify-content لمحاذاة جميع العناصر flex-end تتحرك العناصر إلى نهاية صفها. هذا يعني أنه في وضع الكتابة الأفقي مع توجيه من اليسار إلى اليمين ، تتحرك العناصر جميعها إلى اليمين ، حيث تكون نهاية هذا الصف على اليمين. إذا كان الاتجاه من اليمين إلى اليسار ، فإنهم جميعًا يتحركون إلى اليسار.

في وضع الكتابة العمودي ، ينتقلون إلى الأسفل ، بافتراض وجود مساحة لهم للقيام بذلك. لقد قمت بتعيين inline-size على المكونات في هذا المثال للتأكد من أن لدينا مساحة احتياطية في حاوياتنا المرنة لرؤية المحاذاة أثناء العمل.

المحاذاة أسهل قليلاً للفهم في تخطيط الشبكة ، حيث لدينا دائمًا محورين للعب بهما. الشبكة ثنائية الأبعاد ، وهذان البعدان عبارة عن كتلة ومضمنة. لذلك ، يمكنك تذكر قاعدة واحدة إذا كنت تريد معرفة ما إذا كنت تريد استخدام الخصائص التي تبدأ align- أو تلك التي تبدأ justify- . في تخطيط الشبكة ، يتم استخدام خصائص align- : - align-content ، align-items ، align-self للقيام بمحاذاة محور الكتلة. في وضع الكتابة الأفقي يعني عموديًا ، وفي وضع الكتابة الرأسي أفقيًا.

مرة أخرى ، لا نستخدم اليسار واليمين أو أعلى وأسفل ، لأننا نريد أن يعمل تخطيط الشبكة بنفس الطريقة تمامًا بغض النظر عن وضع الكتابة. لذلك نقوم بالمحاذاة باستخدام start end . إذا قمنا بالمحاذاة start من بعد الكتلة ، فسيكون ذلك في top عندما يكون في الوضع horizontal-tb ، ولكن سيكون right عندما يكون في الوضع vertical-rl . ألق نظرة في المثال أدناه ، قيم المحاذاة متطابقة في كلتا الشبكتين ، والفرق الوحيد هو وضع الكتابة المستخدم.

يتم دائمًا استخدام الخصائص justify-content و justify-items و justify-self للمحاذاة المضمنة في تخطيط الشبكة. سيكون ذلك أفقيًا في وضع كتابة أفقي وعموديًا في وضع كتابة رأسي.

تعد محاذاة Flexbox معقدة إلى حد ما بسبب حقيقة أنه يمكن تبديل المحور الرئيسي من صف إلى عمود. لذلك ، في Flexbox ، نحتاج إلى التفكير في طريقة المحاذاة باعتبارها المحور الرئيسي مقابل المحور المتقاطع. يتم استخدام خصائص align- على المحور المتقاطع. على المحور الرئيسي ، كل ما لديك هو justify-content لأننا نتعامل مع العناصر كمجموعة في Flexbox. على المحور العرضي ، يمكنك استخدام align-content في الحالات التي يكون لديك فيها عدة خطوط مرنة ومساحة في الحاوية المرنة لتباعدها. يمكنك أيضًا استخدام align-items align-self لتحريك العناصر المرنة على المحور المتقاطع فيما يتعلق ببعضها البعض والخط المرن الخاص بهم.

لمزيد من المعلومات حول المحاذاة في تخطيط CSS ، راجع مقالاتي السابقة في مجلة Smashing:

• كيفية محاذاة الأشياء في CSS
• كل ما تحتاج لمعرفته حول المحاذاة في Flexbox

الوعي بوضع الكتابة وأقدم CSS

لم تلتحق جميع CSS بشكل كامل بهذه الطريقة النسبية للتدفق والكتابة في العمل. الأماكن التي لم تبدأ في الظهور على أنها غير عادية كلما فكرت في الأشياء من حيث الكتلة والمضمنة ، والبداية والنهاية. على سبيل المثال ، في تخطيط متعدد الأعمدة ، نحدد column-width ، وهو ما يعني حقًا حجم العمود المضمن ، حيث لا يتم تعيينه إلى العرض المادي عند العمل في وضع الكتابة الرأسية.

كما ترى ، تدعم أوضاع الكتابة الكثير مما نقوم به في CSS ، حتى لو لم نستخدم وضع كتابة بخلاف الوضع horizontal-tb .

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