CSS-перенос текста: красиво

Включите оптимизированный перенос текста: красота важнее скорости.

Адам Аргайл
Adam Argyle

В Chrome 117 вы можете использовать новую функцию переноса текста text-wrap: pretty из CSS Text Level 4 .

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

Типографские вдовы и сироты — это отдельные слова, стоящие отдельно в конце абзаца или текстового блока. Вдовы — это одни слова в верхней части текстового блока, а сироты — одни в конце текстового блока. Они могут нарушить то, как наши глаза просматривают текст, что затрудняет чтение контента. Некоторые дизайнеры избегают их любой ценой и делают все возможное, чтобы их предотвратить.

Абзац отображается с витриной в начале и сиротой в конце по сравнению с тем же абзацем без сирот или вдов.
Изображение взято из Google Fonts — Widows & Orphans.

Начиная с Chrome 117, «сирот» можно избежать с помощью одной строки CSS: text-wrap: pretty .

Эта функция делает немного больше, чем просто гарантирует, что абзацы не заканчиваются одним словом, она также регулирует расстановку переносов, если в конце абзаца появляются последовательные строки с переносами, или корректирует предыдущие строки, чтобы освободить место. Он также соответствующим образом настроит выравнивание текста. text-wrap: pretty предназначен для лучшего переноса строк и разрыва текста, в настоящее время ориентирован на сирот. В будущем text-wrap: pretty может предложить больше улучшений.

Сравнение абзаца с сиротами и абзаца без сирот, каждый со значком плохой или хороший.
Изображение взято из статьи «Почему вам следует удалять слова-сироты из основного текста».

Существует также text-wrap: balance , который не предотвращает появление сирот, но обеспечивает перенос текста таким образом, чтобы создать гармоничный текстовый блок. Лично я использую balance для заголовков и pretty для абзацев.

Если вас интересуют подробности алгоритма, используемого для определения оптимального количества строк, или вопросы производительности, вот ссылка на проектный документ, созданный инженером этой функции Кодзи Исии .

Если у вас есть другие улучшения или предложения, мы будем рады их услышать! Сообщите о проблеме в системе отслеживания ошибок Chromium с подробными сведениями, примерами хороших и плохих разрывов строк, и мы свяжемся с вами.