Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Cascading Style Sheets Part 4: Selective Printing

Last updated Oct 17, 2003.

By Sarah Horton, author of Access by Design: A Guide to Universal Usability for Web Designers

The experience of a printed web page is vastly different than that of its onscreen counterpart. For one thing, we don't generally click on paper, whereas we're all over clicking on screen. Also, most of the time we print in order to read, a context in which many of the common web page elements are unnecessary and distracting.

When you come right down to it, design for screen and design for print have only one thing in common: the content. That said, the sad truth is that most web pages look the same on screen and paper—the same navigation systems, the same low-resolution graphics, the same cheesy ads. The neglect shown print web pages is unfortunate since styling for print is as easy as pie. It takes only a little forethought and a sprinkling of print-appropriate styling to produce printed web pages that delight the eye and are a pleasure to read.

One of the key tasks in designing for print is selecting which elements to include when a web page is printed on paper. This article provides rationale and techniques for selective printing, in which only relevant and appropriate content is printed. The next article will cover styling techniques for producing effective and engaging print designs.

Relevance

Most of the time we print web pages for reading, but we also print for other purposes, such as record keeping (e.g., transaction receipts) and convenience (e.g., driving directions). Many of the elements that are essential in an onscreen environment are superfluous on paper. In particular, interactive elements are not useful when printed. So, our first task in designing for print is determining which elements are relevant and which are not.

For the most part, what's relevant on paper is the essence of the page: the content. Printouts should contain content with minimal embellishment. This means nixing things like navigation systems and unnecessary graphics. A good way to get a sense of print relevance is by looking around popular web sites and comparing screen and print versions. Take a look at an article from The New York Times and compare the content that is displayed onscreen to what appears on the print version. The screen version has extensive navigation, advertising, images, and myriad opportunities for exploration and discovery. The print version contains the masthead, the article, some footer links, and one discreet advertisement. This difference makes sense because content in an online, interconnected, dynamic environment includes so much more than the text of the article, whereas in print, the article is the content. (While you're there, try printing directly from the main page, and not the print version. That's right—no print styling.)

While it's important to determine which elements should not display in print, it's also important to consider what is relevant on paper that may not be relevant on screen. For instance, a page URL is useful on a printout in case you want to return to the page, or are constructing a citation and need details about the page provenance. Onscreen, the page URL need not be part of the design since it is readily available in the location bar. In this case, the page URL should be part of the source document, but displayed only when the page is printed.

Appropriateness

Some items in a screen display may be relevant on paper, but are presented in a format that is not appropriate to the medium. For instance, a 72 pixel-per-inch, 64-color GIF banner graphic is appropriate for on-screen display because it matches screen resolution and loads quickly. However, the same low-res GIF looks pixilated and fuzzy when printed. In this case, it's worthwhile to replace the screen-appropriate image with something better suited to a higher resolution print context.

One option is to supply alternate, high-resolution images, as described in this article on High-Resolution Image Printing at A List Apart. As you can see from the article and associated comments, there are several techniques for swapping images, but none gets past the fact that both low- and high-resolution images must be downloaded, even for users who are not interesting in printing. For large images, the cost of this method is too high to be practical.

On the other hand, text graphics make great candidates for replacement, but with text rather than a second, higher-quality graphic. With this approach, instead of a site's banner graphic, the print version would contain the text—"The New York Times" or "A List Apart"—as text rather than image. Even though the typography cannot be styled to match the graphic version, with some print-appropriate CSS styling, a text-based banner will look much more elegant than a low-resolution GIF. Read on to learn how to code print content and control its display.

Coding for Selective Printing

The CSS display property is our tool of choice for showing and hiding web page elements. Setting an element's display property to "none" causes the element to load in the browser as part of the source document, but not be visible onscreen or when printed (Listing 1).

Listing 1: CSS code for hiding elements

#banner { display: none }

Interestingly, some software, including the popular JAWS screen reader, does not read content whose display is set to none, even though the content is in the source document. In some cases, this result has a negative effect on screen reader usability, particularly when used to hide elements that are required for use, such as field labels.

However, for selective printing, hiding elements from both visual and nonvisual users is advantageous. If the redundant content were not hidden, screen reader users would hear both screen- and print-oriented content. (Read more about Screenreader Visibility at CSS-Discuss and review the Screen Reader Visibility Tests and Access Matters.)

But before we can press display into service we need to take steps to ensure that our source document is coded for selective printing.

Provide All Content in the Source Document

When we anticipate and are deliberate about print design, we will likely require elements, such as replacement text for a banner graphic or a page URL, that are not part of standard screen design. To display these elements when printing, we need to code them into the source document (Listing 2).

Listing 2: Image-based screen banner and text-based print banner

<div id="screen_banner">
<img src="banner.gif" alt="Piggy Banks Galore" width="540" height="90" />

</div>

<p id="print_banner">Piggy Banks Galore</p>

Code Elements So They Can Be Referenced

In order to apply the display property effectively, elements must be addressable by a CSS rule. This means that elements intended to be hidden need to have a unique selector so that they can be referenced and their display property set using CSS. Say, for example, you have a paragraph that you would like to include on printouts explaining copyright policy for commercial distribution. If that paragraph is tagged with simply a <p> tag, there's no way to reference only the copyright paragraph using a CSS rule. Setting the display property of <p> to "none" will cause all paragraphs to be hidden (Listing 3).

Listing 3: Without a unique selector, all paragraphs are hidden onscreen

HTML

<p>Federal law provides civil and criminal penalties for the unauthorized reproduction, distribution, or reuse of any of these materials. Redistribution or commercial use without the expressed, written permission is prohibited.</p>

Screen CSS

p { display: none; }

Instead, assign the paragraph a unique class or id and use that to reference the paragraph in a CSS rule (Listing 4).

Listing 4: Paragraph id-ed and hidden on screen

HTML

<p id="copyright">Federal law provides civil and criminal penalties for the unauthorized reproduction, distribution, or reuse of any of these materials. Redistribution or commercial use without the expressed, written permission is prohibited.</p>

Screen CSS

#copyright { display: none; }

You may want to control the display of an interface element, such as breadcrumb navigation, which contains several tags, in this case, a heading and a list. In order to reference and hide the entire element using a single CSS rule, wrap the tags in a <div> element and use CSS to toggle its display (Listing 5).

Listing 5: Breadcrumb navigation coded for screen display only

HTML

<div id="breadcrumbs">
<h2>You are here:</h2>
<ul>
<li>Home</li>
<li>Ceramic</li>

<li>Classic</li>
</ul>
</div>

Print CSS

.breadcrumbs { display: none; }

Summary

Selective printing begins with an appreciation of the print side of web page design. People print web pages, and will enjoy a printout tuned to the print context, featuring print-appropriate content and cleared of screen-related clutter. Plan ahead and prepare your source documents so that they perform well on paper.