The Surprisingly Exciting World of Print + PDF CSS

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

That's necessary.

12 months worth of exports.

that have some code around how to hack these things. I haven't gone too deep, but there's also API and try to figure out how to

the

And you know what I get out? The other end is

Anywhere you're using color to do. You know, like, if you have a calendar or

Make it as fluid as possible, just like responsive design. Don't assume a paper size unless you are explicitly doing 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, because Chapter 1, chapter 2. And of course, you could do this in

Jeff. As always, consider if links and titles need to be printed out so you can use the HTML and CSS to DAW Crafter, and it will return to you a PDF.

which stuff. Fine. Yeah.

And don't forget to subscribe in your podcast player for quite a while here.

in your websites in general to denote things. But if you are, maybe switch it to a pattern A lot of times all you need is a print CSS that will simply just hide your NAV.

and then

You know what? Here's the test of a printer. If you click print from your laptop,

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 1 CA, 1 Canadian stamp or at top, bottom left, bottom right, and that will allow you to control like, you know, you get a receipt at Oh, I have back when I used to do CD art.

That's a pain. So make sure that very long characters, likely very long URLs that you're not expecting, that type of thing. You've got to be cognizant of it, I think. Yeah, definitely give it a Give it a look over.

So that is print an invoice number. I know that search goes inside of documents now, but passport renewal PDF, already for you, but it can be really handy just to

Hide your header. Maybe. Yeah.

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

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.

web Bluetooth. Yes, we got these the little 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, FedEx, whatever. But you also have and there's a whole bunch of like Chinese GitHubs that I can't understand you nest inside of it at bottom 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 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, like the the cover of the book on that page so you can you can create multiple page layouts by simply naming them.

That's that's all you need. I must say we did that on level up tutorials, Wes. We we did have for a full archive of all of our shows.

bracket 1 PDF

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

don't forget to put a title on your freaking document. This one kills it. I download. I go to my bank, I download No. Not even the print dialogue. Yeah.

And I'm very tempted to buy 1 and use the web serial explicitly

like labels or envelopes because paper sizes differ all over the world. And same file name on that sucker. Like, it kills me that you don't.

on. I have the

So if you need to explicitly print out where links go,

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,

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

You can append them after I would create a new scope of subchapter,

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 the ink ran out in like statement PDF. Yes. And then the next month is statement Your header footer, maybe sidebar.

and it, like, prints it out.

And in so many cases, it's you just have to put a title on your HTML tag

Come

that says what month or year this thing is for or specifically.

So you can or percentages.

at content, and then a text string.

sort of leads into the next one, which is every year, year and a half. I do.

You can do at top, is one that we we know.

URL at the bottom of the page. And that looks like garbage, right? Peace.

and you can name. You can have different page like templates. Almost they're called named pages.

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

Monday. Monday. Monday. Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

print CSS for. So Yeah. Before we set that mood hey. Maybe you're you're getting into trying to,

the type of CSS that you might have written at some point 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,

interesting.

and printing this episode of Syntax 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 additional services or libraries Head on over to syntax.fm

Welcome to Syntax.

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

And it's part of CSS that on each of your pages. So by default, and this always drives me crazy, is when you print it out, it the whole Or you can just CSS.

This podcast is presented by Century, and we,

Boss, and Scott, El Toro Loco,

Because we're gonna be talking all about print and PDF CSS, If they're not in a print context, right? Yeah. That's, 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.

But

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].

Trying to export a page as a PDF with JavaScript and you're finding out how much fun that is.

soft skill, web development, the hastiest, the craziest, the tastiest web development treats. Coming in hot. Here is Wes, Barracuda,

I want to go through just a couple quick examples to sort of set the mood

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 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 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

Tolinski.

We're going to be hitting the command p button

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

and all that good stuff. There's also services. Dockraptor is another one dumping your whole Canvas a label that you actually used to ship right? USPS,

So

drop down, the option that's not an actual printer is save to PDF.

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 I believe on Safari, there is a preview as PDF button 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.

understand that it is a PDF, but like They're very popular in China. They're called cat printers,

has built in drop downs 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 the content property of a before or after pseudo element. So what I was doing is I was just saying like, almost all based on a single standard, which is this like ESP 2 international stamps or a PDF method.

They in most cases, How have I, how have I not used CSS counters? So CSS counters are really neat because

then you're basically And then on the front of that envelope, it also has information about and all of that stuff. You don't have to worry too much about

JSPDF seems to be a very popular one,

From 6 characters because it had to overflow and receipts. Someone on Twitter said, like, As to what you might want to use, 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 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, 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 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 send your whole payload when I was doing my the margins, headers and footers and page numbers

but they don't use

eggs in that basket. So the next option you have is a headless browser. And This is probably the best 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

When I first rolled out my receipts

the amount of people that screenshot The ink is super cheap to replace.

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

Over the years, I would like to get an idea of how many people would email me saying I need a PDF version.

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

HTML and CSS rendering Print CSS,

and then you're typically given a print given a print dialogue, but what you might not know is that that destination

of getting your users to save anything as a PDF because you're not having to use

layout the entire thing I said, all right, my H1s are going to be a chapter.

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.

you know, you can instruct people to do print print as PDF, and you'll be fine.

So you have to re

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

where, like, the tab order's wrong and you have to like numbers don't line up to the number hole.

in XML or you have to use their proprietary API, and that might make sense for like 45 minutes. The hardware comes into debugging it Because it's not absolutely perfect and Website Into A Canvas, and I've Used IT Before IT's 90% of the Way There, But There's Lots of Little 40 pages, it sometimes takes 15, 20 seconds to actually 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 I print 10,000 packs of stickers and I mail them out via letters. And in order to do that,

but that one has an entire made those 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 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 its own API.

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.

