Pretext.js
Medicion de texto que nunca toca el DOM.
Pretext mide y posiciona texto multilínea mediante aritmética pura — sin getBoundingClientRect, sin reflow DOM, sin bloqueos. Rápido en la primera llamada. Instantáneo en todas las siguientes.
Por qué existe Pretext: cada medicion de texto en el DOM es una trampa de rendimiento web.
Cada vez que tu JavaScript llama a getBoundingClientRect(), offsetHeight o scrollHeight sobre un nodo del DOM, el navegador debe pausar la ejecución del script, aplicar todos los cambios de estilo pendientes y realizar un pase de renderizado de texto completo — solo para responder tu pregunta sobre el tamaño de un elemento.
Esto se conoce como reflow DOM sincrónico forzado, y es una de las operaciones más costosas que un navegador puede ejecutar. En un bucle cerrado — por ejemplo, midiendo mil elementos en una lista con scroll virtual — provoca thrashing: el navegador alterna entre renderizado de texto y ejecución de JavaScript cientos de veces por frame, paralizando incluso el hardware más moderno.
La cruel ironía es que la mayoría de las veces solo necesitas un número: ¿cuántos píxeles de alto tendrá este texto dado este ancho de contenedor? No hay razón para que esa pregunta requiera tocar el DOM. Pretext existe para demostrarlo.
// 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
Cómo funciona Pretext: mide una vez, calcula el layout para siempre.
Arrastra el divisor para comparar el enfoque tradicional del DOM con Pretext. Uno provoca reflow DOM en cada llamada. Pretext usa aritmética 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 el texto
Normaliza los espacios en blanco, aplica las reglas Unicode de salto de línea y divide la cadena en unidades medibles usando la propia segmentación de texto del navegador.
Medir con Canvas
Pasa cada segmento por Canvas measureText() para obtener los anchos reales de avance de glifos del motor de fuentes. Los resultados se almacenan en caché.
Pretext usa aritmética pura
Dado un ancho de contenedor, calcula los saltos de línea sumando los anchos de los segmentos. Multiplica el número de líneas por el line-height. Devuelve la altura. Sin DOM, nunca.
Capacidades de Pretext: diseñado para casos donde el rendimiento web es crítico.
Pretext es un motor de layout de texto diseñado para desarrolladores que construyen interfaces complejas con mucho texto, donde la medicion de texto tradicional del DOM se ha convertido en el cuello de botella. Estas son las capacidades que lo hacen listo para producción.
Cero lecturas del DOM
En Pretext, después de prepare(), cada llamada a layout() es aritmética pura. Sin getBoundingClientRect, sin offsetHeight, sin reflow DOM sincrónico forzado — nunca.
Metricas de fuente reales
Pretext mide los anchos de glifos usando el propio motor de fuentes Canvas del navegador, no heurísticas ni tablas de consulta. El resultado coincide con lo que el navegador realmente renderizaría.
Multilingüe por diseño
Pretext soporta completamente los sistemas de escritura CJK, árabe, hebreo, tailandés, hindi y coreano, incluyendo segmentación Unicode correcta y manejo de texto bidireccional.
Nativo en TypeScript
Escrito en TypeScript desde cero. Tipos precisos para cada función, parámetro y valor de retorno — sin paquetes @types necesarios, sin gimnasia de tipos.
Handles reutilizables de prepare()
Una sola llamada a prepare() cubre cualquier ancho de contenedor. Calcula alturas para móvil, tablet y escritorio en tres operaciones aritméticas desde el mismo handle.
Cero dependencias en runtime
Sin paquetes externos, sin polyfills, sin sorpresas en tu bundle. Pretext es una libreria JavaScript que depende únicamente de APIs estándar del navegador disponibles en cualquier entorno moderno.
Pretext en escenarios reales.
Pretext brilla donde la medicion de texto tradicional del DOM se queda corta. Estos ejemplos muestran a Pretext resolviendo desafíos reales de producción — desde scroll virtual hasta interfaces de chat multilingües.
Scroll virtual con altura variable
Renderiza una lista de 10,000 elementos con alturas de texto variables, calculadas completamente sin lecturas del DOM. Scroll virtual fluido a 60fps en cualquier dispositivo.
Pretext para burbujas de chat con IA
Usa Pretext para precalcular las alturas de las burbujas en respuestas de IA en streaming antes de que terminen de renderizarse. Elimina por completo los saltos y desplazamientos en interfaces de chat.
Feed de contenido multilingüe
Un feed social que mezcla texto en chino, árabe, coreano y latino en una sola lista virtualizada. Cada sistema de escritura medido con precisión, sin tratamiento especial.
Construido con Pretext.
Demos creativos de la comunidad — máquinas de ritmo con texto, simulaciones fluidas, pizarras colaborativas y más. Descubre lo que los desarrolladores están construyendo con Pretext.
Efecto de escritura en arena
Un hermoso efecto de escritura en arena construido con Rive — los caracteres aparecen como si fueran dibujados en arena con textura y animación realistas.
Visualización geométrica de texto
Una impactante visualización geométrica de texto que muestra las posibilidades creativas de tipografía con el motor de layout de texto Pretext.
Ajuste de texto alrededor de objetos 3D
Ajuste de texto fluido alrededor de un objeto 3D gaussian splat en tiempo real — combinando el motor de layout de texto Pretext con renderizado 3D.
Instala Pretext en tres minutos.
Pretext está publicado en npm y viene con declaraciones TypeScript completas. Instálalo con tu gestor de paquetes preferido, importa las dos funciones que necesitas y estarás listo para medir texto sin tocar el 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 de Pretext.
Análisis profundos sobre renderizado de texto, rendimiento web del navegador, y cómo Pretext resuelve problemas que los desarrolladores enfrentan a diario — sepan o no cuál es la causa raíz.
El significado de Pretext: qué es y por qué los desarrolladores lo prefieren
¿Qué significa Pretext? Desde sus raíces latinas hasta el motor de layout de texto JavaScript más rápido — descubre cómo Pretext calcula el layout antes del renderizado de texto, con showcases de la comunidad y testimonios de desarrolladores.
Chenglou Pretext: la historia detrás del motor de layout de texto JavaScript más rápido
Cómo Cheng Lou pasó del equipo core de React a construir Pretext en Midjourney — una libreria JavaScript de layout de texto puro que es 600 veces más rápida que la medicion de texto del DOM.
Pretext en NPM: cómo instalar y usar la libreria JavaScript y TypeScript
Instala Pretext desde npm y comienza a medir el layout de texto en JavaScript y TypeScript. Guía completa de la API, ejemplos con frameworks y casos de uso reales.
Prueba Pretext hoy.
Ya sea que estés construyendo una lista con scroll virtual, un editor de código, una interfaz de chat con IA, o cualquier cosa donde la altura del texto importe — Pretext te da metricas de fuente precisas sin el costo de rendimiento web.