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

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

Adam Argyle

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

p {
  text-wrap: pretty;
}

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

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

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

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

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

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