تعلم تطوير الويب التحكم باتجاه انسياب النصوص باستخدام CSS

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

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

ننصحك قبل المتابعة في قراءة هذه المقال أن:

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

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

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

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

تأخذ الخاصية writing-mode إحدى القيم الثلاث التالية:

• horizontal-tb: تنساب كتلة العنصر من الأعلى للأسفل وينساب النص أفقيًا.
• vertical-rl: تنساب كتلة العنصر من اليمين إلى اليسار وينساب النص عموديًا.
• vertical-lr: تنساب كتلة العنصر من اليسار إلى اليمين وينساب النص عموديًا.

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

أوضاع الكتابة والعناصر السطرية والكتلية

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

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

عندما نبدّل وضع الكتابة سنغيّر أي اتجاه سيكون سطريًا وأي اتجاه سيكون كتليًا، إذ سيكون اتجاه الكتلة من الأعلى للأسفل عندما نختار الوضع horizontal-tb بينما سيكون اتجاه الكتلة من اليمين إلى اليسار إذا اخترنا الوضع vertical-rl، لهذا يكون اتجاه الكتلة block dimension دائمًا كما يحدده وضع الكتابة المستخدم، ويكون اتجاه السطر inline dimension هو اتجاه انسياب الكتابة.

يوضح الشكل التالي بُعدي الكتلة والسطر في وضع الكتابة الأفقي:

يوضح الشكل التالي بُعدي الكتلة والسطر في وضع الكتابة العمودي:

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

اتجاه النص

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

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

الخاصيات المنطقية وقيمها

الغاية من الحديث عن أوضاع الكتابة واتجاهاتها في هذه المرحلة من تعلم CSS هي أننا تعرفنا على الكثير من الخاصيات المرتبطة بالأبعاد الفيزيائية للشاشة والتي يبدو استخدامها أكثر منطقية عند العمل مع نمط الكتابة الأفقي. لنلق نظرةً على مثال الصندوقين السابق الذي يأخذ أحدهما الخاصية horizontal-tb ويأخذ الآخر الخاصية vertical-rl. سنحاول إعطاء كلا الصندوقين حيّزًا من خلال الخاصية width. لاحظ كيف يتغير حيّز الصندوق الذي يضم كتابة بالاتجاه العمودي مما يؤدي إلى خروج الكتابة خارج الصندوق إذا كان الحيّز أقل مما يجب.

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

لتسهيل الأمر، طوّرت CSS مؤخرًا مجموعة من الخاصيات المترابطة تستبدل بصورةٍ أساسية الخاصيات الفيزيائية، مثل width و height بأخرى منطقية logical أو متعلقة بالانسياب flow relative.

ترتبط الخاصية inline-size بالخاصية الفيزيائية width في وضع الكتابة الأفقي (تشير إلى القياس وفق اتجاه السطر)، كما ترتبط الخاصية block-size بالخاصية height وتشير إلى القياس وفق اتجاه الكتلة.

يعرض المثال التالي كيف استبدلنا الخاصية width بالخاصية inline-size وكيفية تأثيرها:

الخاصيات المنطقية المرتبطة بالهوامش والحواف والحشوات

تعرفنا في المقال السابق عن نموذج الصندوق في تنسيقات CSS وعلى تنسيق الحواف، وقد رأينا الكثير من الأمثلة عن الخاصيات الفيزيائية للهوامش والحواف، مثل margin-top و padding-left و border-bottom. كما تُربط الخاصيتان اللتان تحددان الحيّز والارتفاع بخواص منطقية، تُربط الخاصيات السابقة بخاصيات منطقية أيضًا.

ترتبط الخاصية margin-top بالخاصية margin-block-start التي تشير دائمًا إلى الهامش عند بداية الكتلة، كما ترتبط الخاصية padding-left بالخاصية padding-inline-start التي تشير إلى بداية الاتجاه السطري، أي أن كلاهما يشيران إلى بداية النص في وضع الكتابة. ترتبط الخاصية border-bottom أيضًا بالخاصية border-block-end التي تدل على الحافة التي تقع في نهاية اتجاه الكتلة.

يقارن المثال التالي بين الخاصيات الفيزيائية والمنطقية، فلو غيرت وضع الكتابة للصندوقين في الأسفل بتغيير الخاصية writing-mode ضمن المحدد box. إلى القيمة vertical-rl، فستلاحظ كيف تبقى الخاصيات الفيزيائية مرتبطةً بالاتجاه الفيزيائي، بينما تتغير الخاصيات المنطقية مع تغير وضع الكتابة.

هل تستطيع أن تجعل الحافة السفلية تحت المحتوى المكتوب في كلا وضعي الكتابة؟

ستجد عددًا كبيرًا من الخاصيات المنطقية التي تستهدف الخاصيات المفردة للحواف، ويمكنك الاطلاع عليها عبر صفحة شبكة مطوري موزيللا الخاصة بالخاصيات والقيم المنطقية.

القيم المنطقية

تعرّفنا حتى الآن على أسماء الخاصيات المنطقية، لكن وكما تأخذ الخاصيات الفيزيائية قيمًا فيزيائية، مثل top و right و bottom و left، ترتبط هذه القيم بقيم منطقية، مثل block-start و inline-end و block-end و inline-start.

حاول أن تغير وضع الكتابة في المثال التالي إلى vertical-rl لترى ما سيحدث للصورة. غيّر أيضًا inline-start إلى inline-end لكي تغيّر انسياب المحتوى.

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

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

هل ينبغي استخدام الخاصيات الفيزيائية أم المنطقية؟

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

خلاصة

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

ترجمة -وبتصرف- للمقال handling different text directions.

اقرأ أيضًا

• المقال السابق: تنسيق الخلفيات وحواف الصفحات باستخدام CSS
• العناصر العائمة Floats في CSS
• تنسيق نصوص صفحات الويب باستخدام CSS