Syntax - Tasty Web Development Treats
711: The Surprisingly Exciting World of Print + PDF CSS
This episode isn’t summarized yet
Create a free account and summarize it. In a few minutes you’ll have the key takeaways and a section-by-section summary.
Show notes
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