التفاف النص في CSS: الرصيد

يأتي استخدام CSS في أسلوب الخط الكلاسيكي لكتابة فواصل الأسطر يدويًا للكتل النصية المتوازنة.

آدم أرجيل

Twitter GitHub

إنّ قيمة balance للسمة text-wrap هي جزء من المستوى 4 لنص CSS. ألق نظرة على الأمثلة في هذه المشاركة لمعرفة كيف يمكن لهذا السطر من CSS تحسين تنسيقات النص الخاصة بك بشكل كبير.

بدون text-wrap: balance، سيكون لدى المصممين ومحرّري المحتوى والناشرين بعض الأدوات لتغيير طريقة موازنة الخطوط. أفضل الخيارات المتاحة هي استخدام <wbr> أو ­ للمساعدة في توجيه تنسيقات النص إلى اتخاذ قرارات أكثر ذكاءً بشأن أماكن تقسيم الأسطر والكلمات.

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

.unbalanced {
  max-inline-size: 50ch;
}

باستخدام text-wrap: balance من CSS Text 4، يمكنك أن تطلب من المتصفح اكتشاف أفضل حل متوازن لالتفاف الأسطر للنص. يتعرّف المتصفّح على جميع العوامل، مثل حجم الخط واللغة والمنطقة المخصّصة. تبدو نتائج التفاف النص المتوازن في المتصفح كما يلي:

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

ومن المفيد رؤيتها جنبًا إلى جنب، بدون إضافة معلومات تصحيح الأخطاء متراكبة.

ينبغي أن تكون عينك أكثر إرضاءً من خلال جزء النص المتوازن. إنه يجذب الانتباه بشكل أفضل وأسهل في القراءة بشكل عام.

تحقيق التوازن

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

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

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

ومع ذلك، على الويب، يتوفر تحكم أقل لأن الوثيقة تغير الأحجام والألوان بناءً على المستخدمين. يوفّر text-wrap: balance فن موازنة النص على الويب بطريقة مبرمَجة، استنادًا إلى أعمال المصممين وتقاليدهم في مجال الطباعة.

موازنة العناوين

ومن المفترض أن تكون هذه الحالة هي حالة الاستخدام الأساسية لـ text-wrap: balance. ارسم العين بالحجم واجعلها متماثلة وسهلة القراءة. اضبط جميع العناوين على التفاف نص متوازن باستخدام لغة CSS التالية:

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

قد لا يزودك تطبيق هذا النمط بالنتائج التي تتوقعها، حيث يجب أن يلتف النص وبالتالي يتم تطبيق حد أقصى لطول السطر من أي مكان. ستظهر لك العلامة max-inline-size على الأمثلة في هذه المشاركة، وهذا النمط يشبه max-width، ولكن يمكن ضبطه مرة واحدة لأي لغة.

القيود

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

اعتبارات الأداء

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

* {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

تتمثل إحدى المزايا المهمة لهذه الميزة في أنك لن تحتاج إلى الانتظار ووقت التفاف النص لموازنة حجم تحميل الخط، كما هو الحال مع JavaScript اليوم. فالمتصفح يعتني بذلك!

التفاعلات مع موقع white-space

تتنافس ميزة موازنة النص مع السمة white-space لأنّ إحداهما تطلب عدم التفاف النص والأخرى تطلب التفافًا متوازنًا. التغلب على هذا عن طريق إلغاء تعيين خاصية المساحة البيضاء، ثم يمكن تطبيق الالتفاف المتوازن مرة أخرى.

.balanced {
  white-space: unset;
  text-wrap: balance;
}

لن تؤدي الموازنة إلى تغيير الحجم المضمّن في العنصر.

تستفيد بعض حلول JavaScript من التفاف النص بشكل متوازن، لأنّها تغيِّر max-width للعنصر المضمّن نفسه. هذا له ميزة إضافية وهي "تقليص الالتفاف" إلى القطعة المتوازنة. ليس للقاعدة text-wrap: balance هذا التأثير ويمكن رؤيتها في المثال التالي:

هل ترى أنّ عرض أدوات مطوّري البرامج يؤدي إلى زيادة المساحة في نهايتها؟ هذا لأنه نمط التفاف فقط، وليس نمطًا لتغيير المقاس. لهذا السبب، هناك بعض السيناريوهات التي لا تكون فيها السمة text-wrap: balance رائعة، على الأقل في رأيي. على سبيل المثال، العناوين داخل بطاقة (أو أي حاوية بحدود أو ظلال).

يؤدي التفاف النص المتوازن إلى حدوث خلل في العنصر المتضمن بشكل ساخر.

شرح موجز للأسلوب الذي يستخدمه المتصفح

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