CSS for Print Layouts

18min Snip

00:00

Play full episode

Summary

Transcript

Episode notes

This chapter explores the use of CSS for print layouts and discusses the advantages of using CSS to define the size of printed materials, control page breaks, and customize margins, headers, footers, and page numbers. It also covers the use of CSS counters and pseudo selectors for print CSS, as well as debugging techniques and the relevance of print to PDF in today's digital world.

In this episode of Syntax, Wes and Scott talk about things to consider when printing something from your website or app including loading CSS only for printing, using units in CSS, CSS counters, creating a PDF, naming pages when printing, and more.

Show Notes

00:25:15 Welcome
01:27:04 Syntax Brought to you by Sentry
01:52:00 Examples of how Wes uses print CSS
03:42:16 Using it for invoices or receipts
05:08:24 Delivering a book as a PDF
05:42:16 How do you load CSS only for printing?
10:41:08 Using units in CSS
11:29:15 CSS Counters
MDN: CSS Counters

body { counter-reset: chapter; /* create a chapter counter scope */ } h1:before { content: "Section " counter(chapter) " "; counter-increment: chapter; /* add 1 to chapter */ } h1 { counter-reset: subchapter; /* set section to 0 */ } h2:before { content: counter(chapter) "." counter(subchapter) " "; counter-increment: subchapter; } h2 { counter-reset: section; font-size: 23px; }