Quebra de texto CSS: saldo

Uma técnica de tipografia clássica de quebras de linha de autoria manual 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 massivamente seus layouts de texto.

Compatibilidade com navegadores

• 114
• 114
• 121
• 17,5

Origem

Veja uma demonstração

Sem text-wrap: balance, designers, editores de conteúdo e editores 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 ajudar a orientar layouts de texto em decisões mais inteligentes sobre onde dividir 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 design eficaz e estético de ajuste de texto, estão no navegador. É por isso que vemos títulos que funciona como na imagem abaixo:

Teste uma demonstração

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

Com text-wrap: balance do CSS Text 4, você pode solicitar que o navegador encontre a melhor solução de quebra de linha equilibrada para o texto. O navegador conheça 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:

Veja uma demonstração

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

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

O bloco de texto equilibrado deve ser muito mais agradável aos olhos. Ele chama mais a 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 à mão ou visualmente, já que o designer que equilibra o texto quer agradar o olho, não a matemática. Esse tópico é muitas vezes chamado de alinhamento métrico e óptico. Para grandes publicações, como o New York Times, o equilíbrio de títulos é um detalhe muito importante da experiência do usuário.

Teste uma demonstração

Observação: o texto principal do artigo não precisa ser equilibrado, porque não precisa se destacar ou chamar a atenção do leitor.

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íram, os resultados também melhoraram. 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. Defina todos os títulos para o balanceamento de texto 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ê vai encontrar um max-inline-size definido nos exemplos desta postagem. Esse estilo é semelhante ao max-width, mas pode ser definido uma vez para qualquer idioma.

Limitações

A tarefa de balancear o texto não é gratuita. 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.

Teste uma demonstração

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.

O que não fazer

* {
  text-wrap: balance;
}

CONSIDERE

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

Uma grande vantagem desse recurso é que você não precisa esperar e equilibrar o balanceamento de texto com o carregamento de fontes, como faz com o JavaScript hoje. O navegador cuida disso.

Interações com a propriedade white-space

O balanceamento de texto compete com a propriedade white-space porque uma pede que não haja quebra de linha e a outra pede que haja quebra de linha equilibrada. Para resolver isso, desative a propriedade de espaço em branco. Depois, a formatação balanceada pode ser aplicada novamente.

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

O balanceamento não muda o tamanho inline do elemento.

Algumas das soluções do JavaScript para quebra de texto equilibrada têm uma vantagem, porque mudam o max-width do próprio elemento que contém. 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:

Percebeu como a largura mostrada nas Ferramentas do desenvolvedor tem muito 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).

O balanceamento do texto quebrado cria 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 para a largura mais estreita, o que não causa linhas adicionais, parando em um pixel CSS (não 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.