The Surprisingly Exciting World of Print + PDF CSS

Monday. Monday. Monday. Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats. Coming in hot. Here is Wes, Barracuda, Boss, and Scott, El Toro Loco, Tolinski.

Welcome to Syntax.

We're going to be hitting the command p button and printing this episode of Syntax Because we're gonna be talking all about print and PDF CSS, the type of CSS that you might have written at some point For when, your users need to print out a website. Seriously, who prints anything these days? But, I think there's a lot of really great use cases and a lot of, like, really interesting stuff around print CSS, a feature that's been part of CSS for quite a while here.

Print CSS, surprisingly interesting.

And it's part of CSS that probably most developers have have not had to touch because like you think, alright, who prints a page anymore? But I want to go through just a couple quick examples to sort of set the mood As to what you might want to use,

print CSS for. So Yeah. Before we set that mood hey. Maybe you're you're getting into trying to, Trying to export a page as a PDF with JavaScript and you're finding out how much fun that is.

Well, you're gonna be hitting some bugs. And to make sure that those bugs are captured, You're gonna wanna go ahead and check out [email protected].

This podcast is presented by Century, and we, stuff. We're we're, you know, a proud part of Sentry, so check it out if you have any bugs in your app. Alright. Mood mood setting time. Let's go. Alright. A Couple examples

of when I've used print CSS as well as a couple of bonus ones. So when I do my sticker shipping, so every year, year and a half. I do.

I print 10,000 packs of stickers and I mail them out via letters. And in order to do that, I have all of the sales in my database, and I need to automate the generation of all the envelopes. So it's got the receiver address has the sender, return address.

And then on the front of that envelope, it also has information about How many stickers need to go in it? Like how many did they buy? So I'll put like a little 3 in the corner if they order 3 packs.

And then as well as like how many stamps need be applied. So in the top right hand corner, it'll say like 1 CA, 1 Canadian stamp or 2 international stamps or 3 USA stamps. And that just sort of helps me in the process of actually mailing them. So being able to automate that, The other one when I did T shirts, I was printing out everything on a 4 by 6 inch thermal label printer, And each order had both a label that you actually used to ship right? USPS, FedEx, whatever. But you also needed a packing list. So often you'll get like a when you order something online, you'll get like a packing list. You're like, Why is this a sticker? You know, like why? Why is the what goes in my thing a sticker? And the reason is because they needed to print those 2 things.

Somebody tears it off And the picker goes and they put the label on the box. But then they also say, All right, well, this person needs a medium, T shirt that is the black color.

So I've used that quite quite a bit. Yeah. Here's one that I've done.

LevelUp tutorial site. We had invoices and receipts.

You you know, you did a one off purchase or you did an a subscription. Oftentimes, these receipts need to be either saved as a PDF. PDF or, heaven forbid, they do need to be printed out for some, some companies to be able to submit them. We had a lot of people who, stuff. As you very well know, Wes, they get to buy tech courses on a tech stipend or something like that. This allows them to submit those receipts at the end of the year, Which is very funny. As an entrepreneur type of person or somebody who always worked in smaller agencies, I never had to deal with receipts until starting to work at Century. And now You would not believe how thankful I am when somebody makes the receipt process nice and easy, and I can Oh, man. You know? We have a a generated CSS receipt, save as, you know, print as a PDF or any of that stuff. Makes my life so much better. So, yeah, much needed. I have such a

hate for because I have to do all my expenses. And I have to I've used probably 100 different services in their like receipt workflow.

And I have so many like qualms about how they do that. And at the end, I'll have a couple of tips that Make it easier on your users because you don't think about these little like printing a receipt, you know, like that's like the last part of your app that you really want to spend any time on. But man, when people do it good, it is good. Yeah, totally. When I wrote my my book on Sublime Text Many years ago, I laid out the entire book and it was I never actually printed it as a physical book, But I did deliver it as a PDF, and all of the print CSS also applies to to PDF. So that's probably where I wrote the most of my print CSS. And then other things I asked on Twitter what people were doing.

Amazon print Return labels need to be on a single page.

Recipe sites are a big one that people still print out.

Workout sheets, All kinds of interesting stuff, but let's get into actually how to use it. So first one, you probably know this. How do you load CSS That is only applied when printing.

Well, either link it with a media. So you link up a CSS file that is entirely print CSS and then you put an attribute on the link tag, which is media equals print, and that will only be applied. And I look this up. It'll only be requested when your user is when your user is printing it as well. So you don't have to think, oh, that's an extra thing to download when I don't even need it. It's not downloaded unless the user actually needs it. The other way is you can include it in your existing CSS with a media query, right? Media queries are not just for width and height of your viewport. You can also use at media print, and that CSS will only be applied when user goes to print. Yeah. There's also a really interesting at rule called the at page

