Print Stylesheets and Head JS

Dec 13, 2010
Episode 47
This week, Nick dives into print stylesheets and Jim introduces Head JS.
Spotlight

Thanks to those who make Doctype possible!

People print out web pages more often than you think, whether it’s for concert tickets or boarding passes. Most of us geeks use an e-reader for offline reading, but many people prefer to print stuff. And, with the recent introduction of printing for Apple’s line of iOS devices, it’s a good time to review print stylesheets.

Code

Just in case you can’t remember how to set up a print stylesheet, here’s the code you’ll need. The important part, is to make sure that you set the media attribute to print, rather than screen. That way, the browser will know that it should apply this stylesheet when printing.

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

While we’re still on the subject of code; A great way to make sure your print stylesheet is heading in the right direction, is to look at your website without CSS. This isn’t 100% fool proof, but semantic markup is the foundation of a great print stylesheet.

Tips

24ways has one of the best print stylesheets on the web. Check out the design, and notice the complexity of the background. There are many layers of transparency, texture, and color. However, when it’s printed, the background is reset to white and removed entirely, so that you can focus on the content. The larger point I’d like to make here is that your website shouldn’t look like a full color magazine when it’s printed. If people really want to print an exact image of what your website looks like on screen, they can always just take a screenshot and print it.

Another great example of printer friendly stylesheets comes from A List Apart. First, they’ve set the font size to something that’s very readable on a piece of paper. People have a lot of different opinions on how to set the font size in a print stylesheet, but I’m going to recommend that you set it to 12 points, which is the de facto default in print.

The next thing you should notice is that much like the printed article from 24ways, the print stylesheet is designed. Just because you’re printing something and simplifying your design, doesn’t mean you have to abandon design all together. There are still some nice things you can do with typography, horizontal rules, fonts, and so on. Finally, Notice how, when text is linked, the full URL is printed in parenthesis right after the text. This is important, because if you didn’t include the URL, there would be no way to figure out what this link points to.

Finally, notice how, when text is linked, the full URL is printed in parenthesis right after the text. This is important, because if you didn’t include the URL, there would be no way to figure out what this link points to.

Head.js

Head.js is a JavaScript library that provides a loader for your JavaScripts that will load the files in parallel, and reduce your page load time.

Check out the full documentation here