CSS je skoro všude. Pomocí CSS tvořím weby, připravuji jejich tiskové verze, sázím e-booky a menší PDF… Můj odvěký sen ale byl dostat se s CSS také do tiskárny při sazbě pořádné knihy. Jak to dopadlo? To se dozvíte v téhle přednášce.

1. 11. 5. 2022
Martin Michálek
@machal
CSS a sazba knih:
jak jsme daleko?

2. CSS je všude.

3. E-bookový formát EPUB je jen přejmenovaný ZIP archiv, ve kterém
najdete HTML a CSS soubory.

4. Spotify a další aplikace jsou dělané mimojiné pomocí HTML a CSS, což
umožňuje framework Electron.

5. Rozhraní v kosmické lodi Dragon od SpaceX je také dělané pomocí HTML, JS a CSS.

6. A co knížky?

7. Text
Komponenty
Layout
Toto je zjednodušená struktura vrstvení CSS vycházející z metodiky ITCSS.
Hodí se to na knížky?

8. Text
Komponenty
Layout
Stylování textu v knížkách pomocí CSS? Jasně, to dává smysl.

9. Text
Komponenty
Layout
Komponenty máme na webu. Hodí se i v knížkách? No jasně. Vlastně si tam umím
představit celé design systémy, například pro vydavatelství. I tady se CSS hodí.

10. Text
Komponenty
Layout
Layout je v knížkách na spoustě míst. I v tom je CSS samozřejmě dobré.
Jen prosím nepoužívejte floaty na layout! :)

11. Markdown

12. Markdown používám jako hlavní formát pro psaní textů. Publikovat z něj to do HTML/
CSS na blog je jednoduché, do e-booku taky. Ale co do tištěné knížky?

13. Proces
Markdown
Web
EPUB
Tisk
Štvalo mě, že sazečům musím kvůli tisku exportovat Word s tím, že CSS opíší do
vlastního systému v InDesignu. To se nedá automatizovat a je to náchylné na chyby.

14. Alternativy jako mPDF, které se spouští v PHP sice CSS používají, ale většinou je
to speci
fi
cká verze CSS, upravená autory knihovny.

15. Paged.js je zajímavější. Patří do skupiny nástrojů, které jsou určené k tvorbě PDF
pro tisk a zároveň stavěné na prohlížečích a webových technologiích.

16. Je to JS poly
fi
ll, který v prohlížeči rozchodí CSS vlastnosti, které jsou ve webových
standardech, ale zatím nemají podporu v prohlížečích.

17. Možnost vidět zdrojáky v DevTools prohlížeče je naprosto fantastická. Paged.js také
ukazuje přesné preview, jak to bude vypadat po exportu z prohlížeče do PDF.

18. CSS pro tisk

25. Hyphens v češtině
Automatické rozdělování slov (hyphens) prohlížeče už podporují. Problém je v tom, že
kromě Safari prohlížeče zatím nemají podporu češtiny. Zde ale pomůže paged.js.

29. Teď už to stačí z prohlížeče exportovat do PDF.

30. PDF máme.

31. Teď do tiskárny.

33. PBtisk:
„Pro ofsetový tisk
naprosto nevhodné.”

35. PDF z prohlížeče nesplňuje požadavky tiskárny. Je ale možné jej pomoci několika
úprav v placné verzi Acrobatu doladit.

36. Problém 1: RGB
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.

37. Problém 2: ořezové značky
Ořezové značky se řeší tak, že v Paged.js nade
fi
nujeme o 3 mm větší stránky a pak
v Acrobatu přidáme 3 mm ořezové značky.

38. Problém 3: černá
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).

40. Díky za
pozornost!
@machal
www.vzhurudolu.cz
facebook.com/VzhuruDolu
martin@vzhurudolu.cz
→ vrdl.cz/css-layout