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 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:

.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:

.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.