Alinhamento preciso do texto

O problema

Os navegadores adicionam automaticamente espaços em branco extras acima e abaixo dos caracteres de texto para acomodar a altura da linha e as métricas específicas da fonte, como ascendentes e descendentes. Esse "espaço fantasma" impossibilita o alinhamento vertical perfeito em pixels usando CSS padrão.

Exemplos de problemas comuns:

• Ícones desalinhados: o texto aparece visualmente mais baixo ou mais alto do que um ícone adjacente, mesmo ao usar align-items: center.
• Padding impreciso: um botão com padding: 12px parece ter mais espaço na parte de cima ou de baixo devido ao espaçamento interno da fonte.
• Alinhamento nivelado: não é possível alinhar o topo de uma letra maiúscula exatamente com o topo de um contêiner ou de uma imagem adjacente sem usar margens negativas de "número mágico".

A solução

As propriedades text-box-trim e text-box-edge (abreviação text-box) permitem cortar esse espaçamento interno com base em métricas de fonte específicas. Ao cortar a caixa de texto para a altura da letra maiúscula (parte de cima das letras maiúsculas) e a linha de base alfabética (parte de baixo da maioria das letras), você garante que a caixa delimitadora do elemento corresponda ao conteúdo visual.

Estratégia de implementação

1. OBRIGATÓRIO: aplique text-box-trim: trim-both (ou a abreviação text-box) ao elemento que contém o texto.
2. OBRIGATÓRIO: especifique quais métricas usar para o corte com text-box-edge. Para a maioria dos alinhamentos de interface, use cap alphabetic.
3. USE para centralizar verticalmente os elementos visuais em contêineres flex ou de grade.
4. USE para garantir que os valores de padding do CSS correspondam ao espaço visual entre o texto e a borda do contêiner.
5. NÃO use em textos longos em que o espaçamento tradicional entre linhas é necessário para facilitar a leitura. É mais adequado para títulos, botões e rótulos de interface.

Guia de implementação

Caso de uso 1: cortar o espaçamento interno para selos

Fontes diferentes têm quantidades diferentes de espaçamento integrado acima e abaixo do texto. Isso pode dificultar a correspondência de um design ou a centralização visual do texto em um selo. Quando quiser que o padding de um contêiner se ajuste exatamente ao texto, use text-box: trim-both cap alphabetic. Isso é especialmente útil para componentes de interface densos, como selos ou tags. Isso permite que o padding comece exatamente na borda do texto em todos os lados.

.badge {
  padding: 10px;
  background: hotpink;
  border-radius: 10px;
  /* 
    Trims the top to the cap-height and 
    the bottom to the alphabetic baseline.
  */
  text-box: trim-both cap alphabetic;
}

Caso de uso 2: centralizar texto com ícones

Ao usar o Flexbox para alinhar texto e ícones, o "espaço fantasma" geralmente faz com que o texto pareça um pouco descentralizado. Ao cortar a caixa, o mecanismo de layout usa a altura real da letra visível para o alinhamento.

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
/* 
  text-box does NOT inherit, and must be applied directly to the text element.
*/
.button-text{
  /* 
    The flex container now centers against the 
    visible letters, not the invisible font box.
  */
  text-box: trim-both cap alphabetic;
}

Caso de uso 3: alinhar o texto com as bordas superiores

Para alinhar um título perfeitamente com a parte de cima de uma imagem ou elemento decorativo adjacente, use trim-start cap alphabetic. Mesmo que o final não seja cortado, a borda final precisa ser definida.

.hero {
  display: flex;
  align-items: flex-start;
}

h1 {
  /* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
  text-box: trim-start cap alphabetic;
}

Práticas recomendadas

• USE a abreviação text-box para ser mais conciso: text-box: <trim-direction> <edges>.
• SEMPRE especifique as duas bordas, mesmo que apenas uma esteja sendo cortada (a menos que use a borda padrão text).
• FAÇA a combinação com line-height para um espaçamento controlado. A remoção remove o espaçamento antes da primeira e da última linha de texto, mas line-height ainda afeta a distância entre as linhas em textos com várias linhas.
• NÃO aplique a todos os elementos. Use-o apenas quando o alinhamento de precisão for um requisito.

Estratégias de fallback

text-box é um aprimoramento progressivo. Em navegadores que não oferecem suporte, o texto será renderizado com o espaçamento padrão. O layout ainda vai funcionar, mas com um pouco menos de precisão. Não é necessário um código substituto especial, já que as propriedades são ignoradas com segurança por navegadores mais antigos.

Outras considerações

1. Métricas de fonte: fontes diferentes têm métricas internas diferentes. cap alphabetic é um padrão confiável, mas algumas fontes ou casos de uso podem exigir ex (altura x) para um melhor alinhamento de letras minúsculas.
2. Texto de várias linhas: o corte é aplicado à primeira e à última linha do bloco. As linhas internas não são afetadas.