Pretext — banální otázka, která mění možnosti práce s typografií

V roce 2006 napsal designér a zakladatel studia iA Oliver Reichenstein, že 95 % informací na webu tvoří psaný jazyk. Dnes by takové tvrzení obstálo jen těžko. Stále větší část informací totiž nesou fotografie, videa nebo interaktivní prvky.

Hlavní myšlenka jeho textu ale zůstává aktuální. Typografie je jedním ze základů digitální zkušenosti a zaslouží si proto pozornost. A někdy se má smysl kvůli tomu vracet se i ke zdánlivě starým otázkám.

Nový nástroj pro starý problém

Na konci března publikoval softwarový inženýr Cheng Lou knihovnu s názvem Pretext. Lou dříve působil v Metě, kde pracoval například na Reactu nebo Messengeru, dnes je součástí Midjourney. Pretext řeší zdánlivě jednoduchou otázku. Kolik místa zabere text? A odpověď na ni dostane ještě předtím, než se vykreslí v prohlížeči.

V praxi dlouho převládal jednoduchý postup. Chcete znát rozměry textu? Vložte ho do stránky, nechte prohlížeč spočítat layout a pak měřte. Funguje to, ale není to zadarmo. U dlouhých seznamů, chatů, rozsáhlých animací nebo jiných dynamických rozhraní to vede k opakovaným přepočtům layoutu, vyšší výpočetní náročnosti a pomalejší odezvě.

Pretext tenhle postup obrací. Nečeká, až se text vykreslí na stránce. Snaží se dopředu spočítat, jak se zalomí a kolik prostoru bude potřebovat. Nenahrazuje tím CSS ani prohlížeč. Umožňuje ale pracovat s textem přesněji a dynamičtěji než dosud.

Proč to zatím nešlo lépe?

S tím souvisí širší problém webové typografie. Prohlížeče text zobrazují dobře, ale pořád s ním neumějí pracovat tak svobodně a předvídatelně, jak bychom někdy potřebovali. Je to vidět třeba na odstavcové sazbě. Web běžně nenabízí kvalitu, jakou znáte z dobře vysázených knih.

Běžná webová sazba většinou láme jednotlivé řádky podle dostupného prostoru a nehledá optimální rozložení mezer v rámci celého odstavce. U zarovnání do bloku pak prohlížeč vezme hotový řádek a volné místo rozprostře hlavně mezi slova.

Výsledkem mohou být nepřirozeně velké mezery, takzvané řeky, které opticky narušují rytmus sazby.

Kvalitnější sazba přistupuje k odstavci jako k jednomu celku. Hledá vhodnější místa zalomení a rozkládá mezery tak, aby text působil vyrovnaněji a přirozeněji.

Webové prohlížeče se to samozřejmě snaží napodobit. CSS dnes nabízí vlastnosti text-wrap: balance nebo text-wrap: pretty. První pomáhá vyrovnat řádky hlavně u nadpisů a kratších textů. Druhá se snaží zlepšit sazbu odstavců, například omezit krátké poslední řádky.

Je to krok správným směrem, ale stále daleko od sazby, která promýšlí celý odstavec najednou a řeší rytmus mezer mezi slovy, písmeny i celkovou kompozici textu.

Co dělá Pretext jinak?

Pretext na to jde jinak. V jistém smyslu se řídí příslovím „Dvakrát měř, jednou řež“. Nejdřív text připraví, rozdělí a změří přes canvas, tedy kreslicí vrstvu prohlížeče. Teprve potom nad připravenými daty rychle počítá, jak se text zalomí při konkrétní šířce.

Náročná část výpočtu proběhne jen jednou pro daný text a nastavení. Další přepočty a práce jsou díky tomu výrazně rychlejší.

Kde to použít?

Pretext není univerzálním řešením všech problémů současného vykreslování textu. Ukazuje ale zajímavý směr. Největší smysl dává tam, kde obsah dynamicky ovlivňuje chování rozhraní, například v chatech, feedech, editorech nebo notifikacích.

Tím, že dokáže počítat layout textu bez opakovaného měření hotové stránky, otevírá prostor i pro experimentálnější typografii. Od textu obtékajícího objekty až po hry složené z písmen.

Možná jste v minulých týdnech na desítky podobných příkladů narazili.

• Ukázky přímo od Cheng Lou
• Autíčka (video)
• Drak (funkční ukázka)
• Hrad (video)

Jaké má limity?

Pretext není nový CSS engine ani náhrada stále nedokonalých webových prohlížečů. U některých fontů, jazyků nebo pokročilejších typografických vlastností se dokonce výsledky mohou od skutečného vykreslení mírně lišit.

Samostatnou kapitolou zůstává také přístupnost. Měření textu mimo stránku samo o sobě ničemu nevadí. Riziko vzniká až ve chvíli, kdy někdo začne skutečný obsah vykreslovat mimo běžné HTML. Třeba celý do canvasu nebo rozseká odstavec do velkého množství HTML značek, kterým chybí původní sémantický význam. Pro uživatele asistivních technologií to znamená krok zpět.

Co si z toho odnést?

Pretext je dnes knihovna fungující mimo samotné webové prohlížeče. Ukazuje ale směr, kterým by se časem mohly vydat i prohlížeče a CSS. Tedy k lepším nativním nástrojům pro práci s písmem. Designérům to přinese lepší nástroje pro kvalitnější typografii. Uživatelům zase lepší uživatelský zážitek.