التفاف النص في 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 & Orphans

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

ملاحظة: تختلف سمة text-wrap: pretty عن سمة orphans في CSS التي تكون ذات صلة عند استخدام تنسيق ملف CSS المكوّن من عدة أعمدة. بالإضافة إلى ذلك، لا يعالج pretty سوى الكلمات الوحيدة في السطر، وليس الكلمات الوحيدة في الصفحة.

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

مصدر الصورة: أسباب إزالة الكلمات الوحيدة في سطر من النص

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

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

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