meta_pixel
Tapesearch Logo
Log in
Syntax - Tasty Web Development Treats

711: The Surprisingly Exciting World of Print + PDF CSS

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, Technology, News

4.91.2K Ratings

🗓️ 1 January 2024

⏱️ 32 minutes

🧾️ Download transcript

Summary

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

Transcript

Click on a timestamp to play from that location

0:00.0

Monday, Monday, Monday, Monday, open wide Dev fans.

0:04.0

Get ready to stuff your face with JavaScript,

0:07.0

CSS, node modules, barbecue tips, get workflows,

0:10.0

break dancing, soft skills, web development,

0:12.0

the hastyest, the craziest, the craziest, the tastiest, web development

0:16.4

treats.

0:17.4

Coming in hot, here is Wes, Barracuda, Bars, and Scott, El Tor Toroloko Tolinsky.

0:25.0

Welcome to Syntax.

0:28.0

We're going to be hitting the command P button

0:31.0

and printing this episode of Synt syntax because we're going to be talking

0:35.4

all about print and PDF CSS.

0:38.6

The type of CSS that you might have written at some point for when your users need to print out a website.

0:45.8

Seriously, who prints anything these days, but I think there's a lot of really great use cases and

0:50.4

a lot of like really interesting stuff around print CSS feature that's been part of CSS for quite a while here

0:57.1

My name is Scott Tolinsky. I'm a developer from Denver with me as always is West Boss. What's up Wes? Hey, uh,

1:04.3

print CSS. Surprisingly interesting. And it's part of CSS that

1:10.7

probably most developers have have not had to touch because like you think

1:15.0

all right who prints a page anymore but I want to go through just a couple quick

1:20.7

examples to sort of set the mood as to what you might want to use

1:25.0

for in CSS for. Yeah before we set that mood, hey maybe you're getting into

1:30.3

trying to trying to export a page as a PDF with JavaScript and you're finding out how much

1:36.4

fun that is.

...

Please login to see the full transcript.

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.

Copyright © Tapesearch 2026.