التفاف النص في 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;
}

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

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

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

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

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

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

ملاحظة: إن موازنة نص المقالة الرئيسية ليس أمرًا شائعًا لأنه ليس كذلك يجب أن تجذب انتباه القارئ أو تلفت انتباهه.

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

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