It never ceases to amaze me that people have to look for a link or a button that says “Print” on a web page, especially considering there’s a miracle technology that makes that step unnecessary. Sadly almost nobody uses it, even though it’s… 10 years old.
Not only is it silly to require an extra step for printing, but using print stylesheets would save some ink for anybody that doesn’t use the printable link. And of course, there’s loads of people that use print-to-PDF to save articles for later without wasting paper.
What Are Print Stylesheets?
Most web sites implement their print function by taking you over to another page, which is formatted differently for printers – but this really isn’t necessary. Every browser implements a simple CSS technology known as Print Stylesheets, which is nothing more than a file that specifies elements to hide when your browser prints the page.
For those that are unfamiliar, CSS means Cascading Style Sheets, and it’s how your browser knows how to format the HTML source code for a web page into what you actually see on the screen. Everything from fonts, colors, borders, and even background images can be specified in the style sheet.
Adding a print stylesheet is as simple as plugging this one single line into your page HTML—the media=print part of the code tells the browser to only use this style sheet when printing.
This file generally looks something like this:
Yes, it’s really as simple as that. So how does it work? Here’s an example of a normal web page on the left, with all of the navigation, logo, and ads clearly visible with the ID associated – and on the right, the same page with the print stylesheet applied, hiding all of those elements.
Obviously you’d prefer to print one of these over the other, right?
Examples of Print Stylesheet Failure
Unfortunately, there are just loads of huge web sites that haven’t bothered to implement this at all. Take a look at what happens when you try to print from the New York Times:
Some sites, like the Gawker network of sites, are even worse. Not only do they not have a printable view, when you do try and print, it resembles ink soup. As far as we can tell, there’s no way to print from a Gawker site without using a separate service like Readability, or manually highlighting the content on the page, which is nearly impossible on their new design.
It’s sad, really. Loads of the largest sites just completely fail to bother implementing this feature.
Thankfully, Some Sites Do Use Them
Here’s an example of a properly formatted printable view – without having to bother finding some print link. The BBC News site neatly formats the articles for print, complete with a custom header. They do include comments in the print view, but it’s still a job well done.
There’s quite a few other sites that do the same, like ArsTechnica and… our site, but it would be silly to show screenshots of all of them. In our research, the sites that properly implemented them are few and far between.
So to wrap up… please take the 5 minutes required to implement a print stylesheet for your site!
