Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Paged Media

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...

19f565f05a5d2e98d4416d1db627bf76?s=128

Jan van Hellemond

October 08, 2014
Tweet

More Decks by Jan van Hellemond

Other Decks in Technology

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

  4. None
  5. None
  6. Fixed dimensions

  7. Absolute units

  8. Forget responsive

  9. None
  10. None
  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; }

  19. None
  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(); }

  30. None
  31. None
  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; }

  37. None
  38. columns column-count column-fill column-gap column-rule column-span column-width

  39. None
  40. Right?

  41. No!

  42. None
  43. Hell no!

  44. Prince

  45. Prince

  46. DocRaptor

  47. Antenna House

  48. Antenna House

  49. wkhtmltopdf

  50. wkhtmltopdf github.com/

  51. None