Melhorar o layout e a legibilidade do texto

O layout do texto, principalmente no final de linhas e parágrafos, pode afetar a legibilidade e o apelo estético de uma página. O CSS oferece várias opções de ajuste de texto que podem melhorar casos de uso específicos.

Para blocos de texto curtos, como títulos, use text-wrap: balance. Essa propriedade instrui o navegador a distribuir o texto da forma mais uniforme possível entre as linhas, criando uma aparência mais simétrica.

A propriedade CSS text-wrap: pretty permite melhorar a qualidade tipográfica do texto do corpo, ativando um algoritmo de quebra de linha mais sofisticado. Ele foi projetado especificamente para evitar "órfãos" (palavras únicas na última linha de um parágrafo) e criar uma "irregularidade" visual mais agradável para blocos de texto longos.

Implementação

1. Identificar elementos de texto:

Para text-wrap: balance, selecione blocos de texto curtos, como títulos e cabeçalhos de tabela. Evite elementos que tenham caixas visíveis, como bordas ou planos de fundo, porque isso pode criar áreas visualmente vazias inesperadas no layout.

Para text-wrap: pretty, selecione elementos que possam conter longos trechos de texto em que palavras órfãs (runts) ou quebras de linha ruins sejam mais perceptíveis. Isso inclui os seguintes elementos:

• <p>
• <blockquote>
• <li>
• Qualquer outro elemento que possa conter longos trechos de texto.

Como escolher o método de encapsulamento certo

2. Aplique o wrapper escolhido:

Aplique text-wrap: balance especificamente a elementos curtos de várias linhas, como títulos (h1-h6), subtítulos ou citações.

/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
  /* Enables balanced line-breaking logic */
  text-wrap: balance;
}

Use text-wrap: pretty para ativar um algoritmo otimizado que avalia as últimas linhas de um parágrafo para encontrar os melhores pontos de quebra.

/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
  /* Enables pretty line-breaking logic for body copy */
  text-wrap: pretty;
}

Restrições críticas e desempenho

text-wrap: balance

• Limite de linhas: os navegadores impõem um limite ao número de linhas que tentam equilibrar para manter o desempenho (normalmente 6 linhas no Chromium e 10 linhas no Firefox). Se o texto exceder esse limite, o navegador vai reverter para o comportamento padrão de wrap. Evite usar text-wrap: balance em blocos de texto que possam exceder esses limites.
• Aplicação direcionada: NÃO aplique text-wrap: balance globalmente (por exemplo, * { text-wrap: balance; }). O algoritmo iterativo de "pesquisa binária" usado pelos navegadores é computacionalmente caro. Limite o uso a elementos do texto específicos e curtos.
• Interação com a largura: text-wrap: balance não muda a largura do contêiner (inline-size). Ele afeta apenas como o texto é ajustado dentro dessa largura. Isso pode deixar um espaço vazio no final do contêiner, o que pode afetar layouts que dependem de blocos de texto de largura total.

text-wrap: pretty

• Desempenho x qualidade: OBRIGATÓRIO: o text-wrap: pretty é mais caro em termos computacionais do que o algoritmo padrão wrap (greedy) porque avalia várias linhas (normalmente as últimas quatro) para otimizar os pontos de quebra. Evite aplicar globalmente a todos os elementos se a página tiver uma quantidade extrema de conteúdo de texto.
• Ideal para textos com várias linhas: os benefícios do pretty são mais evidentes em parágrafos de três ou mais linhas. Ela tem pouco ou nenhum efeito em textos curtos de uma única linha.
• Comportamento específico do navegador: os detalhes de implementação variam. Os navegadores baseados no Chromium geralmente se concentram nas últimas quatro linhas, enquanto outros mecanismos podem avaliar o parágrafo inteiro.

Estratégias de fallback

Em navegadores que não são compatíveis com text-wrap: balance ou text-wrap: pretty, a propriedade é ignorada, e o texto é ajustado usando o comportamento padrão de wrap. Esse é um aprimoramento progressivo que se degrada de forma suave para a tipografia padrão. Isso garante que seu conteúdo permaneça perfeitamente legível em todos os navegadores, além de oferecer uma experiência superior para aqueles que oferecem suporte a ele.

Para layouts críticos em que um layout de texto refinado é um requisito, use uma biblioteca JavaScript, mas saiba que isso pode ser lento e causar problemas de desempenho.