Melhorando a tipografia com `text-wrap: pretty`

• Um olhar sobre text-wrap: pretty, que deixa a tipografia na web mais bonita
• Recurso recém-introduzido no Safari Technology Preview 216, que torna a tipografia na web mais refinada e fácil de ler
• O layout de texto tradicional na web processava uma linha por vez, mas pretty ajusta as quebras de linha considerando o parágrafo inteiro
• Esse recurso melhora a legibilidade e a acessibilidade, e foi implementado com inspiração em métodos tradicionais de composição tipográfica

Aprendendo com a tipografia tradicional: boas quebras de linha

• Evitar uma última linha curta: deixar apenas uma palavra na última linha não é esteticamente agradável
• Melhorar o contorno irregular do fim do parágrafo: quando o fim das linhas fica muito irregular, a legibilidade cai, então é melhor equilibrá-lo sempre que possível
• Evitar hifenização ruim: quando hífens aparecem em duas linhas seguidas ou as palavras são quebradas em excesso, a leitura fica mais difícil
• Evitar rios tipográficos: deve-se evitar o efeito em que os espaços entre palavras se alinham verticalmente e desviam a atenção do olhar

A história da quebra de linha na web

• A web usa, desde 1991, uma abordagem de “processar uma linha por vez a partir da primeira”
• Esse método calcula separadamente o comprimento do texto em cada linha e não considera a harmonia entre as linhas
• Ferramentas como InDesign e LaTeX alinham as linhas olhando o parágrafo inteiro, mas a web não fazia isso até recentemente
• No Safari Technology Preview 216, foi introduzido pela primeira vez um método de quebra de linha que considera o parágrafo completo

Problemas que text-wrap: pretty resolve

• Avalia o parágrafo inteiro para definir os melhores pontos de quebra de linha
• Evita uma última linha curta, melhora o formato irregular do fim das linhas (rag) e reduz hifenizações desnecessárias
• Navegadores baseados em Chromium melhoram apenas as 4 últimas linhas do parágrafo, enquanto o WebKit aplica isso ao parágrafo inteiro
• O efeito de rios tipográficos ainda não foi melhorado, mas há planos para isso no futuro

Diferenças de implementação entre navegadores

• pretty pode funcionar de forma diferente em cada navegador, conforme definido pelo CSS Working Group
• O WebKit aplica ao parágrafo inteiro, enquanto o Chromium aplica apenas às 4 últimas linhas
• Por isso, os desenvolvedores não devem usá-lo apenas para melhorar a última linha, mas para elevar a tipografia como um todo

Veja a demo

• Na demo no CodePen, é possível experimentar combinações de pretty, balance, hifenização e alinhamento
• Ative “show guides” e “show ghosts” para comparar antes e depois
• É possível verificar os efeitos em vários idiomas (inglês, árabe, alemão, chinês e japonês)

Tirando dúvidas sobre desempenho

• Em conteúdos com muitas linhas, pode haver impacto de desempenho, mas em parágrafos comuns não há problema
• A menos que sejam parágrafos com centenas ou milhares de linhas, dá para usar sem preocupação
• Se necessário, o WebKit pretende dividir parágrafos longos no processamento para garantir o desempenho

Diferença entre pretty e balance

• pretty mantém o texto preenchendo a largura do contêiner, enquanto torna as quebras de linha mais naturais
• balance foca em deixar todas as linhas com comprimentos parecidos, fazendo com que o contêiner fique menos preenchido
• Em geral, pretty é mais adequado para texto corrido, enquanto balance funciona melhor em títulos, legendas e textos de destaque
• Ambos podem ser usados em textos curtos, mas é melhor evitar balance em textos longos

Explicação de outros valores da propriedade text-wrap

text-wrap: avoid-short-last-lines

• Valor recém-adicionado que se concentra apenas em evitar uma última linha curta
• Ainda não foi implementado em nenhum navegador

text-wrap: auto

• Valor padrão, que usa o algoritmo “guloso” de quebra de linha em nível de linha usado desde 1991
• No futuro, o próprio valor padrão dos navegadores pode ser aprimorado

text-wrap: stable

• Atualmente funciona igual a auto, mas oferece quebras de linha estáveis, adequadas para texto editável
• Garante que as quebras de linha não mudem durante animações ou durante a digitação

Propriedades detalhadas de text-wrap

• text-wrap é, na verdade, uma forma abreviada de duas propriedades: text-wrap-mode e text-wrap-style

• text-wrap-mode: define se a quebra de linha é permitida (wrap / nowrap)

• text-wrap-style: escolhe o algoritmo de quebra de linha (auto, stable, balance, pretty, avoid-short-last-lines)

  text-wrap-style: pretty;  
  text-wrap-mode: wrap;  
  

• Ao usar junto com a propriedade white-space, também é preciso verificar como os espaços em branco são tratados

Resumo

• text-wrap: pretty permite uma quebra de linha de texto na web muito mais refinada do que antes
• Foi implementado no Safari Technology Preview 216 com uma abordagem de avaliação do parágrafo inteiro
• Quase não há problemas de desempenho mesmo quando aplicado a textos longos, e ele traz grande melhora em legibilidade e estética
• É importante entender a diferença em relação a balance e escolher a opção adequada conforme o tipo de conteúdo

[GN⁺]

Comentários no Hacker News

• Dá até risada ouvir que muitos desenvolvedores se preocupam com o desempenho de "text-wrap: pretty". É difícil acreditar que existam tantos desenvolvedores considerando desempenho de quebra de texto
• O conteúdo da demo está em inglês. É um inglês estranho. Não tem relação com o tema e, a menos que o caso seja tentar melhorar a quebra de linha reorganizando palavras, não é relevante
• Espero que esse recurso seja adicionado a ereaders. Os ereaders têm mecanismos de layout ruins
• Muito pouco esforço e atenção foram dedicados a deixar o texto online bonito. A web fez o texto voltar séculos no tempo. Esse recurso é bem-vindo
• O suporte a "text-wrap: pretty" foi adicionado ao Safari Technology Preview, trazendo um nível de refinamento sem precedentes à tipografia na web. Segundo o caniuse.com, o Chrome oferece suporte a esse recurso desde setembro de 2023. É difícil entender o que exatamente seria “sem precedentes”
• Alguém sabe a diferença entre "text-align: justify" e "text-wrap: pretty"? No Chrome, "text-wrap: pretty" produz um efeito muito mais suave. Verifiquei se valeria a pena usar ambos no corpo de um blog comum, e parece que cada um traz mudanças próprias
• Esse recurso é excelente. Não surpreende que ele foque em linhas finais curtas e irregularidades. Porém, ainda não faz ajustes para evitar rios tipográficos. É difícil imaginar como definir uma métrica que caracterize rios. Fico curioso se alguém já inventou alguma métrica engenhosa que realmente funcione
• O parágrafo que tenta evitar palavras órfãs deixa a palavra "large" sozinha. Aplicar "text-wrap: pretty" resolve isso
• O objetivo de "pretty", como foi projetado pelo CSS Working Group, é que cada navegador faça o que puder para melhorar a quebra de texto. Não obriga todos os navegadores a tomarem as mesmas decisões. Por causa da forma como o Chrome implementa isso, muitos desenvolvedores web esperam que esse valor sirva para evitar linhas finais curtas. Mas essa não é a intenção
• Já estou usando "text-wrap: balance" em manchetes. Eu tinha tentado agrupar certas palavras para evitar quebras ruins. "text-wrap: pretty" deve resolver problemas semelhantes no texto corrido