text-box-trim: controle do espaço acima e abaixo do texto

Todo bloco de texto na web carrega um espaço invisível acima e abaixo das letras, que muda de tamanho conforme a fonte e nunca foi possível controlar. Com text-box-trim dá para aparar esse espaço e finalmente usar padding: 10px num botão sabendo que os quatro lados vão parecer iguais.

A partir do Chrome 133, text-box permite a desenvolvedores e designers ajustar o espaço acima e abaixo do texto. A propriedade já está disponível também no Edge 133, no Safari 18.2 e no Firefox 154.

Forma estendida:

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

Forma abreviada:

text-box: trim-both cap alphabetic;

A propriedade permite controlar o espaço acima e abaixo do texto em elementos como <h1>, <button> e <p>. Cada fonte produz uma quantidade diferente desse espaço no eixo de bloco, e ele entra no tamanho final do elemento. Essa contribuição caótica não é fácil de medir e, até agora, era impossível de controlar.

A fonte sempre soube dessa medida. Agora o CSS também sabe.

Veja no CodePen.

Por que esse espaço existe

O espaço acima e abaixo de uma fonte existe por causa da forma como a web diagrama texto, chamada de meia-entrelinha (half-leading). O assunto está muito bem explicado no texto The Thing With Leading In CSS, de Matthias Ott.

Na composição manual, pedaços de chumbo separavam as linhas de texto. A web se inspirou nisso, mas divide o chumbo em duas partes e distribui uma acima e outra abaixo do conteúdo.

Um título com uma barra rosa acima e outra abaixo do texto, demonstrando a meia-entrelinha — Fonte: The Thing With Leading In CSS.

Essa história importa porque text-box dá nome a cada uma das metades: over e under. E, além do nome, a capacidade de removê-las.

Também existe trabalho anterior sobre o tema. O artigo Leading-Trim: The Future Of Digital Typesetting, de Ethan Wang, foi onde leading-trim (o nome que text-box tinha antes) apareceu pela primeira vez.

Um título com espaço sobrando acima e abaixo aparenta ser cortado com uma tesoura.

Para muitos designers, a porta de entrada no assunto foi o controle de “vertical trim” do Figma. Este post no X mostra onde a opção fica e como ela ajuda em botões.

Fonte: Figma no X.

Não importa por qual caminho se chegou até aqui: esse controle tipográfico de nome modesto faz uma diferença grande.

Sintaxe

Estas são as duas declarações de uma linha mais comuns no trabalho com text-box:

h1 {
  /* apara os dois lados até as letras maiúsculas */
  text-box: trim-both cap alphabetic;

  /* apara os dois lados até a altura do "x" minúsculo */
  text-box: trim-both ex alphabetic;
}

Aparar os dois lados com cap alphabetic vai ser o uso mais frequente do recurso, e é o que aparece na maioria das demonstrações a seguir. O exemplo também mostra ex alphabetic, útil para equilíbrio óptico em situações específicas.

Playground de sintaxe

Dá para explorar a sintaxe neste playground e ver o resultado por meio de menus suspensos. É possível trocar a fonte, mudar os valores de aparo de cima e de baixo, e acompanhar tudo com rótulos e cores.

Prévia da sintaxe com text-box: trim-both cap alphabetic destacada, ao lado de três menus suspensos para escolher os valores de aparo

Coisas para testar:

Inspecionar visualmente como text-box-trim se comporta em texto de uma linha e de várias linhas.
Passar o mouse sobre uma variação para ver quais valores de aparo produzem aquele efeito.
Trocar a fonte.
Aparar apenas um dos lados da caixa de texto.
Revisar a sintaxe enquanto brinca com os controles.

Veja no CodePen.

O que dá para construir e quais problemas isso resolve

Da capacidade de aparar surgem soluções bem mais simples de centralização e alinhamento. Também é possível chegar mais perto de uma entrelinha de verdade, em que algo como gap passa a ser suficiente para separar os conteúdos.

Comparação entre dois grupos de conteúdo: o primeiro com meia-entrelinha, o segundo com a entrelinha aparada — O segundo grupo fica mais compacto. Veja no CodePen.

Centralização mais fácil

Em componentes menores, mais inline e dimensionados pelo próprio conteúdo, padding: 10px é um estilo razoável para dar espaçamento igual em todos os lados. Só que o resultado costuma confundir, porque quase sempre sobra espaço em cima e embaixo.

Para contornar isso, é comum declarar explicitamente menos padding no eixo de bloco, compensando o efeito da meia-entrelinha.

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

Nesse ponto, resta testar combinações de valores até as coisas ficarem opticamente centralizadas. O que pode parecer bom em uma tela e um sistema operacional, e ruim em outros.

Com text-box, o espaço de meia-entrelinha é aparado do texto, e valores iguais de padding como 10px voltam a ser úteis:

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

Dois exemplos: o primeiro com padding de 10px e meia-entrelinha, o segundo com text-box: trim-both cap alphabetic aplicado — O segundo botão fica opticamente centralizado. Veja no CodePen.

Os exemplos a seguir usam uma fonte sans serif comum e uma fonte alternativa mais decorativa. Mostrar fontes diferentes ajuda a ilustrar o comportamento dinâmico de text-box entre famílias tipográficas.

Nestes elementos <button>, aparar o espaço faz padding: 10px parecer igual nos quatro lados de um elemento interativo real. A fonte alternativa, por sua vez, produz uma meia-entrelinha bem diferente.

Três grupos de botões: o primeiro com fonte sans serif comum, o segundo com uma fonte decorativa e o terceiro com uma fonte manuscrita — Cada fonte tem uma meia-entrelinha diferente, mas os valores de aparo são os mesmos e normalizam o espaço. Veja no CodePen.

Aqui estão elementos <span>, usados com frequência para exibir categorias ou badges. Outro caso em que padding igual deveria ser a melhor solução, mas que antes de text-box exigia contorno.

Tags comparadas lado a lado: o primeiro grupo com meia-entrelinha, o segundo com a entrelinha aparada — O segundo grupo fica mais compacto e opticamente centralizado.

Alinhamento mais fácil

O espaço extra e incontrolável da meia-entrelinha acima (over) e abaixo (under) de uma caixa de texto também dificulta o alinhamento. Os exemplos a seguir mostram quando isso acontece e como aparar os lados de bloco produz alinhamentos melhores.

Neste caso, uma imagem é posicionada ao lado do texto e cresce até a altura que o texto exige. Sem text-box, a imagem sempre fica um pouco mais alta. Com text-box, ela alinha perfeitamente com o conteúdo de texto.

Imagem ao lado de um bloco de texto, com e sem aparo da meia-entrelinha, mostrando o alinhamento das duas alturas — Veja no CodePen.

Em cenários com quebra de linha, o espaço em branco fica acima da primeira linha formatada e abaixo da última.

No exemplo seguinte, o recurso se adapta logicamente a uma mudança de writing-mode. Ao trocar o texto, o layout continua alinhado.

Layout com writing-mode vertical mantendo o alinhamento do texto aparado — Veja no CodePen.

Para continuar estudando

A lista abaixo reúne informações adicionais e mais casos de uso.

Coleção no CodePen com todas as demonstrações.
Pesquisa e demonstrações de Jan Nicklas.
Two CSS Properties for Trimming Text Box Whitespace, no CSS-Tricks.
CSS Inline Layout on text edges, na especificação.
Não confundir com size-adjust ou ascent-override.
CSS Baseline: The Good, The Bad And The Ugly.
Aplicado a vários elementos HTML: CodePen.
Post do Safari sobre o recurso.
Why I’m excited about text-box-trim as a designer.