Tips and Tricks: Chicago web design, copy writing, graphics, digital photography, database design, working with people, and getting a web project up and running.

Printer Friendly Pages using CSS  - or

Using CSS Style Sheets to Control Printing

category: css

When I want to print web pages, I usually go through a lot of cut and paste shenanigans. I can't stand to simply print the page, find the text of the short article spread over three sheets of paper, and end up with pages of uselss junk. I usually copy the entire page to the clipboard, paste it into a text editor or a word processing program, and then try to delete all the worthless junk. Exceptions to this messy rule are online editions of magazines and newspapers, which offer printer friendly versions of much of their material.

When I print from web pages, I am usually interested in the text. Yes, the colors, images, and navigation tools are pretty, but they aren't useful on a printed page. I want black words on a white page. Why waste paper and ink?

While the printer friendly pages of newpapers and magazines work well, it seems a huge waste of time and resources to create and publish two separate versions of everything.

Of course, using CSS, there is another way. You can create a printer-friendly style sheet. The print style sheet includes and modifies headings and text. It can specifically exclude ads, navigation, images, and whatever else you think would be less than useful on a printed page.

Linking to a print friendly style sheet depends on defining media types. In CSS2, there are 10 supported media types.

all - suitable for all devices (default)
aural - intended for speech synthesizers
braille - intended for tactile feedback device
embossed - intended for paged braille printers
handheld - intended for handheld devices
print - intended for printed or print previewed documents
projection - intended for projected presentations
screen - intended for computer screens
tty - intended for teletypes or terminals
tv - intended for televisions

Your HTML link can call a different style sheet depending on the requesting media.
For example, you can link to a stylesheet using this line of code.

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

To make this code refer to the screen, add the media attribute.

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

Now the code tells browsers that the basicstyle.css style sheet is for screen media. To create a print friendly page, we link to a separate style sheet for print.

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

The easiest way to create a print style sheet for the Awesome weblog was to copy, rename, and modify the original style sheet. Use the display property to remove unwanted visual elements. For example, use

#logo {display: none;}

to get rid of the logo.

The Display property works for classes as well as named elements, so, to refine your printed results, you can create a class="noprint" and include it in paragraph tags or whatever. Outside the boundaries of templates, you can use carefully constructed find and replace statements to automate the process. Then, in your style sheet, code:

.noprint {display: none;}

When my styled printout contained only what I wanted to see, I modified the font face, font color, and font size for print and reset left and right margins to use the full width of a printed page.

I chose to apply the print style sheet only to full entry pages. I'm assuming that readers want to print the text from individual entry pages. If readers want to print exactly what appears on the screen, they can print the home page, which will include graphics and navigation.

She said on 09.07.05 @ 04:02 PM CST