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

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

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 عن خدمة CSS الموقع orphans والذي يكون مفيدًا عند استخدام صفحات الأنماط المتتالية (CSS) التصميم. بالإضافة إلى ذلك، يتعامل pretty مع الأيتام فقط، وليس الأرامل.

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

صورة تم الحصول عليها من أهمية إزالة الأيتام من نص جسمك

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

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

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