Un viejo problema
Durante décadas, medir y posicionar texto en la web ha sido una trampa silenciosa de rendimiento. Cada vez que el navegador calcula el tamaño de un párrafo o dónde cortar una línea, ejecuta una de las tareas más costosas del rendering, a saber el reflow de layout.
Ahora, el ingeniero Cheng Lou, creador de React Motion y senior engineer en Midjourney, presentó una solución radical, Pretext, una librería TypeScript de solo 15KB que mide texto multilinea hasta 600 veces más rápido que los métodos tradicionales.
El costo oculto del texto en la web
Renderizar texto parece simple, pero no lo es.
Los navegadores deben manejar:
- Emojis y modificadores de tono de piel
- Ligaduras tipográficas
- Sistemas de escritura sin espacios como el japonés o el chino
- Idiomas RTL (right-to left) como el árabe o el hebreo que se escriben de derecha a izquierda
Para medir el tamaño del texto, los desarrolladores normalmente insertan elementos invisibles en el DOM y consultan sus dimensiones. Esto provoca un reflow sincrónico, que según el equipo de Chrome DevTools puede bloquear el hilo principal entre 10 y 100 ms en móviles.
Multiplica eso por cientos de bloques de texto y obtienes:
- UI lenta
- “Web jank”
- Peor CLS (Cumulative Layout Shift)
- Penalizaciones SEO
El cambio de paradigma de Pretext
Pretext rompe con el enfoque tradicional ya que no usa el DOM ni CSS para medir texto.
Su método funciona en dos pasos:
1) Medición sin reflow
Utiliza canvas.measureText() para acceder al motor tipográfico del navegador sin activar layout.
2) Cálculo matemático puro
Con el ancho del contenedor, calcula:
- Saltos de línea
- Justificación
- Altura total
Resultado:
- Método tradicional: 500 bloques → 15–30 ms + 500 reflows
- Pretext: 500 bloques → 0.05 ms y 0 reflows
No es solo optimización, es una nueva forma de pensar el layout.
Nuevas posibilidades para interfaces y animación
Separar el layout del DOM desbloquea varios casos de uso antes imposibles.
Solución al problema histórico del SVG
Desde su lanzamiento en 2003, SVG nunca ha ofrecido una solución adecuada al wrapping automático de texto.
Con Pretext + herramientas tipográficas, ahora es posible generar texto SVG que se ajusta automaticamente.
Interfaces modernas más precisas
Permite crear:
- Chat bubbles perfectos a nivel de pixel
- Layouts tipo revista en tiempo real
- Textareas autoajustables sin hacks CSS
Renderizado en el servidor
Funciona en Node.js y edge functions:
- PDFs ultrarrápidos
- Social cards dinámicas
- Tipografía vectorial para impresión
Animaciones avanzadas
Pretext entrega coordenadas por carácter, permitiendo animaciones complejas a 60 FPS que romperían el motor de layout tradicional.
Retos y limitaciones
No todo está resuelto aún:
- Replicar exactamente el comportamiento en todos los navegadores llevará tiempo
- El texto renderizado fuera del DOM requiere reconstruir accesibilidad (screen readers, selección, etc.)
Pueden ver más demos de Pretext aquí.
Por qué importa para el futuro del frontend
Pretext llena un vacío enorme en el desarrollo web moderno. Disponible como código abierto en npm, ofrece a los desarrolladores un control total y ultrarrápido sobre el elemento más básico de la web que es el texto.
Si se adopta masivamente, podría cambiar cómo se construyen interfaces en internet durante la próxima década.
Sin embargo, lo más importante podría terminar siendo que esta librería al fin hiciera que la W3C se fijara en este problema fundamental y definiera un nuevo estándar para resolver este problema de programación tan común que afecta a tantos desarrolladores de front-end.
Deja una respuesta