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.

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.