Чтобы диагностировать неравномерные интервалы в выровненном по ширине тексте браузера на Mac, сначала переключите абзац на выравнивание по началу строки. Затем по очереди проверьте правила интервалов, разрывы строк, ширину колонки и загрузку шрифтов. Такая последовательность поможет определить, какое именно изменение улучшает вид абзаца.

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

Что может рассказать неравномерный интервал

При выравнивании по ширине доступное пространство внутри строки распределяется так, чтобы заполнить ее область. В разных строках разные слова и разные возможности для растяжения, поэтому промежутки между ними не обязаны совпадать. W3C также оставляет браузерам свободу в выборе алгоритмов выравнивания; одинаковый CSS не предписывает одинаковые интервалы во всех браузерах. Модуль CSS Text Level 3

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

Простой расчет объясняет, почему стоит обратить внимание на строки с малым количеством слов. Допустим, доступная ширина строки — 480 CSS-пикселей, а ее содержимое до выравнивания занимает 420 пикселей. В иллюстративной модели, которая поровну распределяет оставшиеся 60 пикселей между шестью подходящими пробелами, каждый из них увеличится на 10 пикселей. Если таких пробелов всего три, при том же остатке каждый увеличится на 20 пикселей. Это расчетные примеры, а не замеры браузера и не универсальная формула отображения.

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

Начните с одного контролируемого сравнения на Mac

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

В Chrome щелкните абзац, удерживая Control, и выберите Inspect. Другой вариант — открыть инструменты разработчика сочетанием Command–Option–I, а затем выбрать нужный элемент. Инструменты разработчика браузера позволяют изучать текущий документ и локально просматривать изменения HTML и CSS. Что такое инструменты разработчика браузера?

Выберите родительский блок абзаца, а не отдельное слово внутри строчного элемента. В панели Chrome Elements изучите вкладки Styles и Computed. На первой показаны применимые правила, в том числе перекрытые другими; вторая помогает определить фактически примененные значения. Найдите нужный параметр с помощью фильтра свойств. Справочник по возможностям CSS

Запишите значения text-align, text-align-last, word-spacing, letter-spacing, white-space, hyphens, font-family и font-size. Также отметьте ширину области содержимого абзаца. Получится небольшая таблица сравнения: исходные условия, одно изменение, наблюдаемый результат.

Временно задайте абзацу text-align: start и text-align-last: start. Если широкие промежутки исчезнут, причиной симптома отчасти служит выравнивание по ширине. Если интервалы останутся, продолжите проверку явных настроек интервалов и пробельных символов. Перед следующим отдельным тестом восстановите исходное выравнивание. В DevTools можно переключать объявления и редактировать значения, чтобы просматривать изменения в реальном времени. Что такое инструменты разработчика браузера?

Проверьте явные настройки интервалов и сохранение пробелов

При активном выравнивании по началу строки проверьте word-spacing: normal. MDN определяет это значение как обычный интервал, заданный шрифтом или браузером; значение длины добавляет интервал к встроенному в шрифт расстоянию между словами. Поэтому положительное унаследованное значение может иметь значение еще до применения выравнивания по ширине. Свойство CSS word-spacing

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

Затем проверьте white-space. При normal последовательности пробелов схлопываются, а текст переносится по мере необходимости. При pre-wrap последовательности пробелов и переводы строк в исходном тексте сохраняются, но переносы остаются возможны. При pre-line пробелы схлопываются, однако переводы строк в исходном тексте по-прежнему создают разрывы. Эти различия могут повлиять на то, что кажется дефектом интервалов. Свойство CSS white-space

Для обычного описания с автоматическим переносом временно проверьте white-space: normal. Если результат улучшится, изучите исходный текст и правило обработки пробелов, прежде чем выбирать постоянное изменение. Сохраняйте значимое форматирование: для предварительно форматированного примера и текстового описания нужны разные настройки. Этот тест помогает выявить фактор, влияющий на макет, но не доказывает, что нужно удалить все сохраняемые пробелы.

