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

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.

(Text vychází z přednášky „CSS a sazba knih: jak jsme daleko?“. Je k dispozici také jako video a prezentace.)

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.

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 (responzivního) 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í.

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
  Stylování textu v knížkách pomocí CSS? Jasně, to dává smysl (a asi to není potřeba více vysvětlovat).
• 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 (jako margin-collapse), 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á.

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:

<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>

V tu chvíli v prohlížeči uvidíte náhled v podobě tištěné stránky:

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:

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ž (s malou pomocí polyfillu) 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-* (řízení zalamování)

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 { 
  break-inside: avoid;
}

Více: MDN, CanIUse. (V rámci vícesloupcového rozložení se vlastnostem věnuji i na Vzhůru dolů.)

Pravidlo @page (definice vzhledu stránky)

Tímto pravidlem definujeme vzhled stránky k tisku, například její velikost nebo vnější okraje:

@page {
  size: 165mm 225mm;
  margin: 20mm 20mm 25mm 20mm;
}

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 {
  @bottom-right {
    content: counter(page);
    font-size: 80%;
    font-family: 'Foro-ExtraBold';
  }
}

Vysvětlím to:

• Deklarace cílíme na stránky pojmenované pageContentMain a oblast @bottom-right (vpravo dole).
• Umístíme tam obsah v podobě počítadla stránek (content:counter(page)).

Vdovy a sirotci (widows a orphans)

Jedna ze základních typografických pouček praví, že na posledním řádku odstavce by nemělo zůstat jedno slovo (vdova) a na začátku stránky by neměl být jediný řádek textu předchozího odstavce (sirotek).

Touto deklarací tomu zamezíme:

h1, h2, h3,
p, li, blockquote {
  widows: 2;
  orphans: 2;
}

Je to podporované všude, kromě Firefoxu. CanIUse. MDN: widows, orphans.

Sazba do bloku a rozdělovníky (hyphens)

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 {
  text-align: justify;
  hyphens: auto;
}

Zarovnání do bloku (text-align:justify) 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 (hyphens) prohlížeče už ale umí (CanIUse), tak proč tolik povyku? Zakopaný pes je v tom, že kromě Safari nemají browsery odpovídající slovníky pro češtinu (CanIUse).

Tolik k základům CSS pro tisk. Takhle vypadá finální knížka v PDF:

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:

1. 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.
2. 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.
3. 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 (K).

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.

Jupí! Knížka je hotová, je krásná a má se čile k světu.