CSS text-wrap: balance

CSS text-wrap: balance - это классическая типографская техника ручного переноса строк для сбалансированных текстовых блоков. При этом браузеру известны все факторы, такие как размер шрифта, язык и выделенная область.

Chrome Canary включает новую функцию - text-wrap: balance from CSS Text Level 4 . Чтобы проверить это, включите chrome://flags/#enable-experimental-web-platform-features, а затем посмотрите на примеры в этом посте, чтобы узнать, как эта одна строка CSS может значительно улучшить ваши макеты текста.

Попробуйте демо-версию

Без text-wrap: balance; дизайнеры, редакторы контента и издатели имеют мало инструментов для изменения баланса линий... Лучше всего использовать <wbr> или &shy; , чтобы помочь макетам текста принимать более разумные решения о том, где разрывать линии и слова.

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

.unbalanced {
  max-inline-size: 50ch;
}

С помощью функции text-wrap: balance из CSS Text 4 вы можете попросить браузер найти наилучшее решение для сбалансированной обводки текста. Браузеру известны все факторы, такие как размер шрифта, язык и выделенная область. Результаты браузерного сбалансированного обертывания текста выглядят так сегодня в Chrome Canary с включенным chrome://flags/#enable-experimental-web-platform-features:

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

Полезно видеть их бок о бок, по-прежнему, и без наложенной отладочной информации.

Сбалансированный текстовый блок должен радовать глаз гораздо больше. Он лучше привлекает внимание и в целом легче читается.

# Поиск баланса

Заголовки - это первое, что видит читатель; они должны быть визуально привлекательными и легко читаемыми. Это привлекает внимание пользователя и создает ощущение качества и уверенности. Хорошая типографика придает уверенность читателям, побуждая их продолжать чтение.

Традиционно эта задача решалась вручную или оптически, поскольку дизайнер, выравнивающий текст, хочет угодить глазу, а не математике. Эту тему часто называют "метрическое и оптическое выравнивание". Для крупных изданий, таких как New York Times , балансировка заголовков является очень важной деталью пользовательского опыта.

Попробуйте демо-версию

Балансировка основного текста статьи встречается нечасто, поскольку ему не нужно выделяться или привлекать внимание читателя.

Балансировка текста в типографике восходит к ранним временам печати, когда печатники вручную размещали буквы. По мере развития инструментов и технологий менялись и результаты. Сегодня у дизайнеров есть цвет, вес, размер и многое другое, чтобы сбалансировать текст в дизайне.

Однако в Интернете меньше возможностей для контроля, поскольку документ меняет размеры и цвета в зависимости от пользователей. text-wrap: balance привносит искусство балансировки текста в Интернет автоматизированным способом, опираясь на работу и традиции дизайнеров из печатной индустрии.

# Балансировка заголовков

Это будет и должно быть основным вариантом использования текстовой обертки: баланс. Привлекайте внимание размером и делайте его симметричным и разборчивым для чтения. Установите для всех заголовков сбалансированное обертывание текста с помощью следующего CSS:

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

Простое применение этого стиля может не дать ожидаемых результатов, так как текст должен быть обернут и, следовательно, где-то применяется максимальная длина строки. Вы увидите max-inline-size , установленный на примерах в этом посте, этот стиль похож на max-width, но может быть установлен один раз для любого языка.

# Ограничения

Задача балансировки текста не является бесплатной. Браузеру необходимо выполнить несколько итераций, чтобы найти наилучшее решение для сбалансированной обертки. Эта стоимость производительности смягчается правилом, которое работает только для 4 обернутых строк и менее.

Попробуйте демо-версию

# Показатели производительности

Не стоит применять балансировку text-wrap ко всему дизайну. Это напрасный запрос из-за ограничения в четыре строки и может повлиять на скорость рендеринга страницы.

Не

* {
  text-wrap: balance;
}

РАССМОТРЕТЬ ВМЕСТО ЭТОГО

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

Большим преимуществом этой функции является то, что вам не нужно ждать и синхронизировать балансировку обводки текста с загрузкой шрифта, как это можно сделать сегодня с помощью JavaScript. Браузер позаботится об этом!

# Взаимодействие со свойством white-space

Балансировка текста конкурирует со свойством white-space , поскольку одно из них требует отсутствия обертывания, а другое - сбалансированного обертывания. Преодолеть это можно, сняв свойство белого пространства, после чего сбалансированная обертка может быть применена снова.

.balanced {
  white-space: unset;
  text-wrap: balance;
}

#Балансировка не изменит размер инлайна элемента

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

Видите, что ширина, показанная в DevTools, имеет много лишнего пространства в конце? Это потому, что это только стиль обертывания, а не стиль изменения размера. Из-за этого есть несколько сценариев, в которых text-wrap: balance не так уж и хорош, по крайней мере, на мой взгляд. Например, заголовки внутри карточки (или любого контейнера с границами или тенями).