Pretext.JS

Pretext.js: El motor de diseño de texto que elimina los reflows del DOM

En el desarrollo web moderno, la medición de texto es una de las tareas más costosas para el rendimiento de una aplicación. Tradicionalmente, para saber cuánto mide un bloque de texto, los desarrolladores deben renderizarlo en el DOM y consultar sus dimensiones, lo que provoca un fenómeno conocido como layout thrashing. Pretext.js llega para solucionar este problema de raíz, ofreciendo una biblioteca de JavaScript puro que mide y posiciona texto mediante aritmética, sin tocar el DOM ni una sola vez.

¿Qué es Pretext.js?

Pretext.js es un motor de diseño de texto de alto rendimiento, escrito en TypeScript, que permite calcular el ancho, la altura y el número de líneas de cualquier cadena de texto de forma instantánea. A diferencia del enfoque convencional del navegador, que requiere pausar la ejecución de scripts para calcular el diseño, Pretext.js utiliza un pipeline optimizado: mide cada palabra una vez a través de Canvas, cachea los resultados y realiza todos los cálculos posteriores mediante operaciones matemáticas puras.

Este motor es capaz de procesar 1,000 bloques de texto en aproximadamente 0.05ms, lo que lo hace 500 veces más rápido que los métodos que dependen de getBoundingClientRect(). Es la herramienta ideal para interfaces críticas donde la velocidad es innegociable.

Características principales de Pretext.js

El éxito de Pretext.js se basa en su capacidad para ofrecer resultados precisos sin el coste computacional del renderizado tradicional. Sus características más destacadas incluyen:

• Zero DOM Reads: Tras la fase de preparación, cada llamada al motor es aritmética pura. No hay lecturas de offsetHeight ni de scrollHeight, evitando reflows forzados.
• Métricas de fuente reales: Utiliza el motor de fuentes de Canvas del navegador para obtener anchos de glifos reales, garantizando que el resultado coincida exactamente con lo que el navegador renderizaría.
• Soporte Multilingüe: Está diseñado para ser internacional desde el primer momento. Soporta más de 12 sistemas de escritura, incluyendo CJK, Árabe, Hebreo, Tailandés, Hindi y Coreano, manejando correctamente la segmentación Unicode y el texto bidireccional.
• TypeScript-Native: Desarrollado íntegramente en TypeScript, proporciona tipos precisos para cada función y parámetro sin necesidad de paquetes externos.
• Sin dependencias de ejecución: Es una biblioteca ligera que no requiere paquetes adicionales ni polyfills, funcionando en cualquier entorno de navegador moderno.
• Handles reutilizables: Una sola llamada de preparación funciona para cualquier ancho de contenedor, permitiendo calcular diseños para móvil, tablet y escritorio con simples operaciones aritméticas.

Casos de uso de Pretext.js

Pretext.js brilla en escenarios donde la medición de texto tradicional se convierte en un cuello de botella para la experiencia del usuario:

Desplazamiento virtual (Virtual Scroll)

Renderizar listas de 10,000 elementos con alturas variables es costoso. Con Pretext.js, puedes calcular las alturas de todos los elementos sin una sola lectura del DOM, manteniendo un scroll fluido a 60fps constantes.

Interfaces de Chat con IA

En las burbujas de chat donde el texto fluye en tiempo real, Pretext.js puede pre-calcular las alturas de las respuestas antes de que terminen de renderizarse. Esto elimina por completo los saltos visuales y el movimiento brusco de la interfaz.

Flujos de contenido internacional (i18n)

Para aplicaciones que mezclan diversos alfabetos y sistemas de escritura en un solo feed virtualizado, Pretext.js ofrece una precisión milimétrica sin necesidad de casos especiales para cada idioma.

Visualizaciones creativas y animaciones

Desde efectos de escritura en arena hasta envolver texto alrededor de objetos 3D en tiempo real, la velocidad de Pretext.js permite reflows instantáneos que el CSS tradicional (como CSS Shapes) no puede igualar.

Cómo usar Pretext.js

Implementar Pretext.js en tu proyecto es un proceso sencillo que se puede resumir en tres pasos fundamentales:

1. Instalación

Puedes añadir la biblioteca utilizando tu gestor de paquetes preferido:

npm install @chenglou/pretext
# o
pnpm add @chenglou/pretext
# o
bun add @chenglou/pretext

2. Preparación del texto

El primer paso es preparar el texto junto con su configuración de fuente. Esta fase utiliza Canvas para medir los glifos una sola vez.

import { prepare, layout } from '@chenglou/pretext';

const handle = prepare(
  'Hola, pretext.js — no se requiere reflow.',
  '16px "Inter"'
);

3. Cálculo del diseño

Una vez preparado, puedes obtener las dimensiones para cualquier ancho de contenedor de forma instantánea.

const { height, lineCount } = layout(
  handle,
  400,  // ancho del contenedor en px
  24    // altura de línea en px
);

console.log(`Altura: ${height}, Líneas: ${lineCount}`);

Preguntas frecuentes (FAQ)

¿Por qué es mejor que usar el DOM? Cada vez que pides una dimensión al DOM, el navegador debe realizar un reflow síncrono, lo cual es extremadamente lento. Pretext.js evita esto usando matemáticas puras, siendo hasta 500 veces más rápido.

¿Es compatible con todos los idiomas? Sí. Gracias a que utiliza las reglas de segmentación de Unicode y el motor de Canvas, soporta sistemas complejos como el árabe, el tailandés y los caracteres CJK.

¿Requiere alguna configuración especial para fuentes personalizadas? Simplemente debes asegurarte de pasar la cadena de fuente correcta (ej. '16px "Tu Fuente"') a la función prepare. Si el navegador tiene acceso a la fuente, Pretext.js la medirá con precisión.

¿Se puede usar con React, Vue o Svelte? Sí, Pretext.js es agnóstico al framework. Puedes usarlo dentro de cualquier lógica de JavaScript para calcular dimensiones antes de actualizar el estado de tus componentes.