Repolode
Enviar
chenglou

chenglou/pretext

Biblioteca pura de JavaScript/TypeScript que mide y distribuye texto multilínea sin provocar un reflujo del DOM; permite renderizarlo en DOM, Canvas o SVG.

Ver en GitHubSitio web
Estrellas
50,839
Forks
2,761
Issues abiertos
65
Último commit
hace 5 días

¿Qué es?

Pretext mide texto multilínea y calcula los saltos de línea con JavaScript o TypeScript puro. Así, el código de diseño puede obtener la altura de un párrafo o sus líneas individuales sin leer `getBoundingClientRect` ni `offsetHeight`. Esas lecturas del DOM obligan al navegador a recalcular el diseño de la página, lo que resulta costoso. Pretext usa las mediciones de texto de Canvas del navegador como fuente de anchuras y aplica su propia lógica para calcular los saltos de línea.

El flujo básico consta de dos llamadas: `prepare()` analiza y mide el texto una vez para una fuente determinada, y `layout()` devuelve `height` y `lineCount` para cualquier anchura máxima y altura de línea, usando solo operaciones aritméticas sobre las anchuras almacenadas en caché. Las API de nivel inferior devuelven líneas individuales, anchuras de línea o cursores para diseños manuales, como burbujas ajustadas al contenido, texto que fluye alrededor de una imagen o texto limitado con puntos suspensivos. Una API enriquecida para contenido en línea permite combinar fuentes, fragmentos de código y elementos en línea, como imágenes o chips.

La biblioteca admite los modos de espacio en blanco `normal` y `pre-wrap`, el ajuste de palabras `keep-all` y el espaciado entre letras. Requiere un navegador compatible con la medición de texto de Canvas 2D, las secuencias de escape de propiedades Unicode y `Intl.Segmenter`. Fuera del navegador, es necesario proporcionar un medidor personalizado con `OffscreenCanvas`.

Funciones clave

  • 01Calcula la altura y el número de líneas de un párrafo sin provocar un reflujo del DOM, mediante `prepare()` y `layout()`.
  • 02Devuelve líneas individuales, anchuras de línea y cursores para diseñar manualmente.
  • 03Incluye una API enriquecida para contenido en línea que permite combinar fuentes, fragmentos de código y elementos en línea.
  • 04Admite `pre-wrap`, el ajuste de palabras `keep-all` y el espaciado entre letras.
  • 05Renderiza los resultados en DOM, Canvas o SVG.

Casos de uso

  • Virtualizar listas largas al conocer la altura de cada elemento antes de renderizarlo.
  • Ajustar burbujas de chat a la anchura de su línea más larga.
  • Hacer que el texto fluya alrededor de imágenes flotantes, con líneas de distinta anchura.
  • Comprobar durante el desarrollo que las etiquetas de los botones no ocupen una segunda línea.

Inicio rápido

  1. 1

    Instala el paquete desde npm

    npm install @chenglou/pretext
  2. 2

    Importa prepare y layout y, a continuación, mide la altura de un párrafo sin tocar el DOM

Antes de usarlo

  • La licencia figura como NOASSERTION, por lo que las condiciones de uso no están claras y conviene verificarlas antes de adoptar el paquete.
  • La medición depende del motor de fuentes del navegador, así que los resultados exactos varían según las fuentes disponibles.

Temas

#text-layout#text-measurement#typescript#canvas#reflow#typography

Preguntas frecuentes

¿Qué es pretext?
Biblioteca pura de JavaScript/TypeScript que mide y distribuye texto multilínea sin provocar un reflujo del DOM; permite renderizarlo en DOM, Canvas o SVG. Pretext mide texto multilínea y calcula los saltos de línea con JavaScript o TypeScript puro. Así, el código de diseño puede obtener la altura de un párrafo o sus líneas individuales sin leer `getBoundingClientRect` ni `offsetHeight`. Esas lecturas del DOM obligan al navegador a recalcular el diseño de la página, lo que resulta costoso. Pretext usa las mediciones de texto de Canvas del navegador como fuente de anchuras y aplica su propia lógica para calcular los saltos de línea.
¿pretext es gratuito? ¿Qué licencia tiene?
pretext es open source bajo la licencia Other. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿pretext sigue mantenido?
Mantenimiento activo. El último commit de pretext fue el 15 oct 2026.
¿Para qué puedo usar pretext?
Virtualizar listas largas al conocer la altura de cada elemento antes de renderizarlo. Ajustar burbujas de chat a la anchura de su línea más larga. Hacer que el texto fluya alrededor de imágenes flotantes, con líneas de distinta anchura. Comprobar durante el desarrollo que las etiquetas de los botones no ocupen una segunda línea.
¿Cómo se instala pretext?
Instala el paquete desde npm: npm install @chenglou/pretext Importa prepare y layout y, a continuación, mide la altura de un párrafo sin tocar el DOM
¿Dónde consigo pretext?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/chenglou/pretext

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados