CSS for Printable Web Sites

Posted by Mary Gammel on February 1, 2009 under Website Quality | Be the First to Comment

Did you ever print out a web page and get a page or more that was unreadable, black, or mostly blank? It’s a frustrating waste of ink and paper. This article not only explains why these printing problems happen, but also proposes a printer-friendly solution that most web sites can incorporate into their design.

Why do web sites print out badly?

• Web sites are designed for viewing on a monitor
• Complex layouts, animation, and graphics don’t translate well to the printed page
• Use of foreground and background colors such as light text on a dark background
• Oversized graphics, especially now that widescreen monitors are available
• Small fonts that look great on the screen but appear tiny on a printed page
• Absolute positioning of page elements
• Web browsers handle printing differently
• Printer drivers have different capabilities

How do you fix web site printing?

The easiest way to fix printing of a web page is to add a printer style sheet. This is a cascading style sheet specifically created for the print media type. When a site visitor prints a web page from their browser, the styles in a printer CSS style sheet override those in the other style sheets created for screen media types.

What should you include in a printer CSS style sheet?

The easiest way to use a printer style sheet is to have a standard layout for your site. This layout should be designed for screen as well as for potential printing.

 For example purposes, let’s use a layout that has a header, navigation bar, sidebar, main content section, and footer. It has a banner in the header and submenu navigation with ads in the sidebar. The footer has copyright and contact information. Text on the site is Arial in various colors, sizes, and weights. Each major section of the site uses a different background color that matches its navigation button.

A printer style sheet could do the following for this web site:

• Hide the navigation bar, sidebar, and ads.
• Change the text font to Times New Roman, using 12pt for the basic paragraph font and corresponding sizes for headers, etc.
• Print all text in black on white. You can still use different colors for text which translate well into grayscale, but stick with the white background to save on toner.
• Print a different graphic instead of the banner. This is highly recommended if the banner prints out more than 7 inches wide.
• Adjust margins, padding, and borders to fit the printed page better.

Sometimes you need to try out a few versions of a printer CSS sheet before you get it right. A good way to do this without wasting paper is to use the Print Preview function of your browser. And don’t forget to test printing with different printers from several browsers.

Related Links

For more information on printer style sheets, check out the related links below. They provide more hints and some examples.

What is a Printer-Friendly Web Page?

CSS Styling for Print and Other Media

Quick Tip:

Print a few pages of your own web site and note any problems you see. For details on what to look for, see our do-it-yourself web site tests and tips.

Did you know?

Printer drivers and device capabilities affect how web sites print. So, try printing on several different printers such as ink jet and laser to see the differences. The printable area on ink jet printers is generally smaller than on laser printers. So make sure items aren’t cut off if you print on an ink jet.