Pretexto
29 de março de 2026 – Link Blog
Pretexto (através de) Emocionante nova biblioteca de navegador de Cheng Lou, anteriormente desenvolvedor principal do React e criador original da biblioteca de animação react-motion.
O pretexto resolve o problema de calcular a altura de um parágrafo de texto com quebra de linha sem tocar no DOM. A maneira usual de fazer isso é renderizar o texto e medir suas dimensões, mas isso é extremamente caro. O Pretext usa uma série de truques inteligentes para tornar isso muito, muito mais rápido, o que permite todos os tipos de novos efeitos de renderização de texto em aplicativos de navegador.
Aqui está uma demonstração que mostra o tipo de coisas que isso torna possível:
A chave para como isso funciona é a maneira como ele separa os cálculos em uma chamada para um prepare() função seguida por múltiplas chamadas para layout().
O prepare() A função divide o texto de entrada em segmentos (efetivamente palavras, mas também pode levar em consideração coisas como hífens suaves, sequências de caracteres não latinos e emoji) e mede aqueles usando uma tela fora da tela e, em seguida, armazena em cache os resultados. Isso é comparativamente caro, mas funciona apenas uma vez.
O layout() A função pode então emular a lógica de quebra de linha nos navegadores para descobrir quantas linhas quebradas o texto ocupará em uma largura especificada e medir a altura geral.
Pedi a Claude que construísse esse artefato interativo para me ajudar a entender visualmente o que está acontecendo, com base em uma versão simplificada do próprio Pretext.
A forma como isto é testado é particularmente impressionante. Os testes anteriores renderizaram uma cópia completa do Grande Gatsby em vários navegadores para confirmar que as medidas estimadas estavam corretas em relação a um grande volume de texto. Posteriormente, juntou-se a isso o corpora/ pasta usando a mesma técnica contra documentos extensos de domínio público em tailandês, chinês, coreano, japonês, árabe e muito mais.
