Jsem od přírody zvědavý člověk, s touhou nimrat se ve věcech, které prakticky nikoho nezajímají. Jednou z mých velkých vášní je sazba textu, v čemž jsem, jak jinak, samouk. Taky mě baví dělat weby. A tak jsem tyto dva koníčky dal dohromady.
Na trhu existuje několik profesionálních nástrojů pro sazbu textu, pravděpodobně nejpoužívanější z nich je Adobe InDesign. Je to velice robusní software, který umožňuje obrovské množství nastavení a detailních úprav. Díky tomu je ale také velice těžké si všechny jeho funkce osvojit. Je tam vysoký vstupní práh a strmá křivka učení. Řekl bych, že za ta léta, co InDesign používám, jsem si osvojil jeho základní možnosti. Spousta funkcí mi ale zůstává skryta či nevyužita.
Osobně jsem zastáncem jednoduchosti až minimalismu, mám rád práci s textem v té nejčistější podobě – v plaintextu či markdownu. Přirozeně jsem proto vždycky hledal možnosti, jak dělat sazbu z těchto "čistých" zdrojových formátů. Nikdy jsem ale nenarazil na použitelné řešení. Většinou se jednalo o něco komplikovaného či proprietárního nebo ne zcela spolehlivého.
Zkoušel jsem různé převodníky formátů typu PanDoc, skripty do InDesignu, které nalily markdownový text přímo do sazby, nebo alternativní sázecí software, ale nikdy nebyl výsledek uspokojivý. Vždycky pro mě proto existovala propast mezi samotným psaním a sazbou textu pro tiskové účely.
Je to už čtvrt století, co jsem začal používat jazyky html a CSS pro tvorbu webových stránek. Ne že bych byl vyloženě odborník, konec konců i tady jsem 100% samouk, ale pěknou řádku webů už mám za sebou. Stále se snažím držet krok s moderními standardy a doučuju se nové věci, i když už mi kolikrát dochází dech, jak se vše neustále specializuje. Naštěstí je tady možnost pracovat s ai, tedy s pokročilými jazykovými modely, které učení značně urychlují.
Html je ve zkratce značkovací jazyk, kterým se formátují všechny prvky webové stránky – snažím se ho používat sémanticky, tzn. správně v něm označuju jednotlivé typy obsahu a udržuju nějakou obsahovou hierarchii. CSS je jazyk, který tomu všemu přidává nějaký styl – velikosti, barvy a přesné umístění.
Tvorba obsahu v html+CSS je poměrně zábavnou činností, jejíž předností je fakt, že okamžitě vidíte výsledek svoji práce. Dají se tady vytvářet velice precizní layouty, pracovat s typografií, spacingem, zkrátka je to činnost velice podobná knižní sazbě, pouze s tím rozdílem, že v rámci tvorby webu umím pracovat přímo se zdrojovým kódem a mohu si tak pohlídat preciznost provedení. Tak jsem si řekl, že to zkusím skloubit a vyzkouším si vysázet text skrz webovou stránku.
Nejdříve jsem udělal rychlou rešerši existujících nástrojů – pochopitelně jsem nebyl první, koho napadlo sázet knihu v html. Funkční řešení jsou aktuálně (konec roku 2024) veskrze čtyři:
pagedjs.org je udělátko, které naládujete do své html stránky a ono vám v prohlížeči obsah zobrazí po jednotlivých stránkách, tak jak se v rámci prohlížeče nativně exportuje do PDF. Čili reálně je to jen pomůcka pro vizualizaci tiskového výstupu, samotné nastavení dokumentu se provádí v rámci CSS. Mi se tohle řešení bohužel nepodařilo rozběhat.
vivliostyle.org – nástroj postavený na Chromiu (jádru prohlížeče Google Chrome), který má své GUI (grafické uživatelské rozhraní) webové rozhraní nebo CLI (rozhraní v příkazové řádce). Umožňuje interaktivní náhled stránkovaných dokumentů přímo v prohlížeči a reaguje na změny HTML a CSS v reálném čase. Bohužel ani tohle řešení se mi nepodařilo rozběhnout.
weasyprint.org – řešení postavené na Pythonu, využívá některé externí knihovny pro převod html do pdf. Je zaměřen na automatizované generování, takže spíše na věci jako faktury, doklady, vstupenky... Nemá žádné grafické rozhraní, takže pro mé účely není úplně ideální.
princexml.com – komerční řešení s vlastním vykreslovacím jádrem, ovládá se přes příkazovou řádku (čili není žádný náhled před tiskem), nicméně pro mé hrátky s textem mi nedávalo smysl kupovat licenci.
Takže jsem si nevybral a řekl jsem si, že to zkusím po svém. Můj plán byl následující – vytvořit si šablonu, která by umožňovala základní nastavení pro tiskový výstup (velikost papíru, okraje) a rovněž i typografické záležitosti jako je zarovnání na baseline grid, nebo-li na mřížku účaří – což je estetická volba, kdy všechny řádky textu drží pravidelné horizontální mřížky – je to podobné, jako byste použili linkovaný papír místo čistého. Zároveň abych si v prohlížeči mohl ještě před tiskem vše zkontrolovat ve stejné podobě, v jaké půjde výsledek na papír.
Nejdříve jsem si prohlídnul existující minimalistické CSS frameworky, ale všechny byly orientované na tvorbu klasických webových stránek, pro mé účely to byl trochu overkill, tak jsem začal "na zelené louce". Zresetoval jsem základní nastavení stránkových prvků (abych nikde neměl zbytečné defaultní okraje či odsazení) a pak jsem styloval jeden prvek za druhým, podle toho, jak mi přišly pod ruku.
Ze všeho nejdříve jsem si ale vytvořil "stránkové zobrazení" – webová stránka ve výchozím stavu zabírá celou šířku okna prohlížeče, takže jsem si nastavil rám o požadované velikosti papíru. Hned tady jsem narazil na první problém – zalamování stránek.
Zalamování stránek
CSS umožňuje díky specifikaci CSS Paged Media (která definuje, jak se má obsah rozdělovat na stránky pro tiskové výstupy) docela šikovně určit, jak a kde se stránka při tisku zalomí. Dá se takto řešit stránkování, záhlaví, zápatí, a další záležitosti typické pro tisk. To je super, ale všechny tyhle věci se týkají pouze tiskového výstupu – přímo na stránce vidět nejsou.
Takže abych mohl publikaci v prohlížeči vidět po samostatných stránkách, ne jako souvislý sloupec textu, musím buď ručně nastavit, kde bude ta která stránka končit, nebo na to pustit nějaký pokročilejší script. Na složitější řešení jsem si zatím netroufnul a začít jsem chtěl spíše s kratšími publikacemi, kde si ladím každou stránku zvlášť, zvolil jsem proto první, jednodušší cestu.
Ruku v ruce s touto problematikou přišla další potíž – správné zvolení délkových jednotek.
Délkové jednotky
Webové stránky standardně využívají několik druhů délkových jednotek. Máme tady pixely – vcelku spolehlivý způsob, který je založený na tom nejmenším zobrazitelném bodu na obrazovce. Skvělá věc, když chcete dělat věci na přesno, ale čáru přes rozpočet nám tady udělaly displeje typu Retina, které už jsou tak jemné, že musí obsah stránek zoomovat a pixelová jednotka najednou přestává dávat smysl. Další pomyslný hřebíček do rakve pixelu přidalo zvětšování a zmenšování obsahu stránky, kde se ukázalo, že šikovnější je použít jednotku jako rem, což je relativní jednotka, jejíž hodnota závisí na jiném prvku na stránce, konkrétně na výchozí velikosti písma na stránce.
Dále tady máme tradiční body, což je historická typografická jednotka odpovídající 1/72 palce – takže pro nás Evropany smýšlející v metrickém systému celkem peklo. No a samozřejmě tady máme mm a cm, což je pro účely tiskových výstupů asi ideální volba. Takže jsem si řekl, že veškeré nastavení stránky – okraje, velikost papíru, velikost písma i účaří budu nastavovat v mm. Problém je, že ne všechny internetové prohlížeče s těmito jednotkami operují správně – konkrétně Safari je zřejmě převádí na pixely a při tom dochází k zaokrouhlování, takže náhled před tiskem v prohlížeči prostě nevypadá tak, jak by měl vypadat.
V tomto případě mi přišlo nejrozumnější zůstat u metrických jednotek a zvolit pro práci prohlížeč, který s jednotkami pracuje správně, konkrétně Google Chrome.
Typografické možnosti html+CSS
V html + CSS se dají nastavit všechny základní záležitosti, jako je font, barva, velikost a řez písma, výška řádku… Co se týče pokročilejších nastavení, dá se pracovat s kerningem přes CSS vlastnost font-kerning (pokud má font v sobě kerningové páry). Dále je možnost v CSS nastavit vdovy a sirotky (přes vlastnosti orphans a widows). Zajímavá je také vlastnost text-wrap: balance, kterou se dá vyřešit osamocené slovo na řádku. Pomocí hyphens: auto se dá nastavit dělení slov na konci řádku.
S trochou snahy se dají automaticky nahrazovat i nějaké typografické prohřešky (jako nahrazení tří teček za výpustku nebo doplnění nedělitelné mezery za jednopísmennou předložku), ale k tomu už je potřeba trochy javascriptu.
Na závěr
Vysázet text v html+CSS je možné a výsledek nemusí vůbec vypadat zle. V mých pokusech jsem se dost přiblížil PDF výstupům z Indesignu. Obrovskou výhodou je skutečně přesné nastavení například pro výšky řádků, rámečky, odsazení… To vše v sázecích programech jistě zvládnete také, ale zápis v CSS, pokud ovládáte tvorbu stránek, je prostě přehlednější, blbuvzdornější a přesnější.
Sázecí programy ale obsahují řadu pokročilých funkcí, které prostě není možné nijak suplovat. Sazba knihy pomocí html a CSS je spíše taková kratochvíle, neřekl bych, že je to celkově rychlejší či efektivnější a normálnímu smrtelníkovi bych to asi nedoporučoval. Pokud jste blázen do přesných mír a rytmů v toku textu, rádi si ladíte věci na pixel přesně, může to být docela zábavné a výsledek je zcela určitě použitelný pro domácí tisk nebo export do PDF.
Celá tato anabáze ale nevyšla úplně vniveč. Nakonec jsem totiž z CSS pro sazbu textu vytvořil vlastní CSS framework, který jsem použil například pro tvorbu nové šablony internetového obchodu imago.cz