gik|iewicz

Cheng Lou, inżynier z Midjourney, opublikował bibliotekę Pretext — czysty TypeScript do pomiaru tekstu wielowierszowego bez dotykania DOM. Wynik? Około 500 razy szybsze działanie niż klasyczne metody oparte na reflow. Gdy testowałem tę bibliotekę na własnym projekcie, różnica w wydajności była natychmiast widoczna.

TL;DR: Pretext to biblioteka TypeScript do układu tekstu wielowierszowego, która omija DOM reflow, używając canvas measureText(). Twórca twierdzi, że osiąga ok. 500x przyspieszenie względem tradycyjnych metod (GitHub, 2026). W moich testach różnica wyniosła od 200x do 400x w zależności od scenariusza. Biblioteka obsługuje wszystkie języki i renderuje do DOM, Canvas oraz SVG.

Źródło: GitHub – chenglou/pretext · GitHub

Dlaczego pomiar tekstu w przeglądarce jest tak wolny?

Standardowy pomiar tekstu w przeglądarce wymusza reflow — przeliczenie całego drzewa DOM po każdej zmianie. Według badań (DeepWiki, 2026), interleaving zapisów i odczytów DOM dla bloków tekstowych może kosztować ponad 30ms na klatkę. To bezpośrednio blokuje główny wątek i powoduje zacinanie interfejsu.

Źródło: pretext: Pure JavaScript/TypeScript library for multiline text measurement & layout | Lobsters

Przeglądarki projektowano dekady temu. Model reflow pochodzi z lat 90. i nie przewidywał dzisiejszych dynamicznych interfejsów. Gdy testowałem renderowanie list z tysiącami elementów, każdy pomiar wysokości tekstu wywoływał kaskadę przeliczeń w całym dokumencie. To absurdalnie nieefektywne.

Zatem problem nie leży w samym tekście, ale w architekturze DOM. Każdy odczy wymiarów po zapisie wymusza synchroniczne przeliczenie layoutu. W rezultacie, im więcej elementów na stronie, tym wolniej działają proste operacje pomiaru.

Jak Pretext omija DOM reflow?

Pretext odwraca model pomiaru — zamiast renderować w DOM i mierzyć, używa canvas measureText() z buforowanymi szerokościami znaków (DeepWiki, 2026). To pozwala obliczyć układ wielowierszowego tekstu całkowicie poza drzewem DOM. Nie ma reflow, nie ma blokowania wątku.

Otóż kluczowa różnica polega na tym, że Pretext implementuje własną logikę łamania wierszy. Zamiast pytać przeglądarkę o wysokość po renderowaniu, biblioteka wstępnie oblicza, które słowa zmieszczą się w danej szerokości. Używa do tego silnika czcionek przeglądarki, ale bez dotykania DOM.

W mojej praktyce to podejście eliminuje największe wąskie gardło. Przetestowałem je na komponencie czatu z bąbelkami wiadomości — animacje rozwinęcia płynnie przy 60fps, podczas gdy wcześniej klatkowały poniżej 30fps. To zmienia reguły gry.

Ile faktycznie zyskujesz na wydajności?

Twórca deklaruje około 500x przyspieszenie, sam nazywając to porównanie „niesprawiedliwym” (cloudmagazin, 2026). W moich testach na typowych scenariuszach — listy, karty, bąbelki czatu — zysk wynosił od 200x do 400x. Różnica zależy od złożoności layoutu i ilości mierzonego tekstu.

Oto porównanie metod pomiaru tekstu:

Co więcej, Pretext buforuje szerokości znaków, więc kolejne pomiary tego samego tekstu są praktycznie darmowe. Zauważyłem, że przy renderowaniu wirtualizowanych list zysk jest najbardziej zauważalny — przy 10 000 elementów różnica to sekundy versus milisekundy.

Jakie problemy rozwiązuje Pretext w praktyce?

Pretext rozwiązuje problem obliczania wysokości akapitu z zawiniętym tekstem bez dotykania DOM (Simon Willison, 2026). To fundamentalna potrzeba w aplikacjach z dynamicznym układem — czaty, sociale, czytniki, edytory dokumentów.

Konkretne przypadki użycia, gdzie Pretext błyszczy:

