Перенос текста CSS: баланс

Классический типографический приём ручного создания переносов строк для сбалансированного расположения текстовых блоков теперь доступен в CSS.

Adam Argyle

Параметр balance для text-wrap относится к уровню 4 CSS Text Level . Посмотрите примеры в этой статье, чтобы узнать, как эта всего одна строка CSS может значительно улучшить структуру текста.

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

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

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

С помощью text-wrap: balance из CSS Text 4 вы можете попросить браузер самостоятельно определить оптимальное решение для сбалансированного переноса текста по строкам. Браузер знает все факторы, такие как размер шрифта, язык и выделенная область. Результаты сбалансированного переноса текста в браузере сегодня выглядят так:

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

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

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

Найти баланс

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

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

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

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

Сбалансированные заголовки

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

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

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

Ограничения

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

Вопросы производительности

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

* {
  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 для сбалансированного переноса текста имеют преимущество, поскольку они изменяют max-width самого содержащего элемента. Это дает дополнительный бонус в виде "сжатия" текста внутри сбалансированного блока. text-wrap: balance не имеет такого эффекта, что можно увидеть в этом примере:

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

Как ни парадоксально, сбалансированное обтекание текста создает дисбаланс внутри содержащегося в нем элемента.

Краткое объяснение используемой браузером техники.

Браузер фактически выполняет бинарный поиск наименьшей ширины, которая не приводит к появлению дополнительных строк, останавливаясь на одном пикселе CSS (а не на пикселе отображения). Для дальнейшего минимизирования шагов в бинарном поиске браузер начинает с 80% от средней ширины строки.