How to make a great print stylesheet
I just finished making a new print stylesheet for AlisotheGeek.com. For any website with a sidebar or a background image, print stylesheets are essential. Using “File » Print” is so much more intuitive for users than searching for a “Print this page” button on a website, and creating print-friendly versions of all your pages is a tedious, time-consuming task (especially if you have a blog). A print stylesheet is an elegant alternative.
Set up a print stylesheet
For those who don’t know how to make a print-specific stylesheet, it just takes the addition of one attribute to your CSS links in the <head> section of your site:
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />The “media” attribute tells the browser to pay attention to stylesheets only in those situations. Add ‘media=”print”‘ to your stylesheet link for a print stylesheet. If the “media” attribute is left out, that stylesheet is called in all display situations, including print.
Hide unnecessary information with display: none
In the case of my website, I decided to hide things like the sidebar, the email subscription form, and the social media/bookmarking links at the end of each post. Do this with a simple display: none; at the top of your stylesheet. The user isn’t trying to print out your sidebar; they’re trying to print the article they just read.
Add back any global styles to make your printed page match your website
This step is only necessary if you left your main stylesheet out of the mix for printed pages. You will probably want your fonts to be the same on paper as they are on a screen, so make sure to re-insert those styles in your print stylesheet. The same goes for classes that apply global formatting to elements, such as floating images left or right.
Add extra information to your website to display only in printed pages
On my website, you’ll notice that the only thing in the footer is the copyright statement. When it’s printed, the URL “alisothegeek.com” appears in the right side of the footer. This is something I added in my footer (you can see it in the source code) and I set it to hide in my main stylesheet, but not my print stylesheet. Things like this can give a little extra clarity to users who print an article and later forget where it came from.
Also, the header on my site is one giant background image, with no text. Many modern browsers automatically turn off background images when they print pages, in order to save ink or toner. For the benefit of a user printing my site (and for the benefit of screen readers & search engines) I do have text in the header of my site, and CSS is hiding it on the screen. This way, it shows up on printed pages but not in the browser. I also added my logo next to that text using an <img> tag so it would still print.
Make hyperlinks useful on a printed page
Printing out a hyperlink is just like printing out text that’s underlined. It means no more to the reader than regular formatted text. To keep hyperlinks useful on a printed page, I added this code to my CSS (taken and modified from this article at A List Apart):
.entry a:after {
content: " [" attr(href) "]";
font-size: 80%;
font-weight: normal;
}This adds the URL after each hyperlink in my post’s content (which is div class="entry") in slightly smaller font surrounded by square brackets. This way, a printed article still retains the benefits of its hyperlinks.
Make final touches to keep it looking classy
Take some time and print out some test pages. Make formatting tweaks as necessary to make sure you didn’t miss anything from your main stylesheet that you want to keep in printed form. Add padding or margin where it will help things look nicer. For many websites, a printed page is a lot wider than the main content area is on the screen, so take that into consideration as well.
I hope this post helps some website builders out there with print stylesheet creation. It’s something that is often overlooked in website design, but something users really appreciate when it’s done right. Happy coding!