Проверьте короткие строки, принудительные разрывы и ширину колонки

Растягивается ли последняя строка?

Проверьте text-align-last, если в короткой завершающей строке появились необычно широкие промежутки. Это свойство управляет как последней строкой блока, так и строкой непосредственно перед принудительным разрывом. При text-align: justify значение по умолчанию auto выравнивает такие строки по началу; явное значение justify растягивает их. Чтобы проверить это условие отдельно, задайте text-align-last: start. Свойство CSS text-align-last

Найдите элемент br в месте проблемного разрыва. Согласно WHATWG, он задает разрыв строки в содержимом и должен использоваться, когда разрыв обусловлен самим содержимым. Если описание должно идти обычным текстовым потоком, проверьте, не вставлен ли разрыв лишь для воспроизведения конкретной компоновки на компьютере; если это предполагаемое поведение, пусть конец строки определяется переносом. Стандарт HTML: элемент br

Возникает ли проблема в узкой колонке?

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

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

Поможет ли перенос слов с дефисами?

Для английского текста проверьте hyphens: auto, предварительно убедившись, что для самого абзаца или его родительского элемента задано правильное значение lang, например en. Автоматический перенос зависит от того, указан ли язык, и доступен ли подходящий словарь. Само по себе отсутствие видимых дефисов не доказывает, что объявление CSS не сработало. Свойство CSS hyphens

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

Отделите изменения шрифта от выравнивания браузера

Если окончания строк меняются после первоначального отображения страницы, прежде чем сравнивать снимки экрана, проверьте загрузку шрифтов. CSS Font Loading API предоставляет document.fonts.ready — промис, который выполняется после завершения загрузки шрифтов и связанного с ней макета. Это удобная точка синхронизации для измерений, хотя последующие изменения страницы все равно могут потребовать еще одного сравнения. CSS Font Loading API

Для визуальной проверки сравните исходный абзац с временным значением font-family: system-ui, сохранив ширину и размер шрифта. Если результат улучшится, это говорит о том, что выбор шрифта влияет на данный макет, но не доказывает, что исходный шрифт неисправен. В Firefox или Safari вкладка Fonts в инспекторе поможет изучить шрифты, примененные к выбранному элементу. Что такое инструменты разработчика браузера?

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

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

Выберите исправление, подтвержденное тестами

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

Наблюдение Что проверить дальше Возможное исправление
Промежутки остаются при выравнивании по началу строки Явные настройки интервалов и сохраняемые пробелы Исправить соответствующее объявление или нежелательное форматирование текста
Растягиваются только завершающие строки Выравнивание последней строки и принудительные разрывы Выравнивать эти строки по началу; проверить разрывы, добавленные только для оформления
Промежутки смещаются при переносе слов Ширина колонки и доступные варианты переноса Изменить ширину, проверить автоматический перенос слов или выравнивать по началу строки
Макет меняется во время загрузки Загрузка шрифтов и примененный шрифт Сравнить после стабилизации шрифтов и устранить различия, связанные со шрифтом
Изменение метода выравнивания не влияет на результат Поддержка браузером и примененное объявление Использовать поддерживаемые настройки выравнивания и макета

Не полагайтесь на text-justify: inter-word как на универсальное исправление. Сейчас MDN отмечает, что text-justify имеет ограниченную поддержку. В поддерживаемых браузерах inter-word задает растяжение на границах слов, а auto позволяет браузеру выбирать метод. Выбор границ слов не гарантирует небольших промежутков в разреженной строке. Свойство CSS text-justify

Если это свойство не поддерживается, используйте подтвержденный сравнением способ: измените выравнивание, увеличьте доступную ширину строки, исправьте нежелательные пробелы или проверьте автоматический перенос с учетом языка. Проверьте окончательный вариант во всех целевых браузерах при сопоставимой ширине содержимого. Различия между браузерами сами по себе не доказывают наличие дефекта, поскольку CSS не задает единый полный алгоритм выравнивания. Модуль CSS Text Level 3

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

Источники