The web is a necessarily translatable media form. Websites can be viewed by many different browsers, mobile phones, video game consoles, PDAs and other hybrid devices like the iPhone. With so many high technology possibilities it’s often easy to lose track of the humble printer. Print versions of websites have presented some unique problems for Hop Studios, and we have devised a couple of good solutions for dealing with them (aided, as always, by the fantastic work of Eric Meyer).
No doubt in your travels around the web, you have seen the most popular solution for printing from web pages, the homely click here for a Printer-friendly version or print version. This is generally just a link to a simple HTML document with its styles removed. And, as you might have guessed, this is bad.
Why is this bad? First, it forces you to maintain two separate pages with the same information on it, creating the possibility of discrepancy, even if you are working out of one databsae—even worse if you’re using plain HTML files. If you are using flat files, it doubles the number of pages on your server, with a printer-friendly duplicate of each page. Finally, (and this is the big one) it’s inelegant. It’s like putting on a play but having your actors change costumes on stage. It distracts from the main event, showing all your undesirable bits to the people you want to impress!
A much better solution is a Print Style Sheet. CSS documents can be designated as applicable only for a specific media type. You can essentially say: “These rules are for the web, and this other set is for print.” This is good because there are a lot of things on web pages that you don’t want to print, and a print style sheet can reduce or eliminate them for you. By using a Print Style Sheet, you have traded many pages for one, and discrepancy for accuracy.
These are the things I generally remove or change in a print style sheet.
- Remove the navigation. What do you need that for? You can’t click on anything in print (yet!) and it just wastes space.
- Remove background Colors. It’s going to burn through your ink printing that solid background, and because of the RGB to CMYK color shift, it might make the text unreadable.
- Make your text darker. I won’t say black, but that wouldn’t hurt.
- Change your text from a sans-serif to a seriffed face. Typefaces with serifs are considered easier to read in print.
- Converting pixels to points. Things on the page are measured differently than things on the screen, and I try to make sure that I have as much control over that as I can.
- Adjusting the leading. Making the text more readable.
- Fixing floated elements. This is a well know problem, text in floated divs will not print across multiple pages.
- Just take things out. Buttons, forms, anything that wastes ink or paper and doesn’t function on the page are all targets.
The best practice is to go through your style sheet and edit or turn off styles as needed, but a quick and dirty work-around is to add some mark-up to the html and this style to your print style sheet:
.print_remove {
display: none;
}
Now adding the “print_remove” style to anything on the page will make it disappear in the printed version. Magic.
Eric Meyer lays out a great case study in his post on A List Apart. He is smarter then me, and covers print style sheets in greater detail.
Comments