CSS Paged Media

Everything You Always Wanted To Know About Creating Books With CSS But Were Afraid To Ask

Presented at the Fronteers 2014 Jam Session in Amsterdam (https://fronteers.nl/congres/2014/jam-session), I guess you really should have been there...

Transcript

1. CSS Paged Media
2. W3C Cascading Style Sheets Level 2 Revision 1 CSS2.1 Paged Media Module Level 3 CSS3
3. WHATWG CSS Books Living Standard CSS Figures Living Standard
6. Fixed dimensions
7. Absolute units
8. Forget responsive
11. Think about responsive ... a bit
12. @page
13. @page { size: 20cm 30cm; }
14. @page { size: 8.5in 11in; }
15. @page { size: A4; }
16. @page { size: A4 landscape; }
17. @page { size: legal; }
18. @page { size: letter; }
20. @page :left { margin-right: 3cm; } @page :right { margin-left: 3cm; }
21. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius ligula quis lectus fringilla, eget efficitur risus pharetra. Aenean vel lacinia quam. Pellentesque ornare eros ac diam bibendum accumsan.
22. @page { bleed: 6pt; marks: crop; }
23. Lonely heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius ligula quis lectus fringilla, eget efficitur risus pharetra. Aenean vel lacinia quam. Pellentesque ornare eros ac diam bibendum accumsan.
24. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius ligula quis lectus fringilla, eget efficitur risus pharetra. Aenean vel lacinia quam. Pellentesque ornare eros ac diam bibendum accumsan.
25. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius ligula quis lectus fringilla, eget efficitur risus pharetra. Aenean vel lacinia quam. Pellentesque ornare eros ac diam bibendum accumsan.
26. page-break-before page-break-after page-break-inside widows orphans
27. lectus fringilla, eget efficitur risus pharetra. Aenean vel lacinia quam. Pellentesque ornare eros ac diam bibendum accumsan. Page 12
28. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius ligula quis lectus fringilla, eget efficitur risus pharetra. Aenean vel lacinia quam. Pellentesque ornare eros ac Chapter IV
29. counter-reset counter-increment ::before { content: counter(); }
32. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius ligula quis lectus fringilla, eget efficitur risus pharetra. Aenean vel lacinia quam. Pellentesque ornare eros ac diam bibendum accumsan. [1] Phasellus varius ligula quis lectus fringilla, eget efficitur risus pharetra. [1]
33. .note { float: footnote; }
34. ::footnote-call { color: papayawhip; } ::footnote-marker { color: goldenrod; }
35. Lorem ipsum dolor sit amet, consectetur adipis-cing elit. Phasellus varius ligula quis lectus fringilla, eget efficitur risus pharetra. Phasellus varius ligula quis lectus fringilla, eget efficitur risus
36. img { image-resolution: from-image; }
38. columns column-count column-fill column-gap column-rule column-span column-width
40. Right?
41. No!
43. Hell no!
44. Prince
45. Prince
46. DocRaptor
47. Antenna House
48. Antenna House
49. wkhtmltopdf
50. wkhtmltopdf github.com/