Embelezando o texto na web
Mais um capítulo da série “fascinado com os detalhes do CSS”, desta vez com o atributo text-wrap: pretty e o cuidado dos navegadores para determinar as quebras de linhas, “rio tipográfico” (não conhecia o conceito) o comprimento da linha final.
O Safari é o penúltimo grande navegador a implementar o text-wrap: pretty, novidade anunciada em um post super detalhado (em inglês), interessantíssimo. “Pretty”, em inglês, significa “bonito”; achei belo a especificação do CSS delegar a cada navegador as decisões para apresentar texto embelezado por ele.
O Chromium (base do Chrome, Edge, Opera e Samsung Browser), por exemplo, “só faz ajustes nas últimas quatro linhas de um parágrafo” porque tem como foco evitar que a última linha seja curta.
Por falar nisso…
“Nasceu” um novo atributo, o text-wrap: avoid-short-last-line, para… evitar que a última linha seja curta. Em raros momentos, acho que o pessoal exagera na especificidade.
Veja esta demonstração do pessoal do WebKit (motor do Safari), com controles dinâmicos, do text-wrap: pretty. (Hoje, em abril de 2025, a versão estável do Safari ainda não tem suporte.)
Este Manual implementa algumas regras mais consolidadas para lidar com o equilíbrio de blocos de texto e melhorar a legibilidade:
- Os títulos, por exemplo, recebem o
text-wrap: balance, que faz com que todas as linhas tenham mais ou menos o mesmo comprimento. - Parágrafos e itens em listas contam com o
overflow-wrap: break-word, para quebrar palavras grandes a fim de evitar que elas “estourem” a área visível e criem uma barra de rolagem horizontal.
O post do WebKit me apresentou a este outro, que detalha o atributo margin-trim e a unidade de medida lh (altura da linha), ambos até então desconhecidos. Hoje, o espaçamento entre blocos de texto é feito com margin comum e a altura da linha, definida em rem (tamanho relativo o padrão para fontes do navegador).
É por essas e outras que eu nunca consigo passar muito tempo sem mexer no leiaute deste site.
Isso também poderia ser implementado no Firefox?
O Firefox ainda não dá suporte ao
text-wrap: pretty☹️Será que a próxima versão estável virá com text-wrap: pretty?
Bem provável! No pior cenário, chegará em setembro ou outubro, na grande atualização do ano dos sistemas operacionais da Apple.
Topei testar o Safari Technology Preview e observar na prática. Obrigado por trazer o tema. Abraço!
Rios tipográficos são muito comuns em colunas estreitas e textos justificados. Junte as duas coisas (num celular, por exemplo) e sua mancha tipográfica ficará cheia de “rasgos”.
É por essas e outras que eu nunca consigo passar muito tempo sem mexer no leiaute do meu blog também.