CSS text-wrap: balance

Uma técnica clássica de tipografia de quebra de linha manual para blocos de texto equilibrados chega ao CSS.

Adam Argyle

O valor balance para text-wrap faz parte do CSS Text Level 4. Confira os exemplos desta postagem para saber como essa linha de CSS pode melhorar muito os layouts de texto.

Sem text-wrap: balance, designers, editores de conteúdo e publishers têm poucas ferramentas para mudar a forma como as linhas são equilibradas. As melhores opções disponíveis são usar <wbr> ou ­ para orientar os layouts de texto em decisões mais inteligentes sobre onde quebrar linhas e palavras.

Como desenvolvedor, você não sabe o tamanho final, o tamanho da fonte ou até mesmo o idioma de um título ou parágrafo. Todas as variáveis necessárias para um tratamento eficaz e estético do ajuste de texto estão no navegador. É por isso que vemos a quebra de título como na imagem a seguir:

.unbalanced {
  max-inline-size: 50ch;
}

Com text-wrap: balance do CSS Text 4, você pode solicitar que o navegador descubra a melhor solução de quebra de linha equilibrada para o texto. O navegador conhece todos os fatores, como tamanho da fonte, idioma e área alocada. Os resultados do ajuste de texto equilibrado do navegador são assim hoje:

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

É útil vê-los lado a lado, ainda e sem informações de depuração sobrepostas.

Seus olhos vão gostar muito mais do bloco de texto equilibrado. Ele chama mais atenção e é mais fácil de ler.

Encontrar o equilíbrio

Os títulos são a primeira coisa que os leitores veem. Eles precisam ser visualmente atraentes e fáceis de ler. Isso chama a atenção do usuário e oferece uma sensação de qualidade e segurança. Uma boa tipografia dá confiança aos leitores, incentivando-os a continuar lendo.

Tradicionalmente, essa tarefa era feita manualmente ou opticamente, já que o designer que equilibra o texto quer agradar aos olhos, não à matemática. Esse tópico é geralmente chamado de alinhamento métrico versus óptico. Para grandes publicações, como o New York Times, o equilíbrio do título é um detalhe muito importante da experiência do usuário.

O equilíbrio do texto na tipografia remonta aos primeiros dias da impressão, quando as impressoras colocavam letras à mão. À medida que as ferramentas e técnicas evoluíram, os resultados também evoluíram. Hoje em dia, os designers têm cor, peso, tamanho e muito mais para equilibrar o texto nos designs.

Na Web, no entanto, há menos controle disponível porque o documento muda de tamanho e cor com base nos usuários. text-wrap: balance traz a arte de equilibrar o texto para a Web de forma automatizada, com base no trabalho e nas tradições de designers da indústria gráfica.

Equilibrar títulos

Esse será, e deverá ser, o caso de uso principal de text-wrap: balance. Chame a atenção com o tamanho e deixe-o simétrico e legível para o olho ler. Defina todos os títulos para ajuste de texto equilibrado com o seguinte CSS:

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

Apenas aplicar esse estilo pode não fornecer os resultados esperados, já que o texto precisa ser quebrado e, portanto, ter um comprimento máximo de linha aplicado de algum lugar. Você verá um max-inline-size definido nos exemplos desta postagem. Esse estilo é como max-width, mas pode ser definido uma vez para qualquer idioma.

Limitações

A tarefa de equilibrar o texto não é sem custo financeiro. O navegador precisa fazer um loop nas iterações para descobrir a melhor solução de quebra equilibrada. Esse custo de desempenho é atenuado por uma regra, que funciona apenas para seis linhas quebradas e abaixo.

Considerações sobre desempenho

Não é uma boa ideia aplicar o equilíbrio de quebra de texto a todo o design. É uma solicitação desperdiçada, devido ao limite de seis linhas, e pode afetar a velocidade de renderização da página.

* {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

Um grande benefício desse recurso é que você não precisa esperar e cronometrar o equilíbrio da quebra de texto com o carregamento da fonte, como você pode estar fazendo com o JavaScript hoje. O navegador cuida disso.

Interações com a propriedade white-space

O equilíbrio do texto compete com a white-space propriedade porque uma pede que não haja quebra e a outra pede quebra equilibrada. Para resolver isso, desmarque a propriedade de espaço em branco. Assim, a quebra equilibrada poderá ser aplicada novamente.

.balanced {
  white-space: unset;
  text-wrap: balance;
}

O equilíbrio não muda o tamanho inline do elemento

Há uma vantagem em algumas das soluções JavaScript para quebra de texto equilibrada, já que elas mudam o max-width do próprio elemento contido. Isso tem um bônus adicional de ser "encolhido" para o bloco equilibrado. text-wrap: balance não tem esse efeito e pode ser visto neste exemplo:

Confira como a largura mostrada nas Ferramentas para desenvolvedores tem um espaço extra no final. Isso ocorre porque é um estilo de quebra, não um estilo de mudança de tamanho. Por isso, há alguns cenários em que text-wrap: balance não é tão bom, pelo menos na minha opinião. Por exemplo, títulos dentro de um card (ou qualquer contêiner com bordas ou sombras).

O ajuste de texto equilibrado cria ironicamente um desequilíbrio no elemento contido.

Uma breve explicação da técnica que o navegador está usando

O navegador realiza uma pesquisa binária pela menor largura que não causa linhas adicionais, parando em um pixel CSS (não pixel de exibição). Para minimizar ainda mais as etapas na pesquisa binária, o navegador começa com 80% da largura da linha média.