Quebra de texto CSS: saldo

Uma técnica de tipografia clássica que envolve a criação manual de quebras de linha para blocos de texto equilibrados chega ao CSS.

Adam Argyle

O valor balance para text-wrap faz parte do texto CSS nível 4. Confira os exemplos nesta postagem para saber como essa linha de CSS pode melhorar consideravelmente seus layouts de texto.

Sem text-wrap: balance. Designers, editores de conteúdo e editores têm algumas ferramentas para mudar o equilíbrio das linhas. As melhores opções disponíveis são usar <wbr> ou ­ para ajudar os layouts de texto a tomar decisões mais inteligentes sobre onde quebrar linhas e palavras.

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

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

Com text-wrap: balance do CSS Text 4, é possível solicitar que o navegador descubra a melhor solução de quebra de linha equilibrada para o texto. O navegador sabe todos os fatores, como tamanho da fonte, idioma e área alocada. Atualmente, os resultados do ajuste de texto equilibrado do navegador têm a seguinte aparência:

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

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

Seu olho ficará muito mais satisfeito com o bloco de texto equilibrado. Ele chama mais atenção e, no geral, é 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 garantia. Uma boa tipografia dá confiança aos leitores, incentivando-os a continuar lendo.

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

O equilíbrio de textos na tipografia remonta aos primeiros dias da impressão, quando as impressoras distribuíam as letras à mão. À medida que as ferramentas e técnicas evoluíam, 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.

No entanto, na Web, há menos controle disponível, porque o documento muda de tamanho e cor de acordo com os usuários. O text-wrap: balance traz a arte de equilibrar o texto para a Web de maneira automatizada, com base no trabalho e nas tradições de designers do setor de impressão.

Equilibrar títulos

Esse vai ser e vai ser o caso de uso principal de text-wrap: balance. Chame o olhar de acordo com seu tamanho e faça com que ele seja simétrico e legível para o olho. Configure todos os títulos com o 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 ajustado 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 linguagem.

Limitações

A tarefa de equilibrar o texto não é sem custo financeiro. O navegador precisa repetir as iterações para descobrir a melhor solução de encapsulamento equilibrado. Esse custo de desempenho é atenuado por uma regra, ele só funciona para seis linhas unidas ou menos.

Considerações sobre performance

Não é uma boa ideia aplicar o balanceamento de ajuste de texto em 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;
}

Uma grande vantagem desse recurso é que não é preciso esperar e tempo para equilibrar o ajuste de texto com o carregamento de fontes, como você pode ter feito atualmente com o JavaScript. O navegador faz isso.

Interações com a propriedade white-space

O balanceamento de texto concorre com a propriedade white-space porque uma delas não exige quebras de linha e a outra está pedindo um quebra de linha equilibrado. Para superar isso, desmarque a propriedade do espaço em branco, e o ajuste equilibrado poderá ser aplicado novamente.

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

O balanceamento não vai alterar o tamanho in-line do elemento

Algumas das soluções JavaScript têm uma vantagem em relação ao equilíbrio entre o ajuste de texto, já que elas mudam o max-width do próprio elemento contêiner. Isso tem a vantagem de ser "encolhido" para o bloco equilibrado. text-wrap: balance não tem esse efeito e pode ser visto neste exemplo:

Notou como a largura mostrada no DevTools tem um monte de espaço extra no final? Isso porque é apenas um estilo de união, 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).

Ironicamente, o ajuste de texto equilibrado cria um desequilíbrio no elemento contido.

Uma breve explicação da técnica usada pelo navegador

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