Pretexto: Calcular el tamaño del texto con matemáticas, sin provocar reflujo del DOM

¿Qué ha sucedido?

El blogger tecnológico chino Baoyu (@dotey) compartió una animación interactiva de “dragón” hecha con Pretext, diciendo “es bastante genial”. Pretext es una biblioteca de medición de texto en TypeScript recién publicada por Cheng Lou, quien anteriormente trabajó en el equipo de React y en Midjourney.

¿Cómo se implementó técnicamente?

Idea central: calcular matemáticamente, sin que el navegador lo haga.

• Método tradicional: insertar el texto en el DOM y medir su ancho y alto. El problema es que esto provoca un reflujo de layout, lo que es muy lento.
• Método de Pretext: calcular directamente en JS cuántas líneas de texto habrá y cuán ancho será cada línea, sin que el navegador participe en absoluto.

¿Cómo garantizar que los cálculos sean precisos?

• Usar Claude y Codex para generar la lógica de cálculo, y luego comparar automáticamente con los resultados de renderizado real del navegador.
• Se probaron una serie de combinaciones de idiomas, fuentes y anchos de contenedores.
• La oficialidad dice que en escenarios comunes es aproximadamente 500 veces más rápido que la medición tradicional del DOM.

¿Qué problemas se han resuelto?

• Se han considerado textos bidireccionales (como árabe y hebreo, que se leen de derecha a izquierda) y emojis, que suelen presentar problemas.

¿Por qué es importante?

Las páginas web con mucho texto a menudo se ven obstaculizadas por los cálculos de diseño. Las siguientes situaciones son las más problemáticas:

• Desplazamiento virtual (se necesita saber de antemano cuán alto es cada contenido).
• Flujo de columnas (como en Pinterest, se necesita saber cuán grande es cada bloque para organizar).
• Diseño responsivo complejo.

Mi evaluación:

• Evitar el camino del DOM puede reducir el retraso, y el límite de fotogramas será más alto.
• Cheng Lou ha trabajado anteriormente en React y Midjourney, por lo que su capacidad técnica no debería ser un problema.
• Si la comunidad aporta más datos sobre fuentes e idiomas, podría cambiar la forma en que los frameworks frontend manejan el texto. Pero esto depende de si hay personas que mantengan el proyecto en el futuro.

Reacciones tempranas

• Alguien en Twitter dijo que la demostración alcanzó 120fps.
• Algunos creen que esto podría afectar el diseño a nivel de framework.
• Pero el proyecto acaba de ser lanzado, y está lejos de un uso masivo. Habrá que ver la contribución de la comunidad a futuro.

¿Cómo evaluar esto?

Resumen: Este es un proyecto temprano, pero la idea es interesante. Aún es pronto para entrar, siendo más adecuado para aquellos que hacen frameworks o infraestructura frontend. Si estás trabajando en desplazamiento virtual, flujo de columnas o páginas con mucho contenido, puedes probar a pequeña escala primero, para ver si es preciso y estable en tu entorno de fuentes e idiomas, y confirmar que no hay problemas antes de escalar su uso.