Motor de layout de texto en JavaScript
La libreria Pretext
La libreria Pretext es la forma mas rapida de medir texto multilinea en la web. Esta libreria JavaScript de medicion de texto calcula saltos de linea, alturas y layout sin tocar el DOM — aproximadamente 600× mas rapido que la medicion tradicional del navegador. La libreria Pretext funciona en cualquier framework, cualquier navegador y cualquier idioma.
Vision general
¿Que es la libreria Pretext?
La libreria Pretext es un motor de layout de texto en JavaScript/TypeScript puro creado por Cheng Lou, ex miembro del equipo principal de React y actualmente en Midjourney. A diferencia de los enfoques tradicionales que requieren que el navegador renderice texto en el DOM antes de poder medirlo, la libreria Pretext divide el renderizado de texto en dos fases ligeras — convirtiendola en la libreria JavaScript de medicion de texto mas rapida disponible.
La primera fase de la libreria Pretext es la preparacion. Se llama a prepare() una vez con el texto y la fuente. La libreria Pretext segmenta el texto usando reglas Unicode y mide el ancho de cada glifo mediante la API measureText() de Canvas. Esto suele tardar entre 0.1 y 1ms dependiendo de la longitud del texto.
La segunda fase es el layout. Se llama a layout() con un ancho de contenedor y una altura de linea. La libreria Pretext recorre los anchos de segmentos en cache usando aritmetica pura — sin acceso al DOM, sin reflow DOM forzado. Una sola llamada a layout en la libreria Pretext tarda ~0.001ms, lo suficientemente rapido para ejecutarse miles de veces por frame. El handle preparado es reutilizable: calcula alturas para movil, tablet y escritorio desde el mismo handle en tres operaciones.
$ npm install @chenglou/pretext import { prepare, layout } from '@chenglou/pretext' const prepared = prepare('Your text', '16px Inter') const { height, lineCount } = layout(prepared, 400, 24)
Por que elegir esta libreria
Caracteristicas de la libreria Pretext
La libreria Pretext fue disenada desde cero para el rendimiento web y la ergonomia del desarrollador. Estas son las razones por las que la libreria Pretext es la mejor opcion para la medicion de texto en aplicaciones JavaScript.
Cero acceso al DOM
La libreria Pretext nunca lee ni escribe en el DOM durante el layout. Despues de la medicion inicial en Canvas, cada operacion subsiguiente es aritmetica pura. Esto elimina el layout sincrono forzado, el reflow DOM y el layout thrashing — los tres principales problemas de rendimiento web en aplicaciones con mucho texto.
Independiente del framework
La libreria Pretext es un modulo JavaScript independiente con cero dependencias. Importala en React, Vue, Svelte, Angular o JavaScript puro. La libreria Pretext funciona de forma identica en cualquier entorno — del lado del cliente, del servidor o en Web Workers.
Soporte completo de Unicode e i18n
La libreria Pretext utiliza Intl.Segmenter para la segmentacion de texto compatible con Unicode. CJK, arabe, hebreo, tailandes, coreano y texto con scripts mixtos se miden con precision usando la misma API. La libreria Pretext maneja texto bidireccional y scripts complejos sin casos especiales.
Layout en sub-microsegundos
Cada llamada a layout() en la libreria Pretext tarda aproximadamente 0.001ms — aritmetica pura sobre anchos de glifos en cache. Puedes llamar a layout() miles de veces por frame de animacion. Esto hace que la libreria Pretext sea ideal para reflow DOM en tiempo real, redimensionamiento responsivo y tipografia interactiva.
Lineas de ancho variable
La libreria Pretext soporta control de ancho por linea mediante layoutNextLine(). El texto puede fluir alrededor de obstaculos, seguir formas irregulares o adaptarse a layouts editoriales complejos. Esta es la misma tecnica usada en ajuste de texto estilo revista y proyectos de tipografia creativa construidos con la libreria Pretext.
TypeScript nativo
La libreria Pretext esta escrita en TypeScript con definiciones de tipos completas. Cada funcion, parametro y tipo de retorno esta fuertemente tipado. El autocompletado del IDE y la verificacion de tipos funcionan de inmediato — no se necesita paquete @types al usar la libreria Pretext en tu proyecto.
Comparacion de rendimiento
Libreria Pretext vs medicion DOM
La medicion de texto tradicional con DOM crea elementos invisibles, renderiza texto, lee la altura calculada y luego elimina el elemento. La libreria Pretext elimina todo este ciclo. Asi es como la libreria Pretext se compara con los enfoques estandar.
| Aspecto | Medicion DOM | Libreria Pretext |
|---|---|---|
| Velocidad por medicion | 0.5–2ms (reflow DOM forzado) | ~0.001ms (aritmetica pura) |
| Acceso al DOM requerido | Si — crea elementos ocultos | No — cero lecturas/escrituras DOM |
| Layout thrashing | Si — provoca reflow DOM del navegador | Nunca — sin reflow DOM posible |
| Soporte SSR / Web Worker | No — requiere DOM del navegador | Si — funciona en todas partes |
| Tamano del bundle | Integrado en el navegador (pero lento) | ~15KB gzipped, 0 deps |
| Multiples anchos del mismo texto | Re-renderizar para cada ancho | Reutilizar handle — instantaneo |
| Soporte Unicode y CJK | Depende del renderizado de texto del navegador | Intl.Segmenter — preciso |
Aplicaciones
Casos de uso de la libreria Pretext
La libreria Pretext destaca donde la medicion de texto es un cuello de botella. Desde scroll virtual hasta tipografia creativa, estos son los usos mas comunes de la libreria Pretext en produccion.
Scroll virtual
Pre-calcula alturas para miles de elementos de lista con altura variable usando la libreria Pretext. Sin necesidad de elementos DOM. Compatible con React Virtuoso, TanStack Virtual y cualquier libreria de virtualizacion para scroll a 60fps.
Interfaces de chat e IA
Predice la altura de las burbujas de mensaje con la libreria Pretext antes de que las respuestas de IA terminen de renderizarse. Elimina el cambio de layout y los saltos. Ajusta las burbujas para minimizar el espacio desperdiciado en movil.
Dashboards y tablas de datos
Dimensiona tooltips de graficos, celdas de tabla y layouts de tarjetas con la libreria Pretext — sin reflow DOM sincrono forzado. Mantiene 60fps incluso con cientos de elementos de texto visibles actualizandose en tiempo real.
Layouts responsivos
Usa la libreria Pretext para calcular alturas de texto en multiples breakpoints desde una sola llamada a prepare(). Movil, tablet y escritorio — tres operaciones aritmeticas desde el mismo handle, cero reflows.
Tipografia creativa
Construye layouts editoriales donde el texto fluye alrededor de obstaculos, spreads estilo revista multi-columna o arte ASCII basado en particulas. La libreria Pretext te da control linea por linea que el CSS solo no puede lograr.
Contenido multilingue
La libreria Pretext mide texto CJK, arabe, hebreo, tailandes, coreano y de scripts mixtos con la misma API de dos funciones. La segmentacion Unicode y el texto bidireccional se manejan automaticamente.
API
Referencia de la API de la libreria Pretext
La libreria Pretext expone una API pequena y enfocada. Cada funcion en la libreria Pretext tiene un proposito especifico — preparacion o layout. Aqui esta la referencia completa de funciones.
| Funcion | Fase | Proposito |
|---|---|---|
| prepare(text, font) | Preparar | Segmenta y mide el texto. Devuelve un handle opaco. |
| prepareWithSegments(text, font) | Preparar | Como prepare(), pero expone datos de segmentos para uso avanzado. |
| layout(prepared, width, lineHeight) | Layout | Calcula el numero de lineas y la altura total. Aritmetica pura. |
| layoutWithLines(prepared, width, lineHeight) | Layout | Como layout(), mas el texto y ancho de cada linea. |
| layoutNextLine(prepared, cursor, width) | Layout | Calcula una linea a la vez. Ancho variable por linea. |
| walkLineRanges(prepared, width, cb) | Layout | Itera los limites de linea sin construir strings. |
Inicio rapido
Como empezar con la libreria Pretext
Instalar la libreria Pretext requiere un solo comando. La libreria Pretext se distribuye como un unico paquete npm con cero dependencias. Sigue estos tres pasos para empezar a usar la libreria Pretext en tu proyecto.
Instalar la libreria Pretext
Agrega la libreria Pretext a tu proyecto con npm, pnpm o yarn. El paquete es @chenglou/pretext — aproximadamente 15KB comprimido con cero dependencias.
Preparar tu texto
Llama a prepare(text, font) una vez por cada par texto+fuente. La libreria Pretext segmenta el texto y mide las metricas de fuente mediante Canvas. Guarda el handle para reutilizarlo en multiples llamadas de layout.
Layout en cualquier ancho
Llama a layout(handle, width, lineHeight) para obtener la altura y el numero de lineas. La libreria Pretext calcula esto con aritmetica pura en ~0.001ms. Reutiliza el mismo handle para diferentes anchos de contenedor.
Empieza a usar la libreria Pretext
La libreria Pretext es open source, con licencia MIT y lista para produccion. Pruebala en el playground interactivo, explora demos de la comunidad o revisa el codigo fuente en GitHub. Unete a miles de desarrolladores que ya usan la libreria Pretext para medicion de texto rapida y sin DOM.
La libreria Pretext fue creada por Cheng Lou. Lee mas sobre el ecosistema GitHub Pretext.