Pretext
Medicao de texto que nunca toca o DOM.
Pretext mede e posiciona texto multilinha inteiramente por aritmetica — sem getBoundingClientRect, sem reflow DOM, sem travamentos. Rapido na primeira chamada. Instantaneo em todas as seguintes.
Por que Pretext existe: cada medicao de texto no DOM e uma armadilha de desempenho web.
Toda vez que seu JavaScript chama getBoundingClientRect(), offsetHeight ou scrollHeight em um nó do DOM, o navegador precisa pausar a execucao do script, aplicar todas as alteracoes de estilo pendentes e realizar um passo completo de renderizacao de texto — apenas para responder sua pergunta sobre o tamanho de um elemento.
Isso se chama reflow DOM sincrono forcado, e e uma das operacoes mais caras que um navegador pode executar. Em um loop intenso — digamos, medindo mil itens em uma lista de scroll virtual — isso causa thrashing: o navegador alterna entre renderizacao de texto e execucao JavaScript centenas de vezes por frame, travando ate hardware moderno.
A ironia cruel e que, na maioria das vezes, voce so precisa de um numero: quantos pixels de altura esse texto vai ter, dada essa largura de container? Nao existe razao para essa pergunta exigir qualquer acesso ao DOM. Pretext existe para provar exatamente isso.
// Forces browser layout on every iteration const heights = items.map((item) => { const el = createElement(item.text); document.body.appendChild(el); // ← forces layout reflow here const h = el.getBoundingClientRect().height; reflow! document.body.removeChild(el); return h; }); // 1000 items = 1000 reflows = ~94ms ≈ 6 dropped frames
Como Pretext funciona: meca uma vez, faca o layout para sempre.
Arraste o divisor para comparar a abordagem tradicional via DOM com o Pretext. Uma forca reflow DOM a cada chamada. Pretext usa aritmetica pura.
import { prepare, layout } from '@chenglou/pretext' // prepare() runs once — uses Canvas const prepared = prepare( 'The quick brown fox jumped.', '16px Inter' ); // layout() is pure arithmetic const { height, lineCount } = layout( prepared, containerWidth, lineHeight ); no reflow // 1000 items = 0 reflows = ~0.05ms // 500x faster, zero DOM access
// Forces browser layout on every iteration const heights = items.map((item) => { const el = createElement(item.text); document.body.appendChild(el); // ← forces layout reflow here const h = el.getBoundingClientRect().height; reflow! document.body.removeChild(el); return h; }); // 1000 items = 1000 reflows = ~94ms // ≈ 6 dropped frames at 60fps
Segmentar o texto
Normaliza espacos em branco, aplica regras Unicode de quebra de texto e divide a string em unidades mensuraveis usando a propria segmentacao de texto do navegador.
Medir com Canvas
Passa cada segmento pelo Canvas measureText() para obter as larguras reais de avanco dos glifos a partir das metricas de fonte. Os resultados sao armazenados em cache.
Pretext usa aritmetica pura
Dada uma largura de container, calcula quebras de linha somando as larguras dos segmentos. Multiplica a contagem de linhas pela altura de linha. Retorna a altura. Sem DOM, nunca.
Capacidades do Pretext: feito para casos criticos de desempenho web.
Pretext foi projetado para desenvolvedores que constroem interfaces complexas e ricas em texto, onde a medicao de texto tradicional via DOM se tornou o gargalo. Estas sao as capacidades que o tornam pronto para producao.
Zero leituras DOM
No Pretext, apos prepare(), cada chamada de layout() e aritmetica pura. Sem getBoundingClientRect, sem offsetHeight, sem reflow DOM sincrono forcado — nunca.
Metricas de fonte reais
Pretext mede larguras de glifos usando o proprio motor de fontes Canvas do navegador, nao heuristicas ou tabelas de consulta. O resultado corresponde exatamente ao que o navegador renderizaria.
Multilíngue por design
Pretext suporta totalmente CJK, arabe, hebraico, tailandes, hindi e coreano, incluindo segmentacao Unicode correta e tratamento bidirecional de texto.
Nativo em TypeScript
Escrito em TypeScript desde o inicio. Tipos precisos para cada funcao, parametro e valor de retorno — sem pacotes @types necessarios, sem ginastica de tipos.
Handles reutilizaveis de prepare()
Uma unica chamada de prepare() cobre qualquer largura de container. Calcule alturas para mobile, tablet e desktop em tres operacoes aritmeticas a partir do mesmo handle.
Zero dependencias em runtime
Sem pacotes externos, sem polyfills, sem surpresas no seu bundle. Pretext depende inteiramente de APIs padrao do navegador disponiveis em qualquer ambiente moderno.
Pretext em cenarios reais.
Pretext se destaca onde a medicao de texto tradicional via DOM falha. Estes exemplos mostram Pretext resolvendo desafios reais de producao — de scroll virtual a interfaces de chat com IA multilíngues.
Scroll virtual com altura variavel
Renderize uma lista de 10.000 itens com alturas de texto variaveis, calculadas inteiramente sem leituras DOM. Scroll virtual suave a 60fps em qualquer dispositivo.
Pretext para bolhas de chat com IA
Use Pretext para pre-calcular alturas de bolhas em respostas de IA por streaming antes que terminem de renderizar. Elimine deslocamentos e pulos em interfaces de chat completamente.
Feed de conteudo multilíngue
Um feed social misturando texto em chines, arabe, coreano e latim em uma unica lista virtualizada. Cada sistema de escrita medido com precisao, sem tratamento especial necessario.
Construido com Pretext.
Demos criativos da comunidade — maquinas de ritmo com texto, simulacoes fluidas, quadros colaborativos e mais. Veja o que desenvolvedores estao construindo com Pretext.
Mesmerizing Text Animation
A hypnotic text animation that showcases the creative potential of Pretext.js — fluid motion and precise text layout combined.
Umbrella Text Reflow
Text dynamically reflows around a moving umbrella shape — a stunning UX concept combining Pretext.js layout with interactive design.
Interactive Curling Rocks
A playful Pretext.js example with Rive scripting for interactive curling rocks — text layout meets physics-based animation.
Sand Writing Effect
Beautiful sand writing effect built with Rive — characters appear as if drawn in sand with realistic texture and animation.
Pool of Text
A mesmerizing pool of text that ripples and flows like water — satisfying fluid simulation meets Pretext.js text layout.
Geometric Text Visualization
A striking geometric text visualization showcasing creative typography possibilities with Pretext.js layout engine.
60FPS Pretext Playground
A performance stress test of the Pretext playground pushing from 60FPS to its limits — demonstrating real-time text layout at scale.
tldraw × Pretext
tldraw integrating Pretext.js for instant text measurement in their collaborative whiteboard — smooth resizing and layout without DOM reflow.
Illuminated Dragon
An illuminated dragon rendered with creative text layout — a playful, whimsical demo showing Pretext.js used for artistic typography effects.
Instale Pretext em tres minutos.
Pretext e publicado no npm e inclui declaracoes TypeScript completas. Instale com o gerenciador de pacotes de sua preferencia, importe as duas funcoes necessarias e comece a fazer medicao de texto sem tocar no DOM.
import { prepare, layout } from '@chenglou/pretext' // Step 1: prepare once for a given text + font pair const handle = prepare( 'Hello, pretext.js — no reflow needed.', '16px "Inter"' ); // Step 2: layout at any width, instantly const { height, lineCount } = layout( handle, 400, // container width in px 24 // line height in px ); console.log(height); // → 48 console.log(lineCount); // → 2 // Step 3: reuse the handle for different widths const narrow = layout(handle, 240, 24); // → 3 lines
Blog do Pretext.
Mergulhos profundos em renderizacao de texto, desempenho web do navegador e como Pretext resolve problemas que desenvolvedores enfrentam todos os dias — saibam eles a causa raiz ou nao.
Significado de Pretext: O Que E Pretext e Por Que Desenvolvedores Adoram
O que significa pretext? Das raizes latinas ao motor de layout de texto JavaScript mais rapido — descubra como Pretext calcula o layout antes da renderizacao de texto, com showcases da comunidade e depoimentos de desenvolvedores.
Chenglou Pretext: A Historia Por Tras do Motor de Layout de Texto JavaScript Mais Rapido
Como Cheng Lou saiu do time core do React para construir Pretext na Midjourney — uma biblioteca JavaScript de motor de layout de texto puro que e 600x mais rapida que medicao de texto via DOM.
Pretext NPM: Como Instalar e Usar a Biblioteca JavaScript e TypeScript Pretext
Instale Pretext via npm e comece a medir layout de texto em JavaScript e TypeScript. Tutorial completo da API, exemplos com frameworks e casos de uso reais.
Experimente Pretext hoje.
Seja para construir uma lista com scroll virtual, um editor de codigo, uma interface de chat com IA ou qualquer coisa onde a altura do texto importa — Pretext oferece medicao de texto precisa sem o custo de desempenho web.