We don’t print out things as much as we used to. A lot of us don’t even own a printer — I’m not going to lie, I don’t, because, usually, I only need to print out something once a year, if that.
But there will always be someone who wants to print things out from your website, whether it’s that perfect shortbread recipe on your food blog, directions to your office, or a fantastically written long-form article that they want to share with a friend.
But when people print out from a website, it’s often, well, a mess. There are menu bars all over the place, links don’t get included, the formatting’s all weird, and it’s just a waste of perfectly good paper.
That’s where a print stylesheet comes in. It turns any web page into an easy to read document, the kind you might keep around for awhile.
Obviously, each print stylesheet will be tailored specifically to the website it’s attached to. But I’m going to go through a few of the things you can add to make sure your print stylesheet looks fantastic.
For these, we’re going to use my sample site to show off what you can do. You can see how it looks in the browser, and then print it (or just preview a print) to see how it would look on a page.
Adding a print stylesheet to your site
This is the easy part. In your <head>, where you have all your other <link> tags, just pop in this one:
<link href="location of printstylesheet.css" rel="stylesheet" media="print">You might need to change exactly how that looks, depending on what you’re using, but as long as you’re linking to a stylesheet and you include media="print", the browser will know that it needs to pay attention to only this stylesheet when you print out.
Testing your print stylesheet
Also, you don’t have to constantly print out your site to see how it’ll look as a print-out. That’s a waste of paper and takes way too much time. Most browsers will show you a preview before it sends to the printer. Refresh the page, preview the print-out, and then close it. Repeat until it’s perfect.
Making your page printer friendly
If you have a printer, you know how much printer toner can cost. And a lot of printers will refuse to print any colour if one colour is ever-so-slightly under the arbitrary limit. Which is why the first thing you absolutely need to do is set the background to plain white and the text to black.
body {
background: #fff;
color: #000;
}You can choose a grey for the text as well, but make sure it’s easy to read against a white background and that it’s monochromatic.
Choosing the right font
When people are reading on a screen, they tend to want a sans serif font, such as Verdana, Arial or Helvetica. But when they’re reading on paper, they tend to want a serif font, such as Palatino, Georgia, or good old Times New Roman.
You can easily switch the font family used in your print stylesheet.
body {
font-family: Palatino, Georgia, serif;
}You can also adjust the font size to be in pt, making it even easier to read on a page.
body {
font-size: 12pt;
}Don’t forget — if you’ve changed the font or size of any headings or other bits, you’ll need to change them in the print stylesheet as well.
Clearing out special effects
In my example page, I played around a bit with text-shadow to give it just a little more ambience. But a drop shadow is going to be incredibly annoying on the printed page, especially since it’s on the first letter of each paragraph.
You’ll need to remove effects that you put on the page in your print stylesheet. Thankfully, for most of them, you don’t have to put in all the details, a simple none will suffice.
h1 {
text-shadow: none;
}Dropping in link references
If your page has a lot of links in it, and you think people might want to visit those links, you should think about putting the links into the text. This used to be a painful process, with a lot of display: none and display: inline and whatnot, but, thankfully, the :after pseudo element, content property, and attr function can be used now.
a[href^=http]:after {
content:" <" attr(href) "> ";
}Clearing out unwanted items
When you print out a page, you don’t care about the menu, or the advertisements, or that video that’ll never play no matter how many times you tap the button with your finger.
Just add in the elements you want to get rid of and display: none them.
ul.menu {
display: none;
}
iframe {
display: none;
}Adding in new items
Sometimes you also want to add in a little extra, like a note at the end that says where this print out came from. This takes a little more work because you have to change the main stylesheet as well as the print one, but it can be a nice touch.
Add an extra <div> or <p> with a specific class or id, and then, in your main stylesheet:
div.note {
display: none;
}And in your print stylesheet:
div.note {
display: block;
}Instantly, your print-outs have a nice little note.
Converting your images
Sometimes, it’s important to keep the images in the printed out page, especially if it’s something like a product page. But you also don’t want them wasting toner or pages printing out giant images.
Look at the images you want to keep, figure out how you can change them, and then put those details into your print stylesheet. If the images are set to float to the right or the left, consider having them centred on the page. If they’re large images, look to shrinking them down.
And if they’re colour images, you can now use filter to make them greyscale.
div.image {
float: none;
text-align: center;
}
div.image img {
filter: grayscale(1);
max-width: 400px;
width: 100%;
height: auto;
}Keep experimenting with your print stylesheet, and soon you’ll have a page people will want to print out!
(Featured image by Brett Jordan on Unsplash.)
