Pré-texto: Usar matemática para calcular o tamanho do texto, sem causar reflow no DOM

O que aconteceu

O blogueiro tecnológico chinês Bao Yu ( @dotey ) partilhou uma animação interativa em forma de “dragão” feita com Pretext, dizendo “Achei muito fixe”. O Pretext é uma biblioteca de medição de texto em TypeScript que Cheng Lou acabou de lançar em open source; ele já trabalhou antes na equipa do React e na Midjourney.

Como é implementado, tecnicamente

Ideia central: calcular com matemática, sem deixar o navegador calcular.

• Abordagem tradicional: colocar o texto no DOM e medir a largura e a altura. O problema é que isto dispara relayout/reflow do layout, o que é muito lento.
• Abordagem do Pretext: calcular diretamente no JS quantas linhas o texto vai ocupar e o quão larga cada linha será; o navegador fica completamente de fora.

Como garantir que a medição é precisa:

• Usar Claude e Codex para gerar a lógica de cálculo e, em seguida, comparar automaticamente com o resultado real renderizado pelo navegador
• Testar uma série de combinações de idiomas, tipos de letra e larguras do contentor
• A versão oficial diz que, em cenários comuns, é cerca de 500x mais rápido do que a medição tradicional no DOM

Que problemas difíceis foram tratados:

• Texto bidirecional (como árabe e hebraico, que se lê da direita para a esquerda), emojis e outros casos propensos a falhas, tudo foi considerado

Porque é que isto merece atenção

Páginas com muito texto ficam frequentemente presas nos cálculos de layout. Os seguintes cenários são os que mais dão dores de cabeça:

• Virtual scrolling (é preciso saber antecipadamente a altura de cada item)
• Waterfall layout (o estilo do Pinterest: é preciso saber o tamanho de cada bloco para o posicionar)
• Layouts responsivos complexos

O meu parecer:

• Não seguir o caminho do DOM de facto reduz o engasgo; o limite do framerate pode ficar mais alto
• Cheng Lou já fez React e Midjourney antes; a capacidade de engenharia deve ser boa
• Se a comunidade acrescentar mais dados de fontes e idiomas, pode vir a mudar a forma como o frontend lida com texto nos frameworks. Mas isso depende de haver manutenção contínua por parte de alguém no futuro

Reacção inicial

• Alguém no Twitter disse que, na demonstração, atingiu 120fps
• Alguém achou que isto pode afectar o desenho no nível do framework
• Mas o projecto acabou de ser lançado; ainda está cedo para uso em larga escala. É preciso ver as contribuições futuras da comunidade

Como encarar este caso

Resumo: É um projecto inicial, mas a ideia é interessante. Ainda está cedo para entrar agora; o mais adequado são pessoas que trabalham em frameworks ou infraestrutura base de frontend. Se estiveres a trabalhar em virtual scrolling, waterfall ou páginas com muito conteúdo, podes primeiro testar em pequena escala para ver se está correcto e estável no teu tipo de letra e no teu ambiente linguístico; só depois, quando estiver confirmado que não há problemas, é que avançar em grande escala.