where it allows you to modify aspects of the printed page. So, like, what what the size is, the margin, the padding, the border.

Page break after always, Page break after before. This basically chooses how you get to break onto a new page.

And, like, maybe you have something that should always be Breaking out like a chapter. Right? You can think about like a book. Right? Are you outlining a book in CSS? How many times Have you been reading a book in the chapter 2 or chapter 3, whatever, starts on the same page as the chapter ends? It usually doesn't. Usually starts on the very next page. So if you were to do something like, you know, at a chapter, you could do page break before always, And then it will always start it on a new page, which is really handy if you're, again, laying out anything like a book. And now, Jeff. Wes, you know, it's funny. Can you name the CSS at rules? Like, how many at rules do you think you could name? What do you mean naming them? Well, there's a there's a handful of different at rules in CSS. I'm gonna say, oh, can oh, can I name them? I thought you meant, Like, can you name print CSS rulesaw? It's funny because we all know at media. Right? But, like, how many you might not think about at page very often. So At layer, at page. Yeah? What are the other ones? Yeah. There's some interesting ones. Well, maybe not that interesting at character set so you can set the encoding.

At import is one that we we know.

There's ad document, which I don't know anything about ad document. Oh, The the app page 1 is kind of interesting because when I was doing labels, I explicitly needed them to be 4 by 6. So usually, you don't size the page. You let your user's printer size it, and you you you create it as fluid as possible.

However, when you are explicitly print printing on A10 envelopes or an 8 and a half by 11 sheet of paper.

And you know that that's what it's going to be printed on or a 4 by 6 label. That's where you go. And CSS has inches for this purpose. So I literally went in and said it was 4 inches by 6 inches and used the CSS size property, not width and height. The break Page break properties are also really interesting because when I was doing my book, I would have these like tips, you know, like like little, Jeff. Hey, did you know, like, this tiny little asides as you're going through it? Or you might have a block quote as well when you're quoting someone. And what I did with that is I would say, block quote anything that has a class of tip on it. Stuff. Page break inside avoid or page break inside never. And what that will do is it will say like never Start this on 1 page and break it on and then continue on to the next page. You should always snap on to the the next full page, which is

makes for much better layout. Yeah. You have you ever used, stuff. Because I've done actual book laying out in is the InDesign.

Have you ever used Adobe InDesign? No. No. Never.

Oh, I have back when I used to do CD art.

The layouts of the CD arts before they went to print Had to be layout in InDesign. I would do it all in Photoshop, and then I brought it into InDesign just for the print setup. You did all the bleed cut lines and everything. I'm just the reason why I bring this up is that, like,

I don't think most people know that you can do such cool things like what you're referring to, Like avoiding breaking a block quote in CSS. Mhmm. We're, like, working in InDesign to layout anything is a tremendous pain in the butt. I, like, wonder if, there's opportunities for people to do more laying out of this type of thing with CSS just because it it feels maybe like a bit of an unknown by the people who would actually use it. Right? Yeah. You can use,

we'll talk about units and CSS.

You can use obviously pixels or rems, rems, and a majority of the times you don't have to modify the sizes of things on your page. However, if you are doing something that is explicitly for print CSS like labels or envelopes, Something like that, you might want to use inches, millimeters, centimeters, points, picas, which I've literally never in my life stuff. Use a pika, which is the PC, or percentages.

Yeah. I used to work at a a design agency that was, like, just getting out of doing a lot of print, And so we'd occasionally get designs using picas or those types of things. And I'd be like, alright. I have to, convert this myself now.

Stuff. CSS counters are super handy for print CSS. This is not part of print CSS. It's part of regular CSS. Have you ever used a CSS counter for anything? No. But I'm

seeing this code example, and I'm feeling like, How have I, how have I not used CSS counters? So CSS counters are really neat because

you can count things in CSS. And every single time you have an instance of an element or instance of a selector, it will increment it by 1.

So CSS Counter works where you reset the counter and you give it a name. So when I was doing my book, I would have a counter reset chapter on the body, and that creates a counter scope for the entire book.

And then what I did is every single time I had a h1 tag, I said, all right, my H1s are going to be a chapter.

And like, oh, you should use an H2.

Every every chapter was an h one. It's fine.

It's being printed onto a page.

