Pretext.JS

Pretext.js – Rewolucyjny silnik pomiaru tekstu w Pure JS

Pretext.js to nowoczesna biblioteka JavaScript i TypeScript zaprojektowana z myślą o ekstremalnej wydajności podczas pracy z tekstem. Tradycyjne metody renderowania tekstu w przeglądarce opierają się na technologii sprzed trzech dekad, co często prowadzi do problemów z płynnością interfejsu. Pretext.js całkowicie zmienia to podejście, mierząc i pozycjonując tekst wielowierszowy wyłącznie poprzez operacje arytmetyczne.

Używając Pretext.js, deweloperzy mogą zapomnieć o wymuszonym synchronicznym reflowie. Biblioteka ta nie wykonuje żadnych odczytów DOM podczas obliczania układu, co sprawia, że jest błyskawiczna przy pierwszym wywołaniu i niemal natychmiastowa przy każdym kolejnym.

What's Pretext.js

Pretext.js to lekka biblioteka typu "zero-dependency", która służy do obliczania wymiarów tekstu bez dotykania drzewa DOM. W świecie nowoczesnego programowania front-endowego, każde wywołanie funkcji takich jak getBoundingClientRect() czy scrollHeight zmusza przeglądarkę do wstrzymania wykonywania skryptu i przeliczenia stylów całego dokumentu. Pretext.js omija ten problem, przenosząc logikę układu do czystej arytmetyki.

Dzięki wykorzystaniu interfejsu Canvas do wstępnego pomiaru glifów, Pretext.js tworzy wydajny cache, który pozwala na natychmiastowe obliczanie wysokości tekstu i podziału linii dla dowolnej szerokości kontenera. Jest to rozwiązanie idealne dla projektów, gdzie wydajność jest priorytetem, a liczba elementów tekstowych idzie w tysiące.

Features – Kluczowe zalety Pretext.js

• Zero odczytów DOM: Po wstępnym przygotowaniu tekstu, każde wywołanie funkcji layout() to czysta matematyka. Brak wymuszonego reflowu oznacza brak spadków klatek (jank).
• Prawdziwe metryki czcionek: Pretext.js wykorzystuje silnik Canvas measureText(), dzięki czemu wyniki są identyczne z tym, co faktycznie wyrenderowałaby przeglądarka.
• Wsparcie wielojęzyczności: Biblioteka natywnie obsługuje ponad 12 systemów pisma, w tym CJK (chiński, japoński, koreański), arabski, hebrajski, tajski i hindi, wspierając poprawne segmentowanie Unicode.
• TypeScript-first: Całość została napisana w TypeScript, co zapewnia precyzyjne typowanie bez konieczności instalowania dodatkowych paczek @types.
• Wydajność: Możliwość przeliczenia układu dla 1000 bloków tekstu w czasie około 0.05ms – to nawet 500 razy szybciej niż tradycyjne podejście oparte na DOM.
• Brak zależności: Pretext.js nie wymaga zewnętrznych pakietów ani polyfilli, opierając się wyłącznie na standardowych API przeglądarki.

How to Use Pretext.js

Implementacja Pretext.js w projekcie jest niezwykle prosta i zamyka się w kilku krokach. Proces ten dzieli się na fazę przygotowania i fazę obliczeń.

Krok 1: Instalacja

Możesz zainstalować bibliotekę za pomocą ulubionego menedżera pakietów:

npm install @chenglou/pretext
# lub
pnpm add @chenglou/pretext
# lub
bun add @chenglou/pretext

Krok 2: Przygotowanie tekstu (prepare)

Funkcja prepare jest wywoływana raz dla danej pary tekst + czcionka. Wykorzystuje ona Canvas do zmierzenia segmentów tekstu.

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

const handle = prepare(
  'Witaj w Pretext.js – wydajny pomiar tekstu bez reflowu.',
  '16px "Inter"'
);

Krok 3: Obliczanie układu (layout)

Teraz możesz błyskawicznie obliczyć wysokość dla dowolnej szerokości kontenera bez obciążania przeglądarki.

const { height, lineCount } = layout(
  handle,
  400,  // szerokość kontenera w px
  24    // wysokość linii (line-height) w px
);

console.log(`Wysokość: ${height}, Liczba linii: ${lineCount}`);

Use Case – Gdzie stosować Pretext.js?

Pretext.js znajduje zastosowanie wszędzie tam, gdzie tradycyjny DOM staje się wąskim gardłem wydajnościowym:

1. Wirtualne listy (Virtual Scrolling): Płynne przewijanie 10,000 elementów o zmiennej wysokości bez ani jednego odczytu DOM podczas scrollowania.
2. Interfejsy czatów AI: Przeliczanie wysokości bąbelków czatu dla strumieniowanych odpowiedzi w czasie rzeczywistym, co eliminuje skakanie treści (layout shift).
3. Zaawansowana typografia: Układanie tekstu wokół nieregularnych kształtów (np. przeszkód w formie kul), co jest niemożliwe do osiągnięcia za pomocą standardowego CSS Shapes w sposób dynamiczny.
4. Edytory kodu i tekstu: Szybkie renderowanie dużych bloków tekstu z zachowaniem precyzyjnych odstępów.
5. Aplikacje wielojęzyczne: Obsługa mieszanych skryptów (np. łacina i arabski) w jednym widoku z gwarancją poprawnego układu.

FAQ

Czy Pretext.js zastępuje renderowanie tekstu przez CSS? Nie, Pretext.js służy do obliczania wymiarów i układu tekstu w JavaScript. Po uzyskaniu wyników, nadal używasz standardowych metod do wyświetlenia tekstu, ale dzięki danym z Pretext, wiesz dokładnie, ile miejsca zarezerwować.

Czy muszę wywoływać prepare() przy każdej zmianie szerokości okna? Nie. Funkcja prepare() jest wywoływana raz dla danej treści i czcionki. Ten sam uchwyt (handle) może być używany wielokrotnie w funkcji layout() dla różnych szerokości (np. dla wersji mobilnej i desktopowej).

Dlaczego Pretext.js jest szybszy od getBoundingClientRect? Ponieważ getBoundingClientRect wymusza na przeglądarce wykonanie pełnego cyklu renderowania (style, layout, paint). Pretext.js omija ten proces, wykonując jedynie proste operacje matematyczne na wcześniej pobranych szerokościach glifów.

Czy biblioteka wspiera TypeScript? Tak, Pretext.js jest napisany w TypeScript i oferuje pełne wsparcie dla typów bez potrzeby instalacji dodatkowych definicji.