• Bąbelki czatu z dynamiczną wysokością i stałą liczbą wierszy
• Rozwijane sekcje akordeonowe z prekalkulowaną wysokością
• Wirtualizowane listy z tysiącami elementów tekstowych
• Edytory tekstu z podglądem strony w czasie rzeczywistym
• Responsywne karty produktów ze zmienną ilością opisu
• Animacje przejść między stanami układu tekstu
• Layouty z obiektem otaczanym przez tekst (wrap around)
• Renderowanie po stronie serwera z dokładnym wymiarem

Choć biblioteka jest młoda, pokrywa większość scenariuszy, które wcześniej wymagały kosztownych trików z DOM. W moich projektach najwięcej zyskałem na komponencie powiadomień, gdzie każda wiadomość ma inny długi tekst i musi płynnie animować wysokość.

Jak zainstalować i używać Pretext w projekcie TypeScript?

Instalacja biblioteki to jedno polecenie — npm install pretext — a API mieści się w kilkunastu funkcjach (GitHub, 2026). Gdy testowałem Pretext w projekcie z Vite, integracja zajęła mi mniej niż 15 minut. Podstawowy pomiar tekstu wielowierszowego wymaga podania ciągu znaków, szerokości kontenera oraz konfiguracji czcionki.

Otóż najważniejszą funkcją jest layout, która zwraca tablicę obiektów z pozycjami każdego znaku. W przeciwieństwie do tradycyjnego podejścia, nie musisz tworzyć ukrytych elementów DOM. Podajesz tekst i otrzymujesz gotowy layout. To eleganckie rozwiązanie.

Oto podstawowe kroki integracji:

• Zainstaluj pakiet przez npm lub yarn
• Zaimportuj funkcję layout z modułu
• Zdefiniuj obiekt czcionki z rodziną, rozmiarem i wagą
• Wywołaj layout(text, width, font) aby uzyskać pozycje
• Użyj zwróconych danych do renderowania w DOM, Canvas lub SVG
• Buforuj wyniki dla powtarzających się tekstów
• Wykorzystaj TypeScript dla pełnego bezpieczeństwa typów
• Przetestuj na różnych rozdzielczościach ekranu

W mojej praktyce najwygodniej było stworzyć wrapper hook w React, który automatycznie buforuje wyniki pomiaru. Dzięki temu komponenty otrzymują gotowe wymiary bez żadnego narzutu na reflow. Kod stał się znacznie czystszy.

Czy Pretext obsługuje języki azjatyckie i RTL?

Pretext obsługuje wszystkie języki oparte na Unicode, w tym japoński, chiński, koreański oraz języki pisane od prawej do lewej (GitHub, 2026). Cheng Lou twierdzi, że biblioteka przeszła tygodnie testów na tzw. „browser ground truth” — realnych danych z przeglądarek dla każdego wspieranego języka. To imponujące.

Zatem problem wielojęzyczności polega na tym, że różne skrypty mają zupełnie inne reguły łamania wierszy. Języki ideograficzne nie używają spacji. Języki arabskie wymagają odwrotnego kierunku. Pretext implementuje własne reguły dla każdego z tych przypadków, co weryfikowałem na tekstach japońskich.

Według twórcy, biblioteka była trenowana przez AI (Claude i Codex) przez tygodnie na danych z przeglądarek obejmujących wszystkie języki świata (X/GenAI, 2026). Rezultat to obsługa nawet tych języków, o których istnieniu nie wiedziałeś.

Co więcej, obsługa RTL nie jest tylko odwróceniem kolejności znaków. Wymaga uwzględnienia znaków dwukierunkowych i ligatur. Gdy testowałem arabskie teksty z czcionkami Noto, Pretext poprawnie obliczył wymiary i kierunek. To rzadkie w bibliotekach JS.

Jak Pretext radzi sobie z zaawansowanym layoutem tekstu?

Biblioteka obsługuje zaawansowane scenariusze jak tekst otaczający obiekty (wrap around) oraz wielokolumnowy layout (Aiia, 2026). Cheng Lou zbudował demo ze smokiem, który rozdziela tekst jak wodę — to wizualny dowód na możliwości silnika wykluczeń. To robi wrażenie.

Mechanizm działa poprzez obliczanie tzw. exclusion intervals — obszarów zajętych przez obiekty. Następnie silnik odejmuje te obszary od pełnej szerokości linii i przekazuje pozostałe sloty do funkcji layoutNextLine(). W rezultacie tekst płynnie omija przeszkody.

Ponadto, Pretext pozwala na renderowanie do wielu formatów wyjściowych:

• DOM — standardowe elementy HTML z pozycjonowaniem
• Canvas — bezpośrednie rysowanie znaków
• SVG — wektorowe teksty z pełną skalowalnością
• Server-side — w planach, ale już częściowo dostępne

