CSS text-wrap: balance

تتوفّر في CSS تقنية كلاسيكية لأسلوب الخط تتمثّل في إنشاء فواصل أسطر يدويًا للحصول على كتل نصية متوازنة.

Adam Argyle

تشكّل القيمة 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;
}

لن تؤدي الموازنة إلى تغيير inline-size للعنصر

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

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

يؤدي التفاف النص المتوازن إلى عدم توازن العنصر الذي يحتوي عليه.

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

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