Как выровнять абзац по ширине и не сломать его в Chrome
`text-align: justify` даёт ровные края, но не делает типографику аккуратной сам по себе. В узкой колонке браузер растягивает пробелы, длинные слова выходят наружу, а элемент Zero Block с автоматической шириной может пересчитать геометрию иначе. Поэтому выравнивание включают только у выбранных длинных абзацев, задают правильный язык и переносы и не смешивают его с autowidth.
Когда выравнивание по ширине уместно
Justify хорошо работает в достаточно широкой колонке с несколькими строками. Он может подойти для редакционной статьи, описания услуги или цитаты. Он плохо подходит для заголовков, карточек с двумя строками, кнопок, адресов и коротких подписей.
Главный критерий не «ровный правый край», а спокойный ритм пробелов. Если в строке появились заметные белые реки, колонку лучше расширить, уменьшить кегль или вернуться к выравниванию влево.
Минимальный безопасный набор
Назначьте выбранному текстовому элементу свой класс, например mk-justify.
Правило должно действовать на текст внутри этого элемента, а не на всю страницу:
.mk-justify .tn-atom {
text-align: justify;
hyphens: auto;
overflow-wrap: break-word;
}На странице должен быть корректный язык документа, например lang="ru", либо
язык надо указать у самого текстового фрагмента. Без языка автоматические
переносы не знают, по каким правилам делить слова.
Это основа, а не обещание одинаковой картинки во всех браузерах. Словари переносов, метрики шрифта и доступная ширина отличаются. Проверяется читабельность и отсутствие вылета, а не пиксельное совпадение каждой строки.
Почему текст «улетает» в Chrome
Zero Block умеет автоматически подбирать ширину текстового элемента. Режим
хранится в data-field-textfit-value, а рантайм отдельно исправляет размер шрифта
и межстрочный интервал на брейкпоинтах.
Если одновременно попросить браузер растянуть строку по ширине и попросить Тильду вычислить ширину из содержимого, возникает замкнутая задача: содержимое зависит от ширины, а ширина — от содержимого. Результат может отличаться между движками и моментами загрузки шрифта.
Поэтому MOD-183 отказывается от запуска на элементах с режимом
автоматической ширины, а не пытается исправлять их новым font-size или шириной.
Чего не надо делать
Не используйте глобальные правила вроде:
.t396__elem { text-align: justify !important; }Они затронут заголовки, кнопки, цены, меню и служебные подписи. !important
также затруднит настройку отдельных адаптивов в редакторе.
Не вставляйте невидимые пробелы вручную для красивого края. Они ломают копирование, поиск, перенос на другом устройстве и работу скринридера. Не расставляйте мягкие переносы в каждом слове до проверки автоматических — текст клиента изменится, и ручная разметка быстро устареет.
Что проверить на четырёх ширинах
Подготовьте один настоящий абзац клиента, а не «рыбу», и проверьте:
- широкую и узкую колонку;
- русский и английский фрагмент;
- длинную ссылку или артикул;
- неразрывное число с единицей измерения;
- загрузку основного и запасного шрифта;
- Chrome, Safari и Firefox;
- все рабочие брейкпоинты проекта.
Если один URL создаёт горизонтальную прокрутку, дайте ему отдельное правило
переноса или сократите отображаемую подпись. Если последняя строка растягивается,
проверьте, не добавлено ли отдельное text-align-last: justify: для обычного
абзаца оно чаще всего не нужно.
Как передать клиенту
Запишите, какие классы можно использовать и на каких типах текста. Простая инструкция выглядит так: «класс ставим только на длинный текст; у элемента выключаем автоматическую ширину; после замены языка проверяем переносы».
Так дизайнерская настройка остаётся управляемой. Клиент может менять текст в редакторе, не касаясь CSS, а модификация не вмешивается в весь сайт ради одного ровного абзаца.