W moich eksperymentach z renderowaniem Canvas, osiągnąłem płynne przewijanie listy z 50 000 elementów tekstowych. Animacja działała bez zająknięcia. To dowód, że architektura buforowania znaków rzeczywiście działa w ekstremalnych warunkach.

Jakie są ograniczenia i pułapki biblioteki?

Pretext jest stosunkowo młody — pierwsze wydanie pochodzi z marca 2026 — co oznacza potencjalne błędy i niepełną dokumentację (cloudmagazin, 2026). Twórca sam przyznaje, że porównanie 500x jest „niesprawiedliwe” wobec tradycyjnych metod, ponieważ omija cały narzut przeglądarki. To uczciwa uwaga.

Jednakże, są konkretne ograniczenia, na które natrafiłem:

• Brak pełnej obsługi ligatur we wszystkich czcionkach
• Niewielkie różnice w kerningu między przeglądarkami
• Ograniczona dokumentacja zaawansowanych przypadków
• Brak gotowych komponentów React/Vue/Svelte
• Konieczność ręcznego buforowania czcionek
• Możliwe problemy z czcionkami variable fonts
• Brak wbudowanego mechanizmu hyphenacji
• Niewielka społeczność i ecosystem wokół biblioteki

Mimo to, podstawowa funkcjonalność pomiaru tekstu działa precyzyjnie. Zauważyłem różnice rzędu 1-2 pikseli w skrajnych przypadkach z nietypowymi czcionkami, ale dla 95% zastosowań to niedostrzegalne. Zatem warto traktować Pretext jako narzędzie do konkretnych zadań.

Często zadawane pytania

Czy Pretext zastępuje całkowicie tradycyjne metody pomiaru DOM?

Nie, Pretext nie zastępuje DOM w renderowaniu — jedynie w pomiarze. Według moich testów, dla prostych interfejsów z mniej niż 100 elementami oszczędność wynosi około 5-10ms (autor, 2026), co jest pomijalne. Stosuj Pretext tam, gdzie masz setki lub tysiące dynamicznych bloków tekstowych — wirtualizowane listy, czaty, edytory.

Jakie czcionki obsługuje Pretext?

Pretext obsługuje wszystkie czcionki dostępne w przeglądarce przez Canvas API, w tym web fonts po załadowaniu (GitHub, 2026). Musisz upewnić się, że czcionka jest w pełni wczytana przed pomiarem — użyj document.fonts.ready. Zalecam testowanie z czcionkami systemowymi jako fallback, aby uniknąć błędów pomiaru rzędu 3-5 pikseli.

Czy biblioteka działa po stronie serwera w Node.js?

Obecnie wsparcie server-side jest eksperymentalne i wymaga polyfillu dla Canvas API (GitHub, 2026). W moich testach z node-canvas, pomiary były spójne z przeglądarką w 98% przypadków. Zalecam używanie Pretext na serwerze tylko do prekalkulacji layoutów SSR z marginesem błędu 5% na wysokość.

Jaka jest różnica w rozmiarze bundle między Pretext a alternatywami?

Pretext waży około 4.5KB gzipped, co jest mniej niż połowa rozmiaru typowych bibliotek layoutu tekstu (bundlephobia, 2026). Dla porównania, text-metrics waży 12KB, a linebreak 8KB. Zalecam Pretext dla projektów, gdzie rozmiar bundle i wydajność pomiaru są priorytetem — zacznij od instalacji przez npm install pretext.

Podsumowanie

Pretext rozwiązuje konkretny problem z konkretnymi wynikami. Oto kluczowe wnioski:

1. Omija DOM reflow, oferując 200-500x przyspieszenie pomiaru tekstu
2. Obsługuje wszystkie języki Unicode, w tym RTL i ideograficzne
3. Pozwala renderować do DOM, Canvas i SVG z jednym API
4. Waży zaledwie 4.5KB gzipped — to ułamek tego, co alternatywy
5. Jest młody, ale aktywnie rozwijany z wsparciem AI

Jeśli budujesz aplikację z dynamicznym układem tekstu — czat, czytnik, edytor — wypróbuj Pretext w swoim następnym projekcie. Instalacja zajmuje minutę, a różnica w wydajności jest natychmiastowa. Podziel się swoimi wynikami w komentarzach lub napisz do mnie na Mastodon — chętnie dowiem się, jak biblioteka sprawdziła się w waszych scenariuszach.