Beautiful Printable Pages with CSS
In Donor Tools every page is a report. Adopting this simple philosophy has allowed us to almost completely eliminate the need to build dedicated reporting features. And it was almost effortless to implement – it took maybe a couple of hours.
CSS aficionados should recognize this trick already: it’s called print style sheets. Basically you have one set of stylesheet for screen display, and a separate set of styles for printing. This works in just about every modern browser, even the inferior ones. And the great thing about print styles is that we often don’t need to worry about complicated positioning or page flow – just provide some basic style instructions, hide non-printable controls and headers, and it looks beautiful on paper.
This has, of course, been discussed elsewhere, but I’m going to show you how we put it to work for Donor Tools.
I like to use CSS Edit, which in my opinion is the cream of the crop of CSS editors.
The first thing I do when I’m ready to start working on the print style sheet is to think about what I want to show up on paper, and what should be hidden. Opening up my page in CSS Edit, I use the X-ray tool to examine the blocks and divs that construct the page. Good HTML construction at this point is crucial to being able to target specific areas of the page.
Next, I turn off all the screen styles and switch the print stylesheet to display on the screen. Donor Tools is built in Rails, so a quick edit to the application.html.erb file is all that’s needed:
Flipping over to CSS Edit, now I can edit my print.css stylesheet with instant feedback.
I’ve turned off a lot of divs by targeting the names of the elements, and then applying
display:none;. I also made a generic style called
.noprint that I can apply to any random elements that should not print.
That’s it! Now, when someone uses their browser’s print function, they’ll get a beautiful, well-styled printout of what they’re looking at on the screen with no extra effort.