A web moderna pode estar prestes a passar por uma transformação radical graças a uma nova biblioteca chamada Pretext. Desenvolvida por Cheng Lou, um dos nomes por trás do React e ReasonML, a ferramenta promete eliminar uma das maiores fontes de lentidão em sites e aplicativos: o reflow de layout causado pelo CSS tradicional.
Essa inovação não é apenas um avanço em termos de performance, mas também representa uma nova era no desenvolvimento de software, onde a inteligência artificial desempenha um papel crucial na criação de infraestrutura. O Pretext foi construído com a ajuda de modelos de IA como Claude Code e Codex, alimentados com dados precisos do comportamento dos navegadores.
A proposta é clara, e os resultados preliminares são impressionantes. Com o Pretext, desenvolvedores podem obter layouts de texto mais rápidos e eficientes, sem a necessidade de interagir diretamente com o DOM para medições, um processo que historicamente consome muitos recursos e causa travamentos.
Adeus, Reflow de Layout: Uma Nova Era para a Web
O CSS, criado há três décadas para documentos estáticos, enfrenta desafios significativos na web dinâmica e interativa de hoje. Um dos problemas mais persistentes é o layout reflow, que ocorre sempre que o navegador precisa recalcular a posição e o tamanho de elementos na página. Essa operação, especialmente ao lidar com medições de texto, pode congelar a thread principal do navegador por dezenas de milissegundos, impactando diretamente a fluidez da experiência do usuário.
Cheng Lou, conhecido por seu trabalho em projetos como o Messenger e o Midjourney, identificou essa ineficiência como um gargalo crítico. O Pretext surge como uma solução direta, medindo e organizando o texto sem depender do DOM. Isso significa zero reflows e uma performance estimada em até 500 vezes mais rápida, tudo isso com uma biblioteca de poucos kilobytes.
Inteligência Artificial como Ferramenta de Criação de Infraestrutura
O que diferencia o Pretext de outras bibliotecas é a sua origem. Cheng Lou utilizou inteligência artificial, especificamente Claude Code e Codex, para construir a base da ferramenta. Ao alimentar a IA com o comportamento real dos navegadores (o ground truth), ele permitiu que a inteligência artificial iterasse até alcançar a precisão necessária.
O resultado é uma biblioteca capaz de lidar com uma vasta gama de complexidades textuais, incluindo idiomas CJK (Chinês, Japonês, Coreano), árabe com escrita RTL (Right-to-Left), emojis e clusters de grafemas. Isso demonstra o poder da IA em resolver problemas de infraestrutura de UI que persistiram por anos, sob a supervisão de um engenheiro de front-end experiente.
Pretext: Performance e Precisão em Layout de Texto
O Pretext é uma biblioteca TypeScript pura focada em medição e layout de texto multilinha. Sua principal vantagem é evitar as caras operações de medição no DOM, como `getBoundingClientRect` ou `offsetHeight`, que são gatilhos comuns para o reflow. Em vez disso, o Pretext implementa sua própria lógica de medição, baseada no motor de fontes do navegador, garantindo velocidade e precisão.
A instalação é simples via npm: `npm install @chenglou/pretext`. A biblioteca oferece duas APIs principais. A primeira, `prepare` e `layout`, permite medir a altura de um parágrafo sem tocar no DOM. Por exemplo, para um texto em português com a fonte ’16px Inter’ e uma largura máxima de 20 unidades, o código seria:
import { prepare, layout } from '@chenglou/pretext'
const prepared = prepare('O inverno acabou. A primavera chegou.', '16px Inter')
const { height, lineCount } = layout(prepared, 20)
A função `prepare()` realiza o processamento inicial mais pesado, enquanto `layout()` é significativamente mais leve, otimizada para performance. Para comportamentos semelhantes a `textarea`, preservando espaços e quebras, a opção `whiteSpace: ‘pre-wrap’` pode ser utilizada.
Layout Manual e Suporte Abrangente a Idiomas
A segunda API, `prepareWithSegments` e `layoutWithLines`, possibilita um controle mais granular, permitindo o layout manual das linhas. Isso é particularmente útil para renderizações em Canvas ou SVG, onde o controle pixel a pixel é essencial. Um exemplo para renderizar texto em Canvas seria:
import { prepareWithSegments, layoutWithLines } from '@chenglou/pretext'
const prepared = prepareWithSegments('AGI 春天到了. بدأت الرحلة 🚀', '18px "Helvetica Neue"')
const { lines } = layoutWithLines(prepared, 320, 26)
for (let i = 0; i < lines.length; i++) { ctx.fillText(lines[i].text, 0, i * 26) }
O Pretext também oferece APIs auxiliares como `walkLineRanges` para determinar a largura da maior linha, e `layoutNextLine` para um layout dinâmico linha por linha, permitindo a criação de sistemas de paginação complexos ou fluxos de texto adaptáveis.
A biblioteca demonstra um suporte impressionante a diversos cenários, incluindo a preservação de espaços e tabs com `white-space: pre-wrap`, `word-break: break-word`, e `line-break: auto`. Embora fontes `system-ui` possam apresentar inconsistências, especialmente no macOS, o Pretext se posiciona como uma infraestrutura de UI de ponta, escrita por IA sob a orientação de um dos engenheiros mais influentes da atualidade.
Café Codificado é um portal dinâmico e confiável criado especialmente para desenvolvedores. Nosso foco é entregar:
Dicas práticas para programação, produtividade, frameworks, testes, DevOps e muito mais;
Notícias atualizadas, acompanhando tendências e lançamentos do mundo da tecnologia, compiladas com relevância e sem jargões desnecessários.
O que você encontra aqui:
Artigos objetivos e comandáveis — Tutoriais, tutoriais passo-a-passo e dicas que vão direto ao ponto.
Cobertura das tecnologias que estão em alta — do universo da IA, computação em nuvem e segurança à engenharia de software e criatividade em código.
Conteúdo para todos os níveis — de iniciantes buscando praticidade, a profissionais em busca de insights estratégicos e aperfeiçoamento.
Comunidade ativa — textos humanizados, perguntinhas instigantes e espaço para você contribuir com reflexões e comentários.