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

Adam Argyle

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

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

От руки:

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

Сокращенная стенография:

text-box: trim-both cap alphabetic;

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

Теперь об этом знает шрифт, и CSS тоже.

Пространство над и под шрифтом существует из-за особенностей компоновки текста в интернете, называемой «полуинтервалом». Это подробно описано в статье Маттиаса Отта под названием «Что такое интервал в CSS» . По сути, когда набор текста производился вручную, для разделения строк использовались кусочки свинца. В интернете, вдохновлённом интервалом, он разделяется на две части и распределяется одна часть над, а другая — под содержимым.

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

Существуют и более ранние разработки, чем text-box возможно, вы помните интересную статью Итана Вана под названием «Лидеры обрезки: будущее цифровой верстки» , где впервые был представлен leading-trim (ранее известный как text-box ).

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

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

Особенности и синтаксис

На мой взгляд, вот два наиболее распространенных однострочных кода, которые вам понадобятся при работе с 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 поскольку он полезен для оптической балансировки по-своему.

игровая площадка исследователя

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

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

1. Визуальная проверка работы функции text-box-trim для однострочных и многострочных вариантов текста.
2. При наведении курсора на вариант отображаются значения параметров обрезки, использованные для достижения этого эффекта.
3. Изменение шрифта.
4. Обрезка только одной стороны текстового поля.
5. В процессе игры периодически проверяйте синтаксис.

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

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

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

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

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

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

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

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

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}

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

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

Более простая настройка

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

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

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

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

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

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

• Коллекция всех демонстрационных примеров на Codepen .
• Прекрасные исследования и демонстрации Яна Никласа.
• Два свойства CSS для удаления пробелов в текстовом поле (из статьи на CSS Tricks).
• CSS Встроенная разметка по краям текста .
• Не путать с size-adjust или ascent-override
• Базовые принципы CSS: хорошее, плохое и ужасное .
• Применяется ко многим HTML-элементам: CodePen .
• Запись в блоге Safari .
• Почему меня, как дизайнера, так привлекает text-box-trim .