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.
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:
![O título está destacado com DevTools, ocupando toda a largura do espaço inline e tem duas palavras pendentes na segunda linha.](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-fe0c4a80e307b.png?authuser=6&hl=pt)
.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:
![O título é destacado como o DevTools anterior, desta vez não ocupa toda a largura. Começou uma nova linha antes do final e, assim, é um bloco de texto equilibrado.](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-0861292a42f0d.png?authuser=6&hl=pt)
.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.