711: The Surprisingly Exciting World of Print + PDF CSS
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; } • 14:31:10 Named Pages
@page title { @top { /* no header for title pages */ content: “”; } } @page chapter { @top { content: “This is a chapter page”; } } • 15:27:09 Margins, Headers + footers, Page Numbers
- 18:01:18 Debugging Print CSS
- 19:57:18 Getting into a PDF
- Docraptor
- Playwright
- Puppeteer
- JSPdf
- 24:45:04 Other Things to consider
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
