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

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

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

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

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 .
• Почему я, как дизайнер, в восторге от функции текстового поля .