Точное выравнивание текста

Функции для сайтов: text-box

Проблема

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

Распространенные проблемы:

  • Неправильное выравнивание значков. Текст расположен выше или ниже значка, даже если используется класс align-items: center.
  • Неточные поля. Кнопка с символом padding: 12px визуально кажется больше сверху или снизу из-за внутреннего интерлиньяжа шрифта.
  • Выравнивание по верхнему краю. Вы не можете выровнять верхний край заглавной буквы точно по верхнему краю контейнера или соседнего изображения, не используя отрицательные поля с "магическими числами".

Решение

Свойства text-box-trim и text-box-edge (сокращенно text-box) позволяют обрезать этот внутренний интерлиньяж на основе определенных метрик шрифта. Если обрезать текстовое поле по высоте прописных букв (верхний край заглавных букв) и базовой линии (нижний край большинства букв), то граничная рамка элемента будет соответствовать его визуальному контенту.

Стратегия реализации

  1. ОБЯЗАТЕЛЬНО. Примените text-box-trim: trim-both (или сокращенный вариант text-box) к элементу, содержащему текст.
  2. ОБЯЗАТЕЛЬНО. Укажите, какие показатели использовать для обрезки с помощью text-box-edge. Для большинства элементов интерфейса используйте cap alphabetic.
  3. РЕКОМЕНДУЕТСЯ использовать это свойство для вертикального центрирования в контейнерах flex или grid.
  4. РЕКОМЕНДУЕТСЯ использовать это свойство, чтобы значения padding в CSS соответствовали визуальному расстоянию между текстом и краем контейнера.
  5. НЕ ИСПОЛЬЗУЙТЕ его в длинных текстах, где для удобства чтения необходим традиционный интервал. Он лучше всего подходит для заголовков, кнопок и меток интерфейса.

Руководство по внедрению

Пример 1. Обрезка внутренних отступов для значков

У разных шрифтов разные встроенные интервалы над и под текстом. Это может усложнить задачу по подгонке дизайна или визуальному центрированию текста в значке. Если вы хотите, чтобы отступы контейнера точно соответствовали тексту, используйте text-box: trim-both cap alphabetic. Это особенно полезно для плотных компонентов пользовательского интерфейса, таких как значки или теги. Это позволяет начать отступ прямо у края текста со всех сторон.

.badge {
  padding: 10px;
  background: hotpink;
  border-radius: 10px;
  /* 
    Trims the top to the cap-height and 
    the bottom to the alphabetic baseline.
  */
  text-box: trim-both cap alphabetic;
}

Пример 2. Текст по центру со значками

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

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
/* 
  text-box does NOT inherit, and must be applied directly to the text element.
*/
.button-text{
  /* 
    The flex container now centers against the 
    visible letters, not the invisible font box.
  */
  text-box: trim-both cap alphabetic;
}

Пример 3. Выравнивание текста по верхнему краю

Чтобы выровнять заголовок по верхнему краю соседнего изображения или декоративного элемента, используйте trim-start cap alphabetic. Даже если вы не планируете обрезать конец видео, его все равно нужно указать.

.hero {
  display: flex;
  align-items: flex-start;
}

h1 {
  /* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
  text-box: trim-start cap alphabetic;
}

Рекомендации

  • РЕКОМЕНДУЕТСЯ использовать сокращение text-box: text-box: <trim-direction> <edges>.
  • ВСЕГДА указывайте обе границы, даже если обрезается только одна (за исключением случаев, когда используется граница text по умолчанию).
  • РЕКОМЕНДУЕТСЯ использовать вместе с line-height, чтобы контролировать интервалы. Обрезка удаляет интерлиньяж перед первой и последней строкой текста, но line-height по-прежнему влияет на расстояние между строками в многострочном тексте.
  • НЕ применяйте ко всем элементам. Используйте его только в тех случаях, когда требуется точное выравнивание.

Резервные стратегии

text-box – это прогрессивное улучшение. В браузерах, которые не поддерживают это свойство, текст будет отображаться с интерлиньяжем по умолчанию. Макет будет работать, но менее точно. Специальный резервный код не требуется, поскольку устаревшие браузеры просто игнорируют эти свойства.

О чем ещё нужно помнить

  1. Метрики шрифтов. У разных шрифтов разные внутренние метрики. cap alphabetic – надежное значение по умолчанию, но для некоторых шрифтов или вариантов использования может потребоваться ex (высота строчных букв) для лучшего выравнивания строчных букв.
  2. Многострочный текст. Обрезка применяется к первой и последней строке блока. Внутренние линии не затрагиваются.