CSS pro tisk, aneb jak jsem sázel knihu „CSS: moderní layout“

Vzhůru dolů 23.06.2022 15:45 Přečtěte si, jak jsem se stal sazečem své vlastní knihy. Stalo se tak s pomocí webových technologií, knihovny Paged.js a několika přesně mířených ručních zásahů do výstupního PDF v Adobe Acrobatu. CSS je kam se podíváš. Proč ne v sazbě knih? CSS je všude. Vytváříme s jeho pomocí weby a webové aplikace. Fajn. Například také ale aplikace, které na první pohled vypadají jako nativní, jako třeba Spotify. Vývojáři je tvoří pomocí webových technologií, což umožňuje framework Electron. CSS to ale dopracovalo už i do vesmíru. Uživatelské rozhraní v kosmické lodi Dragon od SpaceX je dělané pomocí HTML, JS a CSS. „Houstone, máme problém. Vyskočila na nás cookie lišta.“ Pro mě je podstatné, že CSS hraje velkou roli v mé publikační činnosti. Skoro vše píšu v Markdownu a pak pomocí transformací převádím – jednou na blog Vzhůru dolů, jednou do e-booků… Populární formát pro e-knihy EPUB je jen přejmenovaný ZIP archiv, ve kterém opět najdete HTML a CSS soubory. Já mám tedy kaskádové styly skoro úplně všude. Ale co tištěné knížky? Když jsem vydával knihu „Vzhůru do webdesignu", štvalo mě, že sazečům musím kvůli tisku exportovat Word. Sazeči pak CSS opíší do vlastního systému designu v InDesignu. To se nedá automatizovat a je to náchylné na chyby. A navíc se mi to vůbec nelíbí. Schéma distribuce obsahu: Na web a do EPUB to jde dobře. Ty shluky křivek reprezentují procesy, kterým říkám „WTF 1“ a „WTF 2“. Nesrozumitelnou a podivnou činnost sazečů, jejichž vstupem je Word a výstupem tištěná kniha. CSS je přitom navrženo pro tvorbu designu a vzhledu čehokoliv, ne jen webů. Proč s ním tedy nesázet i knihy? Když vezmeme zjednodušené schéma vrstvení CSS vycházející z metodiky ITCSS, zjistíme, že se to hodí i na knížky: Text, komponenty a layout. Čirou náhodou je máme i v knížkách. Text Stylování textu v knížkách pomocí CSS? Jasně, to dává smysl . Komponenty Komponenty máme na webu. Existují i v knížkách? No jasně, třeba každý obrázek s popiskem je vlastně komponenta. V knížkách si umím představit celé design systémy, například pro vydavatelství. I tady se CSS, jako systematický zápis designu a vzhledu, hodí. Layout Layout je v knížkách přítomen na spoustě míst, v té mé třeba v předělu kapitol. I v tom je CSS samozřejmě dobré. Takže ano, CSS se obecně pro tvorbu knížek náramně hodí. Jak se ale dostaneme z prohlížeče do tiskárny? První věc, kterou potřebujeme, je umět vytvořit PDF, hlavní zdroj pro tisk čehokoliv. mPDF a další tradiční metody tvorby PDF Existuje řada knihoven, jako mPDF, které se spouští v PHP. Ty sice CSS používají, ale většinou je to specifická verze stylů, upravená autory knihovny. Specifikace CSS poměrně silně ohnutá také v knihovně mPDF. Přidali si tam nové vlastnosti , jiné odebrali a ty, které v mPDF podporují, mají všelijaká omezení. Prostě a jednoduše – abyste mPDF a podobné knihovny mohli používat, musíte se naučit styly prosazované těmito knihovnami. Znalost CSS vám stačit nebude. Celou dobu si při používání knihoven jako mPDF pak budete trošku ťukat na čelo, protože víte, že v CSS existuje řada vlastností určených vyloženě pro sázení tiskových dokumentů. Asi je vám jasné, že touto cestou jsem se vydat nechtěl. Naštěstí se na obzoru objevila naděje. Skvělý Paged.js V posledních letech se vyrojila celá řada nových knihoven, které fungují na základě webových standardů a principu polyfillu – pomocí JavaScriptu emulují podporu vlastností, které zatím prohlížeč nezvládá. Paged.js, javascriptová spása. Knihovna Paged.js je asi nejjednodušší z nich, ale vysázel jsem s její pomocí docela tlustou knížku, takže leccos zvládne. Paged.js je možné použít pro generování jakýchkoliv výstupů do PDF. Já sázím knížky, vy můžete chtít generovat reporty nebo doklady typu faktur. Knihovnu použijete buď jako NPM balíček na příkazové řádce… npm install -g pagedjs-cli pagedjs pagedjs-cli index.html -o result.pdf … nebo jako polyfill v prohlížeči. Stačí tohle přidat do svého HTML: V tu chvíli v prohlížeči uvidíte náhled v podobě tištěné stránky: Debuguji knížku v DevTools Chromu. Možnost vidět zdrojáky v DevTools prohlížeče je naprosto fantastická! Vy, kteří rádi „designujete v browseru“, víte o čem mluvím. Když Paged.js používáte jako polyfill, výstupem je PDF, které ukládáte z prohlížeče: „Save as PDF“ a je hotovo. Skoro. Nebo vlastně ještě vůbec. Asi vás nepřekvapím sdělením, že Paged.js je psaný v JavaScriptu. To je velká výhoda, protože si běžný webař může pohrát s výstupy. Pokud programování není vaše silná stránka, existuje řada hotový řešení – například pro obsah knihy nebo rejstřík. Já jsem si s těmito předpřipravenými kousky kódu vystačil. Teď už tedy víme, že máme nástroj, který nám ze standardní trojice HTML, CSS a JS dokáže vytvořit PDF. Otázka ale zní, zda si vystačíme s těmi samými kaskádovými styly, které používáme na webech. Nevystačíme. Musíme svou znalost stylů rozšířit o další, již standardizované, ale málo známé vlastnosti. CSS vlastnosti pro tisk CSS Paged Media. Tato část kaskádových stylů existuje již dlouhá léta a vcelku bez povšimnutí se pomalu ale jistě sune vpřed. Samotného mě překvapilo, že jsme se už dostali do stavu, kdy je to možné používat v praxi při sázení tiskových výstupů. Podpora vlastností pro tisk je v prohlížečích vcelku dobrá. Důležité je ale říct si, že občasné nedokonalosti nevadí. Používám totiž polyfill, který chybějící vlastnosti emuluje. I tak ale navíc tvůrci Paged.js doporučují pro tvorbu PDF využít Chrome. Teď už k samotným vlastnostem. Vlastnosti break-* Pomocí vlastností break-inside, break-after a break-before je možné zakázat, vynutit nebo jinak ovládnou rozdělení určité části textu nebo komponenty na dvě stránky. Hodí se to například pro zákaz rozdělení nadpisu na dvě stránky: h1, h2, h3 Více: MDN, CanIUse. Pravidlo @page Tímto pravidlem definujeme vzhled stránky k tisku, například její velikost nebo vnější okraje: @page V případě knihy „CSS: moderní layout“ jde o formát V8, ale můžete si zde nastavit samozřejmě i A4 nebo něco jiného. Více: MDN, CanIUse. Pravidla pro oblasti stránky Platí, že si můžeme pojmenovat určité části dokumentu. Každá stránka pak má své oblasti mimo hlavní obsahovou část, do kterých můžeme umísťovat různé servisní prvky. Zde je vidět například deklarace pro umístění stránkování: @page pageContentMain } Vysvětlím to: Deklarace cílíme na stránky pojmenované pageContentMain a oblast @bottom-right . Umístíme tam obsah v podobě počítadla stránek ). Vdovy a sirotci Jedna ze základních typografických pouček praví, že na posledním řádku odstavce by nemělo zůstat jedno slovo a na začátku stránky by neměl být jediný řádek textu předchozího odstavce . Touto deklarací tomu zamezíme: h1, h2, h3, p, li, blockquote Je to podporované všude, kromě Firefoxu. CanIUse. MDN: widows, orphans. Sazba do bloku a rozdělovníky  Sazbu do bloku jsme si ve webdesignu už zhruba před dvaceti lety zakázali, ale v knižní sazbě se vesele používá dál. Proč? Vysvětlení je jednoduché – prohlížeče neumějí automaticky rozdělovat slova, takže sazba do bloku je možná jen tam, kde slova rozdělíme ručně, takže skoro nikde. V knize mám ale toto pravidlo: p Zarovnání do bloku samozřejmě rozumím všechny prohlížeče, ale pro automatické zalamování slov je potřeba mít polyfill jako Paged.js. Na webu bych to ale polyfillem určitě nedělal, to by bylo docela peklo pro performance. Rozdělovníky prohlížeče už ale umí , tak proč tolik povyku? Zakopaný pes je v tom, že kromě Safari nemají browsery odpovídající slovníky pro češtinu . Tolik k základům CSS pro tisk. Takhle vypadá finální knížka v PDF: Layout knihy „CSS: moderní layout“. Následně stačí exportovat z prohlížeče do PDF. A je to. A je to…? PDF máme, tak šup do tiskárny Tiskárna PBtisk, kterou jsem si pro tisk knih vybral, dělá docela velké zakázky a na malé vydavatele jako jsem já nemají zase tolik času. Když jsem jim poslal své první PDF, odpověď zněla stručně a jasně: Pro ofsetový tisk naprosto nevhodné. Trošku jsem to ale očekával, to víte, že ano. PDF z prohlížeče nesplňuje požadavky tiskárny, minimálně v tom, že je v barevném režimu RGB. Tiskárna potřebuje samozřejmě CMYK. PDF je ale možné s pomocí několika úprav v placené verzi Adobe Acrobatu doladit: Převod z RGB do CMYK je možné udělat automaticky. Ano, pro některé typy publikací by to bylo nevhodné, ale pokud se s tím předem počítá u obrázků, vyjde to dobře. Ořezové značky se řeší tak, že v Paged.js nadefinujeme o 3 mm větší stránky a pak v Acrobatu přidáme 3 mm ořezové značky. Prohlížeč nám při exportu do PDF bohužel trošku pokazí barvy, takže je nutné některé automaticky nahradit. Například ze směsi CMY barev je potřeba udělat černou . Tři kroky na půl hodiny práce, na které jsem přicházel zhruba dva měsíce. A nebýt lidí jako Petr Raist Šťastný, Dan Střelec nebo Jirka Kosek, asi bych to nikdy nedokázal. Nakonec je tiskárna spokojená a pustí se do tisku. Je to vysázené pomocí HTML a CSS a je to vytištěné. Jupí! Knížka je hotová, je krásná a má se čile k světu. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .