O CSS é uma técnica de tipografia clássica que usa a criação manual de quebras de linha para blocos de texto equilibrados.
O valor de balance para text-wrap faz parte do CSS Text Level 4. Confira os exemplos nesta postagem para saber como
essa linha de CSS pode melhorar significativamente os layouts de texto.
Sem o text-wrap: balance, designers, editores de conteúdo e editores têm
algumas ferramentas
para mudar a maneira como as linhas são equilibradas. As melhores opções disponíveis são usar
<wbr> ou
­ para ajudar
a orientar 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 de ajuste de texto estão no navegador. É por isso que vemos o ajuste de títulos como na imagem abaixo:
.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 ajuste de linhas para o texto. O navegador
conhece todos os fatores, como tamanho da fonte, idioma e área alocada.
Os resultados do ajuste de texto balanceado pelo navegador estão assim hoje:
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
É útil vê-los lado a lado, imóveis e sem informações de depuração sobrepostas.
Seus olhos ficarão muito mais satisfeitos com o bloco de texto equilibrado. Ele chama mais atenção e é mais fácil de ler no geral.
Como 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 à mão ou opticamente, já que o designer que equilibra o texto quer agradar o olhar, não a matemática. Esse tópico é muitas vezes conhecido como métrica versus alinhamento óptico. Para grandes publicações, como o New York Times, o balanceamento de título é um detalhe muito importante da experiência do usuário.
O balanceamento de texto na tipografia remonta aos primeiros dias da impressão, quando as impressoras colociam letras à mão. Conforme as ferramentas e técnicas evoluíram, os resultados também cresceram. Atualmente, os designers têm cores, 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 tamanhos e cores com base nos usuários. O text-wrap: balance traz a arte de
equilíbrio de texto para a Web de maneira automatizada, com base no trabalho e
nas tradições de designers do setor impresso.
Equilibrar títulos
Esse vai e vai ser o caso de uso principal do text-wrap: balance. Desenhe
o olho com tamanho e faça com que ele seja simétrico e legível para o olho ler. Defina
todos os títulos como ajuste de texto equilibrado com o seguinte CSS:
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
}
A simples aplicação desse estilo pode não fornecer os resultados esperados, já que o
texto precisa ser unido e, portanto, um comprimento de linha máximo aplicado de
algum lugar. Você verá um conjunto de
max-inline-size
nos exemplos desta postagem. Esse estilo é semelhante a max-width, mas pode ser definido
uma vez para qualquer idioma.
Limitações
A tarefa de equilibrar o texto não é livre. O navegador precisa repetir as iterações para descobrir a melhor solução de encapsulamento equilibrado. Esse custo de desempenho é atenuado por uma regra. Só funciona para seis linhas unidas ou menos.
Considerações sobre performance
Não é uma boa ideia aplicar 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 você não precisa esperar e cronometrar o balanceamento de ajuste de texto com o carregamento de fonte, como já acontece com o JavaScript. O navegador cuida disso!
Interações com a propriedade white-space
O balanceamento de texto compete com a propriedade
white-space
porque um deles está solicitando o não ajuste e o outro está solicitando
um ajuste equilibrado. Para resolver isso, remova a propriedade do espaço em branco e, em seguida,
o ajuste equilibrado pode ser aplicado novamente.
.balanced {
white-space: unset;
text-wrap: balance;
}
O balanceamento não muda o tamanho inline do elemento.
Há uma vantagem em algumas das soluções JavaScript para ajuste de texto
equilibrado, porque elas mudam o max-width do próprio elemento. Isso
tem um bônus extra de ser "encolhido" ao bloco equilibrado. text-wrap:
balance não tem esse efeito e pode ser visto neste exemplo:
Viu como a largura mostrada no DevTools tem muito espaço extra no final?
Isso ocorre porque é apenas um estilo de ajuste, não um estilo que muda de tamanho. Por isso, há alguns cenários em que text-wrap: balance não é tão bom, pelo
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 executa uma pesquisa binária pela menor largura que não gera linhas adicionais, parando em um pixel CSS (não o 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.