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

أسلوب الطباعة الكلاسيكي لإنشاء فواصل الأسطر يدويًا لكتل النصوص المتوازنة، أصبح متاحًا في 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;
}

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

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

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

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

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

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

على الويب، لا تتوفّر عناصر تحكّم كثيرة لأنّ المستند يغيّر الحجم والألوان استنادًا إلى المستخدمين. 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% من متوسط عرض الخط.