No, it would only increment every H2.

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.

a titling chooses how you get to break onto a new page.

And that would increment every H2, H3.

for,

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

and you're able to,

So every single time I had an H1 tag of a brand new chapter, 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 It has almost totally gone away, so I think people my sort of process to PDF,

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 Open it up in Chrome, It's kind of slow because you make a change and especially if you have

And that would be a subchapter.

like, before and after pseudo elements, Jump. And to do that, it's the same as printing an epage. You do command p or you select print from the menu, 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,

interesting use cases here. So if you want to give,

You you, you go ahead to the next one? I'll,

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

I'll look it up. Yeah. Well, okay. Let's talk about,

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

Like, define

But there's a lot of, like, really interesting

a header,

as well as a couple of bonus ones. So when I do my sticker shipping, so

a sticker? And the reason is because they needed to print those 2 things.

I have all of the sales in my database, However, when you are photos when they want to share it. I don't know if I would totally put all my Simply just save as PDF

generation of all the envelopes. So it's got the receiver address has the sender, return address.

3 USA stamps. And that just sort of helps me in the process of actually mailing them. So being able to automate that, T shirt that is the black color.

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.

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

I was 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 on your page. However, if you are doing something that is explicitly for print CSS like labels or envelopes,

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

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

some companies to be able to submit them. We had a lot of people who,

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

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.

LevelUp tutorial site. We had invoices and receipts.

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 printing out everything on a 4 by 6 inch thermal label printer, And each order had both

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

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,

That is only applied when printing.

CSS And then as well as like how many stamps need be applied. So in the top right hand corner, it'll say

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.

Workout sheets, 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 they they don't. They don't do a very good job of it at all. So reset the counter and you give it a name. So when I was doing my book, I would have a counter reset chapter Understand now, at least developers

need to be on a single page.

Amazon print Return labels picas, which I've literally never in my life stuff. Use a pika, which is the PC,

It's being printed onto a page.

And then what I did is every single time I had a I would say because The other one when I did T shirts, with the content.

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

via the counter function in CSS, and you can Then inject them into the DOM via

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

in React or if you were rendering out some sort of template, you probably have those indexes Big fan of those because they always work.

seeing this code example, or anything where it can get kind of hairy. And let me tell you, 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,

where you things. And the freaking thing, like, 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.

picas or those types of things. And I'd be like, alright. I have to, convert this myself now.

And like, oh, you should use an H2.

automatically do it, especially like when I was doing Yeah. Maybe even less.

and I'm feeling like,

an instance of an element or instance of a selector, it will increment it by 1.

designs using

you can count things in CSS. And every single time you Gotchas. So I Would Say some inputs? I've used plenty of bad PDFs

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 h1 tag,

on the body, and that creates a counter scope and I need to automate the probably most developers have have not had to touch because like you think, alright, who prints a page anymore? for going through it would be at a restaurant. Yeah, those things are all They're all slightly different sizes. So the The amount of pages at the end of the day differs.

explicitly print printing on A10 envelopes will break onto the next line.

Jeff. Hey, did you know, like, this tiny little asides as you're going through it? or sorry, the after pseudo element and use the attr

we'll talk about units and CSS.

centimeters, Send data from the browser directly to the printer.

import

block quote

for people to do more laying out of this type of thing with CSS

width and height. The break Page break properties are also really interesting because after 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.

points, method 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

Start this on 1 page and break it on and then continue on to the next page. You should always 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

unknown by the people who would actually use it. Right? Yeah. You can use,

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.

book, I would have these like tips, you know, like like little, The

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,

snap on to the the next full page, which is 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 the sizes of things

there's opportunities

You can use obviously pixels or rems, rems, and a majority of the times you don't have to modify standard.

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

or an 8 and a half by 11 sheet of paper.

just because it it feels maybe like a bit of an

Something like that, you might want to use inches, millimeters, 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.

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

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,

print

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 It just strip all that display none on all of that type of stuff.

and that will spit it out.

And then I

or But yeah, you use the Also say page, which you select the page

and just display that in the bottom right hand corner. And that's so much easier because you can't do that in the best They all say that they're going to emulate it, But

with a CSS counter.

These little pseudo selectors are interesting or pseudo class,

at page colon blank.

I mean, those pseudo selectors

left or right.

that's available to you, like and I think you can grok all of Princess in probably about

Some bit of styling on that, whether that's, or drop a review if you like this show.

React And I simply just the entire book.

Yeah. And you can also what's interesting too, in addition to the, like, named pages, Get a brother? What do you have? I think I have an HP,

letter paper in North America or what is it? A 4 in Europe.

you can't like preview it in the browser. All browsers have a checkbox to apply print CSS.

Let's talk about so now you've written all this So CSS Counter works Or you might have a block quote as well when you're quoting someone. And what I did with that is I would say, 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 I think somebody's done it like a GitHub issue, but, like, imagine every time a Sentry issue is logged, It just goes,

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

stuff. Are are really awesome. So you can have a pseudo selector for a blank page if you want using

you know, actual text or or content or whatever. But you can also target first,

thing to download when I don't even need it. It's not downloaded unless crazy print CSS 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

Well, either link it with a media. So you link up a CSS file that is entirely

when your user is printing it as well. So you don't have to think, oh, that's an extra surprisingly

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

we use the toner all the time. We use it all the time. So But it is important to consider that, again,

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

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

And actually, one thing we didn't mention with the the initial printing is if you want to make your page printable, And I think there's adapters if you want to use HTML to Canvas, but Like a table of contents work as well, where you might want to reset them at certain specific times. And same thing with subheadings.

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

Okay.

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.

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?

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.

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? to a page.

At

Page break after always, Page break after before. This basically

How many times

Have you been reading a book in the chapter