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

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

Adam Argyle

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

دعم المتصفح

• 114
• 114
• 121
• 17.5

المصدر

مشاهدة عرض توضيحي

في حال عدم توفّر 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 النص المتعادل، لأنّها تغيّر max-width العنصر المُحاط نفسه. ويعود سبب ذلك إلى أنّه يمكن "تغليفه" بالبلاستيك حول الكتلة المتوازنة. لا يُحدث text-wrap: balance هذا التأثير، ويمكن الاطّلاع عليه في هذا المثال:

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

يؤدي التفاف النص المتوازن إلى خلق خلل في العنصر المضمّن.

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

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