CSS text-wrap: pretty

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

p {
  text-wrap: pretty;
}

See the Pen

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

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

Примечание. text-wrap: pretty отличается от CSS свойства orphans, что актуально при использовании многоколоночной вёрстки CSS. Кроме того, pretty работает только с "сиротами", но не с "вдовами".

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

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

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

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