التفاف النص في 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 للعنصر الذي يتضمّنها نفسه. ويمثل هذا ميزة إضافية تتمثل في "تقليص حجم الكتلة" إلى القالب المتوازن. ليس لـ text-wrap: balance هذا التأثير ويمكن رؤيته في هذا المثال:

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

يؤدي التفاف النص المتوازن إلى حدوث خلل في العنصر الموجود.

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

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