На главную

Зачем нужна «красивая» типографика?

В статье присутствует типографские определения, в котороых я не разбираюсь и которые, возможно, переведены мною не правильно.

Зачем нужна «красивая» типографика?

Идеи хорошей типографики формировались задолго до появления компьютеров, в эпоху ручного набора текста при помощи металла, дерева и ручного труда. Опытные наборщики следили за тем, где именно поставить перенос, старались не оставлять одиноких слов на отдельных строках и сохраняли аккуратную «рваную» правую сторону (так называемый rag). Все эти детали серьёзно влияют на удобство чтения и восприятие текста.

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

Как раньше работал перенос строк в вебе?

В течение 30 с лишним лет в вебе действовал принцип “одна строка — одно решение”: браузер начинал выкладывать слово за словом, пока не заканчивалось доступное место. Как только в строке не оставалось места, всё переносилось на следующую строку. Если при этом была включена автоматическая расстановка переносов, то браузер мог разорвать слово по месту, максимально использующему оставшееся пространство в строке. Но никакие дополнительные правила (например, запрет «висячих» слов и т. д.) не учитывались.

Такая «жадная» стратегия приводила к множеству проблем:

  1. Одинокие короткие строки в конце абзаца, особенно когда это последнее слово абзаца.
  2. Неровная правая сторона абзаца (плохой rag), когда строки слишком различаются по длине.
  3. Излишние переносы, в том числе подряд идущие переносы.
  4. Типографические «реки» — когда пробелы между словами выстраиваются друг под другом, создавая странные белые полосы в тексте.

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

text-wrap: pretty: что это и как работает

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

  • Предотвращать короткие строки в конце абзаца.
  • Улучшать «рваный» правый край текста за счёт распределения слов по строкам.
  • Сокращать необходимость в переносах (и избегать нескольких переносов подряд).

Пока что реализация WebKit не борется с «реками» пробелов, но в будущем это тоже может появиться.

Отличия в реализации Chromium от Webkit

В Chrome 117, Edge 177 и Opera 103 поддержка text-wrap: pretty появилась раньше, но там она охватывает лишь последние четыре строки абзаца и в целом меньше делает для улучшения внешнего вида. Браузеры на Chromium не пытаются оптимизировать длину всех строк, фокусируясь больше на том, чтобы избежать короткого последнего слова и убрать подряд идущие переносы в конце абзаца.

CSS-спецификация (CSS Text Level 4) лишь описывает общее назначение pretty, уточняя, что каждая реализация может по-своему «стараться» улучшить переносы строк. То есть по стандарту браузеры могут делать больше, чем просто убирать короткую последнюю строку, но не обязаны это делать одинаково.

text-wrap: balance

Важное отличие pretty от balance состоит в том, что balance пытается сделать все строки одинаковой длины. Это здорово для заголовков, подзаголовков, коротких подписей и т.п. — там, где красиво выглядят одинаковые по ширине строки. Но тогда блок текста может занять меньшую часть контейнера, чем доступно, потому что отдельные строки «урезаются» по ширине, чтобы получились равные по длине.

Например, если вы применяете balance к заголовку из трёх строк, браузер сделает их примерно одинаковыми по ширине. Но это может означать, что первая строка станет намного короче, чем могла бы быть, — лишь бы все три уместились в равном формате.

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

Когда применять balance:

  • Короткие текстовые блоки (заголовки, подписи, тизеры).
  • Не страшно, что блок станет уже контейнера.

Когда применять pretty:

  • Если нужна более «классическая» типографика, избегаема короткая последняя строка, лишние переносы и т.д., при этом сохраняется «заполнение» контейнера по всей доступной ширине.

Остальные значения text-wrap

text-wrap: avoid-short-last-lines

Новое (пока не реализованное ни в одном браузере) значение, которое будет отвечать исключительно за предотвращение короткой последней строки. Фактически, задуман как упрощённый аналог pretty, но без дополнительных улучшений.

text-wrap: auto

Это значение по умолчанию, соответствующее «жадному» алгоритму, который использовался в вебе с 1991 года. В будущем браузеры могут решить изменить этот алгоритм, внедрив что-то более сложное по умолчанию, но пока есть вероятность, что «как было, так и осталось».

text-wrap: stable

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

text-wrap-mode и text-wrap-style

Свойство text-wrap — это сокращённая запись для двух свойств:

text-wrap-mode: wrap | nowrap; 
text-wrap-style: auto | stable | balance | pretty | avoid-short-last-lines;
  • text-wrap-mode управляет тем, будет ли вообще перенос (wrap/nowrap).
  • text-wrap-style определяет алгоритм переноса.

Таким образом, можно отдельно управлять включением/выключением переноса строк и выбором алгоритма. Например:

/* Включаем перенос строк и выбираем режим pretty */ 
text-wrap: wrap pretty;

Чтобы обеспечить совместимость с устаревшими браузерами, иногда стоит указывать и white-space: normal/nowrap.

Когда лучше применять pretty, а когда balance?

  • pretty стоит попробовать практически на любом тексте, особенно на длинных абзацах, чтобы улучшить типографику: убрать короткую последнюю строку, снизить количество лишних переносов и сделать «рваную» правую сторону более аккуратной.
  • balance отлично подходит для небольших блоков (заголовков, подписей), где красиво смотрятся равные по длине строки. Но учтите, что блок может стать уже, чем контейнер.
  • auto или stable подойдут, если не хотите менять привычное поведение, особенно если текст часто меняется или редактируется.

Что дальше?

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

Источник