يأتي أسلوب الخط الكلاسيكي في كتابة فواصل الأسطر يدويًا للكتل النصية المتوازنة في CSS.
قيمة balance
لـ text-wrap
هي جزء من مستوى النص 4 في CSS. ألق نظرة على الأمثلة في هذه المنشورات لتعرف كيف يمكن لهذا السطر من CSS أن يحسن بشكل كبير تخطيطات النص الخاصة بك.
بدون text-wrap: balance
، أصبح لدى المصممين ومحرري المحتوى والناشرين
بعض الأدوات
لتغيير طريقة موازنة الخطوط. أفضل الخيارات المتاحة هي استخدام <wbr>
أو ­
للمساعدة في توجيه تنسيقات النصوص إلى قرارات أكثر ذكاءً حول أماكن تقسيم الأسطر والكلمات.
كمطور، لا تعرف الحجم النهائي أو حجم الخط أو حتى لغة العنوان أو الفقرة. توجد جميع المتغيرات اللازمة للمعالجة الفعالة والجمالية لالتفاف النص في المتصفح. لهذا السبب نلاحظ أنّ العنوان الرئيسي يلتف كما هو في الصورة التالية:
![يتم تمييز العنوان باستخدام "أدوات مطوري البرامج"، ويمتد على العرض الكامل لمساحته المضمّنة، ويحتوي على كلمتَين معلّقتَين في السطر الثاني.](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-fe0c4a80e307b.png?authuser=6&hl=ar)
.unbalanced {
max-inline-size: 50ch;
}
باستخدام text-wrap: balance
من CSS Text 4، يمكنك أن تطلب من المتصفح اكتشاف أفضل حل متوازن لإحاطة النص. يعرف المتصفّح جميع العوامل، مثل حجم الخط واللغة والمنطقة المخصّصة.
نتائج التفاف النص المتوازن في المتصفِّح تبدو اليوم على النحو التالي:
![يتم تمييز العنوان مثل أدوات مطوري البرامج السابقة، إلا أنه لا يمتد هذه المرة بالعرض الكامل. لقد بدأ سطرًا جديدًا قبل النهاية، وبالتالي فهو جزء نص متوازن.](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-0861292a42f0d.png?authuser=6&hl=ar)
.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% من متوسط عرض الخط.