CSS text-box-trim

Use o espaço acima e abaixo do conteúdo de texto para alcançar o equilíbrio óptico.

Adam Argyle

Publicado em 14 de janeiro de 2025

No Chrome 133, text-box permite que desenvolvedores e designers personalizem o espaço acima e abaixo do texto.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

Escrita à mão:

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

Sigla:

text-box: trim-both cap alphabetic;

Essa propriedade permite controlar o espaço acima e abaixo do texto, por exemplo, <h1>, <button> e <p>. Cada fonte produz uma quantidade diferente desse espaço direcional de bloco, o que contribui para o tamanho do elemento. Essa contribuição caótica de espaço não é fácil de medir e era impossível de controlar até agora.

A fonte sabe, agora o CSS sabe!

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

O espaço acima e abaixo de uma fonte é devido à forma como a Web exibe o texto, chamado de "half-leading". Isso é abordado de forma especializada em uma postagem de Matthias Ott chamada The Thing With Leading In CSS. Basicamente, quando a composição era feita à mão, pedaços de chumbo eram usados para separar linhas de texto. A Web, inspirada pelo leading, divide esse espaço em duas partes e distribui uma parte acima e outra abaixo do conteúdo.

Uma manchete é mostrada com uma barra rosa-choque acima e abaixo do texto para mostrar o espaço entre letras reduzido pela metade.
Origem

Essa história é significativa porque text-box fornece nomes para cada metade: acima e abaixo. Além disso, a capacidade de cortar.

Há também arte anterior a text-box. Você pode se lembrar da postagem interessante de Ethan Wang chamada Leading-Trim: The Future Of Digital Typesetting, em que leading-trim (o nome text-box anterior) foi introduzido pela primeira vez.

Uma manchete é mostrada com espaço em excesso acima e abaixo, como se tivesse sido cortada com uma tesoura e removida.

Seu ponto de entrada no corte de texto pode ser o Figma e os controles de "corte vertical" para designers. Esta postagem do X mostra onde fica essa opção de corte vertical e como ela é útil para botões.

Origem

Independentemente de como você chegou aqui, esse pequeno controle de tipografia pode fazer uma grande diferença.

Visão geral do recurso e da sintaxe

Na minha opinião, estas são as duas linhas mais comuns que você vai precisar ao trabalhar com 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;
}

O uso mais comum desse recurso é cortar os dois para cap alphabetic. As demonstrações a seguir usam isso muitas vezes. No entanto, o exemplo anterior também mostra ex alphabetic porque é útil para o equilíbrio óptico de maneiras únicas.

Laboratório de testes do explorador

A demonstração a seguir permite explorar a sintaxe e conferir os resultados usando menus suspensos. Você pode mudar as fontes, os valores de corte e de corte superior e inferior e acompanhar os elementos visuais e rótulos codificados por cores.

Captura de tela da demonstração do Explorador de sintaxe. Mostra a fonte e um menu suspenso para escolher outra. Uma prévia de sintaxe com a sintaxe alfabética de texto-box: trim-both destacada e mostrada. Por fim, há mais três menus suspensos para escolher os valores de corte.

O que tentar:

  1. Inspeção visual de como text-box-trim funciona em variantes de texto de uma e várias linhas.
  2. Passar o cursor sobre uma variante e conferir os valores de corte usados para alcançar esse efeito.
  3. Mudar a fonte.
  4. Cortar apenas um lado de uma caixa de texto.
  5. Revise a sintaxe enquanto joga.
https://codepen.io/web-dot-dev/pen/RNbyooE

O que posso criar com ele ou quais problemas ele resolve?

Há algumas soluções de centralização e alinhamento muito mais simples que surgem com esse recurso de corte. Você pode até chegar mais perto do valor correto, em que algo como gap pode ser usado entre os conteúdos.

Uma comparação é mostrada entre dois grupos de conteúdo. O primeiro grupo tem metade dos caracteres iniciais, e o segundo tem os caracteres iniciais aparados. O resultado é que o segundo grupo está mais próximo.
https://codepen.io/web-dot-dev/pen/RNbyoKE

Centralização mais fácil

Para componentes menores, mais inline e intrínsecos ao conteúdo, padding: 10px é um estilo razoável para especificar um elemento com espaçamento igual em todos os lados. No entanto, o resultado pode confundir as pessoas, já que muitas vezes tem espaço extra na parte de cima e de baixo.

Para contornar esse problema, os desenvolvedores geralmente colocam explicitamente menos padding na parte de cima e de baixo (bloco) para compensar os efeitos da metade do leading.

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

Nesse ponto, precisamos tentar combinações de valores até que as coisas fiquem centralizados. Isso pode ficar bom em uma tela e sistema operacional, mas não em outro.

text-box permite que você corte a metade do espaço inicial do texto, tornando úteis valores de preenchimento iguais, como 10px:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
Dois exemplos são mostrados. A primeira mostra um elemento com padding: 10 px e half-leading. A segunda mostra o mesmo elemento com text-box: trim-both cap alphabetic. O resultado é que o segundo botão fica centralizado.
https://codepen.io/web-dot-dev/pen/NPKMbgq

Confira alguns elementos <button> que mostram como o corte do espaço com text-box faz com que o padding: 10px pareça igual em todos os lados em um elemento interativo prático. Observe como a fonte alternativa pode produzir um espaço de meia liderança muito diferente.

Três grupos de botões são mostrados. O primeiro grupo mostra uma fonte sem serifa regular. O segundo grupo mostra uma fonte extravagante ou divertida. O terceiro grupo mostra o mesmo efeito, mas com uma fonte de escrita à mão. O objetivo é mostrar que cada fonte tem um espaço de meia-letra diferente, mas os valores de corte são iguais e podem normalizar o espaço.
https://codepen.io/web-dot-dev/pen/mybLOMg

Estes são os elementos <span>, usados com frequência para mostrar categorias ou selos. Outro momento em que o padding de lados iguais deveria ser a melhor solução, mas até text-box, tivemos que trabalhar em torno disso.

As tags são mostradas lado a lado. O primeiro grupo tem metade dos caracteres iniciais, e o segundo tem os caracteres iniciais aparados. O resultado é que o segundo grupo fica mais próximo e centralizado.
https://codepen.io/web-dot-dev/pen/mybLOMg

Alinhamento mais fácil

O espaço extra e incontrolável da metade da linha acima (over) e abaixo (under) de uma caixa de texto também dificulta o alinhamento. Os exemplos a seguir mostram quando o alinhamento com metade do espaço em branco pode dificultar o alinhamento e como o corte dos lados do bloco de uma caixa de texto pode criar alinhamentos melhores.

Aqui, uma imagem é colocada ao lado do texto. A imagem vai crescer até a altura necessária para o texto, mas sem text-box, a imagem sempre será um pouco maior. Com text-box, a imagem pode ser alinhada perfeitamente ao conteúdo de texto.

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

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

No exemplo abaixo, observe como o recurso se adapta de forma lógica a uma mudança em writing-mode. Tente mudar o texto e observe como o layout continua alinhado.

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

Continuar estudo

Quer saber mais? A lista de links a seguir oferece várias informações e casos de uso.