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 massivamente seus layouts de texto.
Sem text-wrap: balance
; designers, editores de conteúdo e editores têm
poucas ferramentas
para alterar o equilíbrio das linhas... A melhor opção é usar
<wbr>
ou
­
para ajudar
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 mesmo o idioma de um título ou parágrafo. Todas as variáveis necessárias para um design eficaz e estético de ajuste de texto, são feitas no navegador. É por isso que vemos títulos que funciona 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=19&hl=pt-br)
.unbalanced {
max-inline-size: 50ch;
}
Com text-wrap: balance
do CSS Text 4, você pode solicitar que o navegador
descobrir 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=19&hl=pt-br)
.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 pega melhor a atenção e, no geral, são mais fáceis de ler.
Encontrar o equilíbrio
Títulos são a primeira coisa que os leitores veem; eles devem ser visualmente atraentes e fácil de ler. Isso chama a atenção do usuário e proporciona uma sensação de qualidade garantia. Uma boa tipografia dá confiança aos leitores, incentivando-os a continue lendo.
Tradicionalmente, essa tarefa era feita à mão ou opticamente, conforme o designer equilibrar o texto quer agradar aos olhos, não à matemática. Este tópico é muitas vezes é chamado de alinhamento métrico versus óptico. Para publicações grandes, como a New York Times, o equilíbrio de títulos é um detalhe muito importante da experiência do usuário.
O equilíbrio de textos na tipografia remonta aos primórdios da impressão, quando impressoras colocava à mão as letras. À medida que as ferramentas e técnicas evoluíam, os resultados também evoluíram. Hoje em dia, designers têm cor, peso, tamanho e muito mais para equilibrar o texto os designs deles.
No entanto, na Web, há menos controle disponível porque o documento muda
tamanhos e cores com base nos usuários. text-wrap: balance
traz a arte do
equilibrar o texto para a web de forma automatizada, com base no trabalho e
tradições de designers da indústria impressa.
Equilibrar títulos
Esse vai ser e vai ser o caso de uso principal de text-wrap: balance
. Empate
tamanho do olho e torná-lo simétrico e legível para o olho. Definir
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, pois a
o texto precisa ser quebrado e, portanto, ter um comprimento máximo de linha aplicado a partir
em 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 iterações para descobrir a melhor solução de encapsulamento equilibrada. Essa performance custo for atenuado por uma regra, ele só funciona para seis linhas encapsuladas ou menos.
Considerações sobre desempenho
Não é uma boa ideia aplicar o balanceamento de ajuste de texto em todo o design. É um 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 nem tempo para quebrar o texto de acordo com o carregamento de fontes, como você pode ter feito atualmente com JavaScript. A navegador cuida disso!
Interações com a propriedade white-space
O equilíbrio entre texto concorre com a
white-space
porque uma está solicitando nenhum encapsulamento e a outra está solicitando
de encapsulamento equilibrado. Para superar isso, desmarque a propriedade do espaço em branco e, em seguida,
o encapsulamento equilibrado pode ser aplicado novamente.
.balanced {
white-space: unset;
text-wrap: balance;
}
O balanceamento não vai alterar o tamanho in-line do elemento
Há uma vantagem em algumas das soluções JavaScript para texto balanceado
encapsulamento, já que elas mudam o max-width
do próprio elemento contêiner. Isso
ainda tem a vantagem de ser "fechado" para o bloco balanceado. 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. Devido ao
isso, há alguns cenários em que text-wrap: balance
não é tão bom assim, em
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 executa efetivamente uma busca binária pela menor largura que não gera linhas adicionais, parando em um pixel CSS (não gera pixel). Para minimizar ainda mais os passos na pesquisa binária, o navegador começa com 80% da largura média da linha.