CSS text-box-trim

Adam Argyle

Publicado em: 14 de janeiro de 2025

A partir do Chrome 133, o 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.

Source

Manuscrito:

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

Shorthand:

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 não é fácil de medir e era impossível de controlar até agora.

A fonte sabe, e agora o CSS também.

Teste no CodePen

O espaço acima e abaixo de uma fonte existe devido à forma como a Web organiza o texto, chamada de "meia entrelinha". Isso é abordado de forma especializada em uma postagem de Matthias Ott chamada The Thing With Leading In CSS (em inglês). Essencialmente, quando a composição tipográfica era feita à mão, pedaços de chumbo metálico eram usados para separar as linhas de texto. A Web, inspirada na liderança, divide o lead em duas partes e distribui uma parte acima e outra abaixo do conteúdo.

Um título é mostrado com uma barra rosa-choque acima e abaixo do texto para demonstrar o meio-entrelinhamento. Fonte

Esse histórico é significativo porque text-box nos dá nomes para cada metade: acima e abaixo. Além disso, é possível cortar o excesso.

Há um artigo anterior sobre text-box. Talvez você se lembre da postagem interessante de Ethan Wang chamada Leading-Trim: The Future Of Digital Typesetting, em que leading-trim (o nome que text-box tinha antes) foi apresentado pela primeira vez.

Um título com espaço em excesso acima e abaixo parece ter sido cortado com uma tesoura e removido.

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

Fonte

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

Recurso e sintaxe

Na minha opinião, estas são as duas frases 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;
}

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

Playground do Explorer

Confira a sintaxe no nosso playground e veja os resultados usando menus suspensos. Você pode mudar as fontes, os valores de corte acima e abaixo, além de acompanhar os recursos visuais e rótulos codificados por cores.

A prévia da sintaxe com caixa de texto: trim-both cap alphabetic syntax destacada e mostrada. Há mais três menus suspensos para escolher valores de corte.

O que testar:

  1. Inspecionar visualmente como o text-box-trim funciona em variantes de texto de uma e várias linhas.
  2. Passar o cursor sobre uma variante e ver 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.
Teste no CodePen

O que posso criar e quais problemas ele resolve?

Há algumas soluções de centralização e alinhamento muito mais simples que surgem dessa capacidade de corte. Você pode até se aproximar do espaçamento entrelinhas adequado, em que algo como gap pode ser usado entre os conteúdos.

Uma comparação entre dois grupos de conteúdo.
O primeiro grupo tem entrelinhamento parcial, e o segundo tem entrelinhamento cortado. O resultado é que o segundo grupo fica mais unido. Teste no CodePen

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 geralmente tem espaço extra na parte de cima e de baixo.

Para contornar isso, os desenvolvedores geralmente colocam menos padding na parte de cima e de baixo (bloco) para compensar os efeitos do meio entrelinhamento.

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

Neste ponto, precisamos testar combinações de valores até que as coisas estejam opticamente centralizadas. Isso pode ficar bom em uma tela e sistema operacional, mas não em outro.

text-box permite remover o espaço de entrelinhamento pela metade do texto, tornando valores de padding iguais, como 10px, úteis:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
Dois exemplos são mostrados.
O primeiro mostra um elemento com padding: 10px e meio entrelinhamento. O segundo mostra o mesmo elemento com text-box: trim-both cap alphabetic. O resultado é que o segundo botão fica centralizado opticamente. Teste no CodePen

Confira alguns elementos <button> que mostram como o corte do espaço com text-box faz com que 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 entrelinhamento diferente.

Três grupos de botões. A primeira usa uma fonte sem serifa comum, a segunda usa uma fonte sofisticada ou divertida, e a terceira usa o mesmo efeito com uma fonte de escrita à mão.
Cada fonte tem um espaço de entrelinhamento diferente, mas os valores de corte são os mesmos e podem normalizar o espaço. Teste no CodePen

Estes são elementos <span>, geralmente usados para mostrar categorias ou selos. Outro momento em que o padding de lados iguais seria a melhor solução, mas até text-box tivemos que contornar isso.

As tags são mostradas em uma comparação lado a lado. O primeiro grupo tem entrelinhamento parcial, e o segundo tem entrelinhamento cortado.
O segundo grupo de tags é mais compacto e centralizado opticamente, graças ao corte do espaço à esquerda.

Alinhamento mais fácil

O espaço extra, incontrolável, de meio entrelinhamento acima (over) e abaixo (under) de uma caixa de texto também dificulta o alinhamento. Os exemplos a seguir mostram quando o espaçamento entre linhas pela metade pode dificultar o alinhamento e como cortar as laterais de um bloco de texto pode criar alinhamentos melhores.

Aqui, uma imagem é colocada ao lado do texto. A imagem aumenta até a altura necessária para o texto. Sem text-box, a imagem é sempre um pouco mais alta. Com o text-box, a imagem pode se alinhar perfeitamente ao conteúdo de texto.

Teste no CodePen

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

No exemplo a seguir, observe como o recurso se adapta logicamente a uma mudança em writing-mode. Tente mudar o texto e veja como o layout continua alinhado.

Teste no CodePen

Continuar estudando

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