You what you do there is you apply a counter increment property, and every single time that the Dom encounters in H1. It will increment that by 1, and then you can access those numbers via the counter function in CSS, and you can Then inject them into the DOM via the content property of a before or after pseudo element. So what I was doing is I was just saying like, Chapter 1, chapter 2. And of course, you could do this in in React or if you were rendering out some sort of template, you probably have those indexes already for you, but it can be really handy just to automatically do it, especially like when I was doing Like a table of contents work as well, where you might want to reset them at certain specific times. And same thing with subheadings.

So every single time I had an H1 tag of a brand new chapter, I would create a new scope of subchapter, And that would increment every H2, H3.

No, it would only increment every H2.

And that would be a subchapter.

And then you can you can go even further if you wanted to. Then once you hit the next chapter, you reset the subchapter count and keep going from there.

So CSS counters certainly take a look into it. It's a very nice part of CSS that doesn't get used all that often. Yeah. I stuff. I I feel like

I might not have known this existed, or it's like the type of thing I may have seen at some point, but

stuff. It's got my wheels turning a bit. It's been around for a long, long time. Probably if I were to guess, it's been around for 12 years. Yeah. Let me let me look. Can I use You you, you go ahead to the next one? I'll,

I'll look it up. Yeah. Well, okay. Let's talk about, like, named pages and, like, pedaling of pages for print, which I think is really interesting too because it's another at role, but we have the at role at page, and you're able to, Like, define a header, but, like, a header for the pages using at top And with the content property, it's like we're so used to only using at content for, like, before and after pseudo elements, But there's a lot of, like, really interesting interesting use cases here. So if you want to give, a titling to a page.

You can do at top, at content, and then a text string.

And and that will display again only on print, which I think is, like, the most important part. Your users aren't seeing these things If they're not in a print context, right? Yeah. That's,

sort of leads into the next one, which is the margins, headers and footers and page numbers on each of your pages. So by default, and this always drives me crazy, is when you print it out, it the whole URL at the bottom of the page. And that looks like garbage, right? So you can say page, which you select the page and you can name. You can have different page like templates. Almost they're called named pages.

A chapter page might not have a header and footer, but the actual content might have it in there or like the very 1st page of your book doesn't need to Have page 1 on it because you're going to put the like the the cover of the book on that page so you can you can create multiple page layouts by simply naming them.

But yeah, you use the you nest inside of it at bottom at top, bottom left, bottom right, and that will allow you to control the 4 corners of the margins, and then you can put whatever you want inside of them. And what can you put inside of them? You can put CSS counters, right? You could put the name of the book. That's what I did. So I put the name of the book on the left and then I put the page number with a CSS counter.

And I simply just incremented it every single time, and you're able to count the total number of pages as well with CSS counters. So you can create 1 for the current page and one for the total number of pages and just display that in the bottom right hand corner. And that's so much easier because you can't do that in React because You don't know how many pages it's going to be. You don't know if your user's increasing the font size or if they're printing on letter paper in North America or what is it? A 4 in Europe.

They're all slightly different sizes. So the The amount of pages at the end of the day differs.

Yeah. And you can also what's interesting too, in addition to the, like, named pages, I mean, those pseudo selectors stuff. Are are really awesome. So you can have a pseudo selector for a blank page if you want using at page colon blank.

Some bit of styling on that, whether that's, you know, actual text or or content or whatever. But you can also target first, left or right.

These little pseudo selectors are interesting or pseudo class,

I suppose. Yeah. That's a whole crazy world.

Let's talk about so now you've written all this crazy print CSS that's available to you, like and I think you can grok all of Princess in probably about 45 minutes. The hardware comes into debugging it Because it's not absolutely perfect and you can't like preview it in the browser. All browsers have a checkbox to apply print CSS.

And I'm here to tell you it's they're all garbage.

They all say that they're going to emulate it, But they they don't. They don't do a very good job of it at all. So my sort of process for going through it would be Open it up in Chrome, and Chrome's print preview, in my experience, was the closest you could possibly get to what it would actually look like when it got spit out the other end. It wasn't always perfect, but it got pretty close. However, the best way to do it is you Simply just save as PDF or I believe on Safari, there is a preview as PDF button and that will spit it out.

It's kind of slow because you make a change and especially if you have 40 pages, it sometimes takes 15, 20 seconds to actually print to PDF, and then you got to open it up and see if it worked there, and there's no inspect element on a PDF either, so Jeff. You're kind of out of luck. So what I ended up doing with my envelopes is I just put a div around every envelope and I called it like a page.

And then I explicitly made those 10 inches by 3 inches and put a border around it so I could kind of mimic it as close as I could. And then when I was, like, done 90% of it, then I started having to do the print preview and print a PDF and Get that last little 10% finish up. Yeah. Well, speaking of print to PDF, I think that's a whole another part of this is,

