How to Make an Effective Print Cascading Style Sheet

If you're a web developer you want to create exceptional cross-browser websites, but what happens when a client wants a beautiful printable page? From personal experience, I've ran into some projects where creating a printable version of a webpage took just as long as (or longer than) creating the actual page itself. It's enough to deal to cross-browser issues - Internet Explorer differences from Mozilla Firefox issues... Firefox issues from Safari issues... Internet Explorer 6 issues from Internet Explorer 7 issues from Internet Explorer 8 issues! The list goes on and on and on. On top of that, there are these new browsers, and new version of browsers, and the code you wrote a month ago is not guaranteed to work on these new browsers... ARGH!!!!!!!!!! (sorry, I had a Charlie Brown moment)

I want to save web developers some time and some aspirin by giving you a few pointers on creating a print stylesheet that your client can be happy with.

Tip #1 - Consider that not every user has the option selected to print background colors and background images.

Remember that not every user thinks to check certain options in their web browser. If you've been given a design that has a print layout full of background colors and images, you may get an issue back from your client saying that they can't see any of them. After arguing back and forth that you can see them and they can't, come back to this fact - not everyone has that "Print Background Colors and Images" option checked in their browser options.
So what do you do? Make your print stylesheet such that it won't matter too much. You may have to create print styles such as the following:

body, p, div, td.classname, #content { background: none; }

This will ensure that you won't get any printable backgrounds in your printable page.

Tip #2 - Keep your printable page at about 600 pixels wide.

Your viewable page can scroll as wide as your monitor's resolution, but an 8.5 x 11 page is an 8.5 x 11 page no matter how you style it! That's why I recommend keeping your printable page within the boundaries of 600 pixels wide, or as close to that as possible. You may have a selector set to width:auto in your main stylesheet, but it'll have to be fixed in your print stylesheet.

Tip #3 - Use color in your printable page only when necessary.

This is similar to tip #1 in that some people may not have the option selected to print color, but the other thing to consider is that not everyone has color printers. In addition to that, not everyone has the ability to see color that well. I'm not saying it's a waste of time to create beautiful, colorful printable pages, but just keep your users in mind to some extent. Make things as black and gray as possible, or as your client demands. Make sure the user can still get the same great information in black-and-white as they could in full 16-bit color.

Tip #4 - You may have to play around with positioning, or change positioning, for your printable page.

I mean this in two ways. The first way is in literal positioning of elements on the page. What was floating left or right may have to just flow within the page, or disappear altogether. The other way I mean is in the actual CSS code itself. For example, what you may have as position: relative, you may have to do as position: absolute, or position: static, and vice versa. For some reason print stylesheets don't have the same flexibility as viewable stylesheets, so literally you may have to play around with this to see what works for what browser.

Tip #5 - If you have fixed widths in your viewable page they may need to become automatic widths in your printable page.

This may seem like the inverse of tip #2, and to some extent it is. I'm referring more so to the inner elements of a page instead of the whole page itself.

Let's say you have a div with id container. That element has a fixed with of 300px. In your printable page it'll only take up 300px of space. The goal here is to conserve paper, so you can change it from width: 300px to width: auto and it'll spread across the inherited width of your printable page. Of course, this won't work for every element possible, but it's a possibility for most.

Tip #6 - Be sure to put your print stylesheet ahead of any other stylesheets in your code.

I've had incidents where I've used conditional statements for Internet Explorer and then tried to print a page and I still had filter properties showing up (IE6 coders know why I'd be using this). So what I've found to be helpful is to make sure that the reference to your print stylesheet comes last after all regular stylesheets and conditional comments.

Tip #7 - If you have interactivity in your webpage, remove it from your printable page. The same goes for hyperlinks and anything else that may be clickable.

There's no real point in having animated carousels, interactive flash, or anything else interactive in your printable page. Most likely, people just want the available information to print out. At best if you need to leave the interactivity in the page, either print out the most recent elements on screen or if you need to print out various states, somehow incorporate those states on a page. Otherwise, I don't recommend having interactive elements available to print. The same goes for clickable links. Create a style that deactivates the link; you can leave them a different color if you need to distinguish them from regular text on a page.

Tip #8 - CSS hacks are perfectly acceptable in your print stylesheet; don't be afraid to use them.

I'll admit it; I'm a fan of CSS hacks. More than that, sometimes they're absolutely needed! Whether that's due to browser differences, browser bugs, or website design. Do I recommend always using hacks? Absolutely not. I do recommend using them wherever they're needed, especially in your printable page. I've had situations where I've had to add extra hidden containers in a page and display it in the printable page which I think is beyond extraneous! I've also had situations where I had different style definitions for IE6, IE7, Firefox 2, Firefox 3, Safari, etc. So yes, at times it's necessary, especially if you're trying to accomplish a similar look across multiple browsers.

Tip #9 - Try to keep every viewable page contained in one page if possible.

I've run into issues with data breaking on multiple pages, as well as layout breaking (especially if it's floating layout) when it has to be displayed on multiple pages. Sometimes it'll make the first page blank and then start displaying on the second printing page, which is just beyond weird.
One way to resolve this is to use tables wherever possible (I'm sure I'll get some comments on this). I know some developers aren't fans of using tables outside of tabular data, but I like using tables for layout purposes as well. Also, make sure that the data that spans across multiple pages starts as close to the top of the page as possible. Again, you'll need to play around with browser differences but this should be a good starting place.

Tip #10 - Consider the rarely used page-break-inside, page-break-before, and page-break-after properties for your print styles.

Here's how it'll look in your CSS code:

selector { page-break-after: always; }

#element { page-break-inside: avoid; }

.className { page-break-before: auto; }

These may come in handy if you know where page breaks will occur in your printable page.

Hopefully I've provided you some helpful tips for creating a print stylesheet that'll make your printable pages as good as your viewable pages. If you don't want to waste paper, then consider reviewing with your Print Preview option in your browser before doing an actual printout. Usually it's really good about accuracy as far as what your printout will actually look like. Happy printing!