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

يمكنك تفعيل ميزة "لف النص" المحسّنة للحصول على مظهر أفضل بدلاً من السرعة.

Adam Argyle

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

p {
  text-wrap: pretty;
}

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

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

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

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

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

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