A Biblioteca Pretext

Visao Geral

O Que E a Biblioteca Pretext?

A biblioteca Pretext e um motor de layout de texto em JavaScript/TypeScript puro criado por Cheng Lou, ex-membro da equipe principal do React e atualmente na Midjourney. Diferente das abordagens tradicionais que exigem que o navegador renderize o texto no DOM antes de medi-lo, a biblioteca Pretext divide o layout de texto em duas fases leves — tornando-a a biblioteca JavaScript de medicao de texto mais rapida disponivel.

A primeira fase da biblioteca Pretext e a preparacao. Voce chama prepare() uma vez com o texto e a fonte. A biblioteca Pretext segmenta o texto usando regras Unicode e mede a largura de cada glifo via a API measureText() do Canvas. Isso normalmente leva de 0,1 a 1ms dependendo do tamanho do texto.

A segunda fase e o layout. Voce chama layout() com a largura do container e a altura da linha. A biblioteca Pretext percorre as larguras de segmentos em cache usando aritmetica pura — sem acesso ao DOM, sem reflow DOM forcado. Uma unica chamada de layout na biblioteca Pretext leva ~0,001ms, rapida o suficiente para executar milhares de vezes por frame. O handle preparado e reutilizavel: calcule alturas para mobile, tablet e desktop a partir do mesmo handle em tres operacoes.

A biblioteca Pretext no GitHub (github.com/chenglou/pretext) — 23,6k estrelas, licenca MIT, TypeScript puro

$ npm install @chenglou/pretext

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

const prepared = prepare('Your text', '16px Inter')
const { height, lineCount } = layout(prepared, 400, 24)

Comparacao de Desempenho

Biblioteca Pretext vs Medicao DOM

A medicao DOM tradicional cria elementos invisiveis, renderiza o texto, le a altura calculada e remove o elemento. A biblioteca Pretext elimina todo esse ciclo. Veja como a biblioteca Pretext se compara as abordagens tradicionais.

API

Referencia da API da Biblioteca Pretext

A biblioteca Pretext expoe uma API pequena e focada. Cada funcao na biblioteca Pretext tem um proposito especifico — preparacao ou layout. Aqui esta a referencia completa das funcoes.