Hey. We're living in a, you know, almost a post printer world. I have a printer at my house, but it wouldn't shock me if if many people did not have a printer.

So here's the world of PDFs. Right? Yeah. And people often ask, you know, what do you do to get something as a PDF? Now I am of the mind They in most cases, you know, you can instruct people to do print print as PDF, and you'll be fine.

Jump. And to do that, it's the same as printing an epage. You do command p or you select print from the menu, and then you're typically given a print given a print dialogue, but what you might not know is that that destination drop down, the option that's not an actual printer is save to PDF.

And if you click save from there, guess what? It creates a PDF of the printed page just like what we've been talking about as how you would debug that. And to me Yeah. That's the easiest possible way of getting your users to save anything as a PDF because you're not having to use additional services or libraries or anything where it can get kind of hairy. And let me tell you, if you're trying to do this in code, it gets hairy, which is why I just straight up typically don't implement it and just

have more instruction there. Right. Instruction on the page. It's probably a 100 times easier, and and this is that's what I do as well.

When I first rolled out my receipts Over the years, I would like to get an idea of how many people would email me saying I need a PDF version.

It has almost totally gone away, so I think people Understand now, at least developers understand that it is a PDF, but the amount of people that screenshot photos when they want to share it. I don't know if I would totally put all my eggs in that basket. So the next option you have is a headless browser. And This is probably the best method I would say because you're getting full blown HTML and CSS rendering From a browser that you expect to render it like you wanted, and you can output it as a PDF out the other end so You can run a puppeteer instance, sometimes a little bit tricky to get a puppeteer or playwright up and running, especially if you're working in a serverless environment. We Talked about the issues around that, but it is well worth your time because you get the easiest. Like I did a little bit of research And there's so many different services out there that will allow you to create PDFs, but they don't use CSS.

So you have to re layout the entire thing in XML or you have to use their proprietary API, and that might make sense for like like I know the government of Canada. When you have to renew your passport, you download the PDF and like, have you ever used a good PDF or the dropdowns and some inputs? I've used plenty of bad PDFs where, like, the tab order's wrong and you have to like numbers don't line up to the number hole.

I did one the other day where, like, it was a radio button for, like, select all that apply, but you can only select 1 of them because it was a radio button. I was like, So I had to get like the text tool out and just put an x over top of it and drag and drop it. Oh, my gosh. Awful. But Government of Canada passport renewal PDF, the best PDF I've ever used in my entire life. And I would love to talk to the people who made that thing because I guarantee that I would love to shake their hand. Like one of the experts in the world of how do you make a PDF has built in drop downs and all that good stuff. There's also services. Dockraptor is another one Or you can just send your whole payload HTML and CSS to DAW Crafter, and it will return to you a PDF.

Again, that's a paid option, but you're not spending any time maintaining any services or hosting anything.

And then there's a bunch of libraries out there if you go on NPM.

JSPDF seems to be a very popular one, but that one has an entire like its own API.

And I think there's adapters if you want to use HTML to Canvas, but then you're basically dumping your whole Canvas Website Into A Canvas, and I've Used IT Before IT's 90% of the Way There, But There's Lots of Little Gotchas. So I Would Say Use Puppeteer

Or let the user do it. Yeah. That's probably the best. And with that, though, Wes, you're not even getting into print styles. Right? You're just normal normal straight up CSS. Right? No. With with the puppeteer,

here. Printing to PDF, the print styles will apply.

Okay.

Okay. Other things to quickly consider with printing is, printers aren't Color all the time. I we bought a color printer because our our kids always have to print photos for things. And the freaking thing, like, the ink ran out in like 3 minutes. You printed like 3 photos. Is it an inkjet or a It was an inkjet, not a the laser color printers are Silly expensive, so I wasn't ready to do that.

Then I bought the like there's this thing where you can do like unlimited ink if you can put a tank on the side.

And I tried to do the, like, kit, and it just started leaking ink everywhere. So I just threw the whole thing in the garbage. Freaking nightmare. So we just we just go to Walmart to print photos snow.

Okay. Yeah. We don't print photos ever, so we only have a laser printer. And it is in black and white because you can get a good laser printer for cheap. We never replace that. Like, we hardly ever have to replace that, and we use we use the toner all the time. We use it all the time. So But it is important to consider that, again, even if your users do have color, color ink is more expensive and all that stuff. So you are making your users print stuff in full color, it should probably have to be in full color. Like, what's the point of making a receipt full color? There's no point doing that. Right? So you wanna make sure that you're testing to make sure your contrast and stuff is good. You're not using super light grays for text to where there's text that you need people to read. That's the most common one I see is that people use light grays. Yeah. Or even, like, situations where you might have, like, white text in a black box. Don't do that.

