التفاف النص في CSS: جميل

يمكنك تفعيل التفاف النص المحسَّن لزيادة السرعة.

Adam Argyle
Adam Argyle

يمكنك استخدام ميزة التفاف النص الجديدة بدءًا من الإصدار 117 من Chrome، text-wrap: pretty. من مستوى نص CSS 4.

p {
  text-wrap: pretty;
}
https://codepen.io/web-dot-dev/pen/yLGmzLJ

الحروف المطبعية الأرامل والأيتام هي أفراد الكلمات التي تكون قائمة بذاتها في نهاية الفقرة أو النص. الأرمل هي كلمات بمفردهم الجزء العلوي من مربع النص، وأمّا الأيتام بمفردهم في نهاية النص حظر. لأنّها تقاطع طريقة تصفُّح النص أثناء تصفُّح النص، ما يزيد من صعوبة عرض المحتوى. قراءتها. يتجنبها بعض المصممين بأي ثمن ويجرون لمسافات طويلة ومنعها.

تظهر فقرة مع أرملة في بدايتها وأخرى يتيمة في النهاية، مقارنةً بالفقرة نفسها بدون الأرامل أو الأرامل.
صورة تم الحصول عليها من Google Fonts—Widows & الأيتام

بدءًا من الإصدار 117 من Chrome، يمكن تجنُّب البيانات المجهولة باستخدام سطر واحد من صفحات CSS: text-wrap: pretty.

وهذه الميزة لا تقتصر فقط على ضمان عدم انتهاء الفقرات كلمة واحدة، فإنه يضبط أيضًا الواصلة في حالة ظهور خطوط واصلة متتالية في نهاية الفقرة أو يضبط الأسطر السابقة لتوفير مساحة. ستفتح أيضًا بشكل مناسب لتبرير النص. text-wrap: pretty مخصّص بشكل عام أفضل التفاف الأسطر وفواصل النص، ويركزون حاليًا على الأيتام. في المستقبل، قد توفّر "text-wrap: pretty" المزيد من التحسينات.

مقارنة بين فقرة وفقرة وأخرى لا تتضمّن أيتام
صورة تم الحصول عليها من أهمية إزالة الأيتام من نص جسمك

هناك أيضًا text-wrap: balance غير الأعتام، ولكنه يضمن التفاف النص بطريقة تؤدي إلى إنشاء كتلة نص متناغمة. أنا شخصيًا أستخدم balance للعناوين الرئيسية وpretty الفقرات.

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

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