CSS-обрезка текстового поля

Освободите пространство сверху и снизу вашего текстового контента; достичь оптического баланса.

Адам Аргайл

Опубликовано: 14 января 2025 г.

Начиная с Chrome 133, text-box позволяет разработчикам и дизайнерам настраивать пространство над и под текстом.

Browser Support

  • Хром: 133.
  • Край: 133.
  • Firefox: не поддерживается.
  • Сафари: 18.2.

От руки:

text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading;
line-fit-edge: alphabetic | text;

Сокращение:

text-box: trim-both cap alphabetic;

Это свойство позволяет вам управлять пространством над и под текстом, например <h1> , <button> и <p> . Каждый шрифт создает различное количество направленного пространства этого блока, что влияет на размер элемента. Этот хаотичный вклад пространства нелегко измерить, и до сих пор его невозможно контролировать.

Шрифт знает, теперь знает и CSS!

https://codepen.io/web-dot-dev/pen/xbKjRxL

Пространство над и под шрифтом обусловлено тем, как текст располагается в Интернете, и называется «полуинтерлиньяж». Об этом мастерски рассказывает Маттиас Отт в статье «The Thing With Leading In CSS» . По сути, когда набор текста выполнялся вручную, для разделения строк текста использовались кусочки металлического свинца. Сеть, вдохновленная лидированием, делит эту часть лида пополам и распределяет часть над контентом, а часть — под ним.

Заголовок отображается с ярко-розовой полосой над и под текстом для отображения полуинтерлиньяжа.
Источник

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

У text-box также есть предшествующий уровень техники, вы можете вспомнить захватывающий пост Итана Ванга под названием «Leading-Trim: The Future Of Digital Typesetting» , где впервые было представлено leading-trim (ранее называвшееся text-box ).

Заголовок показан с лишним пространством вверху и внизу, как будто обрезанный ножницами и удаленный.

Точкой входа в обрезку текста может быть Figma и ее элементы управления «вертикальной обрезкой» для дизайнеров. В этом посте X показано, где находится эта опция вертикальной обрезки и насколько она полезна для кнопок.

Источник

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

Обзор функций и синтаксиса

Вот, на мой взгляд, две наиболее распространенные однострочники, которые вам понадобятся при работе с text-box :

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

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

Детская площадка Исследователя

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

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

Что стоит попробовать:

  1. Визуальная проверка того, как работает text-box-trim в однострочных и многострочных текстовых вариантах.
  2. Наведя курсор на вариант, вы увидите значения обрезки, использованные для достижения этого эффекта.
  3. Изменение шрифта.
  4. Обрезка только одной стороны текстового поля.
  5. Просматривайте синтаксис во время игры.
https://codepen.io/web-dot-dev/pen/RNbyooE

Что я могу с его помощью построить или какие проблемы он решает?

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

Показано сравнение между двумя группами контента. Первая группа имеет полуведущее, вторая – урезанное ведущее. В результате вторая группа сплотилась еще сильнее.
https://codepen.io/web-dot-dev/pen/RNbyoKE

Более простое центрирование

Для меньших по размеру, более встроенных и содержательных внутренних компонентов padding: 10px является разумным стилем, который можно указать для элемента с одинаковым интервалом со всех сторон. Однако результат может сбить с толку людей, так как часто сверху и снизу имеется лишнее пространство.

Чтобы обойти эту проблему, разработчики часто явно уменьшают отступы сверху и снизу (блока), чтобы компенсировать эффект половины интерлиньяжа.

button {
  padding-block: 5px;
  padding-inline: 10px;
}

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

text-box позволяет нам обрезать половину начального пробела в тексте, делая полезными равные значения заполнения, например 10px :

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
Показаны два примера. Первый показывает элемент с отступом: 10 пикселей и половинным интерлиньяжем. Второй показывает тот же элемент с текстовым полем: обрезка обеих букв. В результате вторая кнопка оказывается оптически по центру.
https://codepen.io/web-dot-dev/pen/NPKMbgq

Вот несколько элементов <button> , которые показывают, как обрезка пространства с помощью text-box делает padding: 10px выглядят одинаковыми со всех сторон в практичном интерактивном элементе. Обратите внимание, как альтернативный шрифт может создавать совершенно разные половинные интервалы.

Показаны три группы кнопок. В первой группе показан обычный шрифт без засечек. Вторая группа показывает необычный или забавный шрифт. Третья группа показывает тот же эффект, но с рукописным шрифтом. Цель состоит в том, чтобы показать, что каждый шрифт имеет разное полуинтервал, но значения обрезки одинаковы и могут нормализовать пространство.
https://codepen.io/web-dot-dev/pen/mybLOMg

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

Теги отображаются рядом друг с другом в сравнении. Первая группа имеет полуведущее, вторая – урезанное ведущее. В результате вторая группа оказывается более плотной и оптически центрированной.
https://codepen.io/web-dot-dev/pen/mybLOMg

Более простое выравнивание

Дополнительное, неконтролируемое половинное пространство над ( over ) и снизу ( under ) текстового поля также затрудняет выравнивание. Следующие примеры показывают, когда половинный интерлиньяж может затруднить выравнивание и как обрезка сторон текстового поля может улучшить выравнивание.

Здесь изображение размещается рядом с текстом. Изображение вырастет до высоты, необходимой для текста, но без text-box изображение всегда будет немного выше. С помощью text-box изображение может идеально совпадать с текстовым содержимым.

https://codepen.io/web-dot-dev/pen/yyBjVpg

Обратите внимание, что в сценариях с переносом строк пробел находится над первой форматированной строкой текста и под последней форматированной строкой текста.

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

https://codepen.io/web-dot-dev/pen/dPbeOJQ

Продолжить обучение

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