Have it be the, black text and a white box, you know, the opposite or even worse, low contrast text and a colored box at all. I would just remove backgrounds from any of that stuff entirely. No. The the browser will strip all all your background images

and all of that stuff. You don't have to worry too much about that type of thing. You've got to be cognizant of it, I think. Yeah, definitely give it a Give it a look over.

And actually, one thing we didn't mention with the the initial printing is if you want to make your page printable, A lot of times all you need is a print CSS that will simply just hide your NAV.

Hide your header. Maybe. Yeah.

Your header footer, maybe sidebar.

It just strip all that display none on all of that type of stuff.

Anywhere you're using color to do. You know, like, if you have a calendar or a bunch of tags and it shows that red ones are disabled and blue ones. First of all, you shouldn't just be using color to in your websites in general to denote things. But if you are, maybe switch it to a pattern That's necessary.

Make it as fluid as possible, just like responsive design. Don't assume a paper size unless you are explicitly doing like labels or envelopes because paper sizes differ all over the world. And don't forget to put a title on your freaking document. This one kills it. I download. I go to my bank, I download 12 months worth of exports.

And you know what I get out? The other end is statement PDF. Yes. And then the next month is statement bracket 1 PDF and then Come

on. I have the

same file name on that sucker. Like, it kills me that you don't.

And in so many cases, it's you just have to put a title on your HTML tag that says what month or year this thing is for or specifically.

That's that's all you need. I must say we did that on level up tutorials, Wes. We we did have the

month of the invoice and the invoice number. Oh, beautiful. Yeah, put the invoice number in there. Also makes like document storing if you search for an invoice number. I know that search goes inside of documents now, but Jeff. As always, consider if links and titles need to be printed out so you can use the after or sorry, the after pseudo element and use the attr method.

So if you need to explicitly print out where links go, You can append them after with the content.

Also word wrap, break word very important for long URLs or long content that could possibly spill out onto the paper because then you have your printed something and then the next page is just like 6 characters because it had to overflow and That's a pain. So make sure that very long characters, likely very long URLs that you're not expecting, will break onto the next line.

So that is print CSS. You know, we have a we have a couple of laser printers. We have 1 here and 1 at the cottage as well.

Big fan of those because they always work.

The ink is super cheap to replace.

It only runs out like maybe once a year and we print a lot. Stuff. And, that's just Yeah. Mine does not run out that frequently. Mine's, like, 1 every 3 years maybe. And we we we do print. It's not like we're not printing. But yeah. Yeah. Get yourself a la laser printers these days, you would be surprised at how cheap they are. I bought mine. Like, probably, like, $100.

Yeah. Maybe even less.

A printer. And, you know, they do come in handy, granted. Get a brother.

Get a brother? What do you have? I think I have an HP, which stuff. Fine. Yeah.

You know what? Here's the test of a printer. If you click print from your laptop, will it print, actually print from Wi Fi because it seems like Wi Fi printing is like the single hardest task of any printer for some reason. Yeah. That's when the Wi Fi printing came out, I was so happy because,

like, we put ours in the basement on a very high shelf because you use it once every month. You know, I don't want it to be anywhere. I don't want to see. No, I don't want to see that thing. I don't want to see you in my space. Real quick on on the the topic of printing as well as I went down the rabbit hole of web Bluetooth. Yes, we got these the little Nimbot. These little label printers that are Bluetooth, Nimbot label printer, and, I can't figure out how to make it work. There's a whole bunch of They're very popular in China. They're called cat printers, and there's a whole bunch of like Chinese GitHubs that I can't understand that have some code around how to hack these things. I haven't gone too deep, but there's also like, you know, you get a receipt at at a restaurant. Yeah, those things are all almost all based on a single standard, which is this like ESP standard.

And I'm very tempted to buy 1 and use the web serial API and try to figure out how to Send data from the browser directly to the printer.

No. Not even the print dialogue. Yeah.

Yeah. You know what, Wes? You would be the type of person to try to To hack one of those

receipts. Someone on Twitter said, like, I think somebody's done it like a GitHub issue, but, like, imagine every time a Sentry issue is logged, It just goes, and it, like, prints it out.

I think you would be the type of person who would love a flipper 0. Have you heard of the flipper 0? Yeah. Yeah. Yeah. I've, I've gone down that rabbit hole a few times. Yeah.

Cool. Well, that's print CSS. I love it. Yeah. Yeah. Thanks for tuning in. Catch you later.

Peace.

Head on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player or drop a review if you like this show.