Pretext: biblioteca de layout en JS puro para medir la altura de texto sin DOM

Averiguar cuántas líneas ocupa un texto en el navegador es más complicado de lo que parece. Normalmente se usa getBoundingClientRect u offsetHeight, pero estos métodos fuerzan al navegador a recalcular el layout. El llamado reflow de layout. Desde la perspectiva del navegador, es una tarea bastante pesada.
Pretext resuelve este problema de otra manera. Obtiene directamente el ancho de los caracteres desde el motor de fuentes con measureText() de Canvas, y después el cálculo de líneas se hace solo con operaciones aritméticas puras usando valores de ancho almacenados en caché. No accede al DOM en absoluto.

const prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀', '16px Inter')
const { height, lineCount } = layout(prepared, textWidth, 20)

El rendimiento también es impresionante. Tomando como referencia la disposición de 500 textos, prepare() tarda unos 19 ms y luego layout() se mantiene en alrededor de 0.09 ms.
Dos formas de uso
Si solo necesitas la altura, basta con la combinación prepare() + layout(). Puede usarse para implementar listas virtualizadas, mantener la posición de scroll o comprobar si el texto generado por IA se desborda fuera de un botón.
Si quieres controlar directamente el layout por líneas, puedes aprovechar APIs como layoutWithLines(), walkLineRanges() y layoutNextLine(). También puede integrarse con Canvas, SVG, WebGL y renderizado del lado del servidor, y maneja layouts donde el ancho cambia en cada línea, como cuando el texto fluye al lado de una imagen.
Soporta incluso emojis, CJK y texto bidireccional como árabe. Es un proyecto de chenglou, creador de React y Relay. ⭐ 7.1k
https://github.com/chenglou/pretext​​​​​​​​​​​​​​​​

[xenoside]

Parece que al final del enlace de GitHub de más abajo se están agregando muchos %E2%80%8B (espacios de ancho cero).
js .replace(/\u200b/g, '')

[xguru]

Parece que la página https://chenglou.me/pretext/editorial-engine/ que está en la demo es la que mejor lo muestra.

[smboy86]

No es que lo use con mucho conocimiento, así que les pido disculpas de antemano.

Dicen que recalcula basándose en measureText de canvas...
No creo poder confiar en esa API.
Más exactamente, no es que no confíe en la API en sí,
sino que para dibujar el DOM de la misma manera hay que hacer coincidir perfectamente los valores de las condiciones para que la altura o la forma que se ve en el navegador
sea la misma también cuando se trae en forma de API,
y tengo una pesadilla escalofriante de no haberme dado cuenta de eso, preguntándome por qué los valores eran distintos y por qué aparecían bugs...