Developer

A print alternative without the extra work

Providing printer-friendly versions of your content used to mean creating a separate copy of the content designed specifically for the print device. Thanks to cascading style sheets, there's a better way.


I remain a big fan of the printed page. You can hold it, fold it, mark it up, and take it with you without the need for outlets or adapters. Technologies such as eBooks and audio books will never overtake the printed word. Nowhere is this more apparent than the Internet, where sites routinely offer printed versions of a page. This makes it easy to print only the content (if the page is properly designed) without extra elements such as navigation bars and advertisements. Providing this feature has usually meant creating a separate copy of the content designed for the print device. Thankfully, this extra work is no longer necessary when you use cascading style sheets (CSS). Let’s take a closer look.

Why provide an alternative?
Many people wonder why a print option is even necessary. This question seems ludicrous to developers, since we often stumble upon Web sites with articles or code that we need to print and share with others or save for later. The problem with printing the content from the browser is that margins are not properly set and content often runs off the printed page. In addition, other design elements (navigation links, pictures, advertisements, etc.) are not essential to the printed page. Providing a clear, crisp print option leads to happier visitors with a higher likelihood of returning.

The CSS approach
CSS provides a wonderful approach to separating presentation and content. It allows you to abandon the antiquated process of using HTML tables for page layout. (See the article "Abandon tables, simplify design with CSS.") These tables did not often translate into suitable print output. CSS2 (CSS version 2) provides a way for Web developers to specify which items are and are not printed. Actually, print is not the only target media device. The following list includes every CSS2-supported media type:
  • All—Suitable for all devices
  • Aural—Speech synthesizers
  • Braille–Braille tactile feedback devices
  • Embossed—Paged Braille printers
  • Handheld—Handheld devices (typically small screen, monochrome, limited bandwidth)
  • Print—Paged, opaque material and for documents viewed on screen in print preview mode
  • Projection—Projected presentations; for example, projectors or print to transparencies
  • Screen—Color computer screens
  • TTY—Media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities
  • TV—Television-type devices (low resolution, color, limited-scrollability screens, sound available)

In this article, I'll concentrate on the print option and cover the screen option as well. You can associate a media type with style sheet elements using a variety of methods.

Assigning a media type
The first approach involves using the HTML link tag and its media attribute. The following line uses this format; it loads an external style sheet that's valid only for printed pages:
<link rel="stylesheet" type="text/css” href="sheet.css" media="print" />

Another approach uses the @import directive. The following line imports the external style sheet for printed pages:
@import url(sheet.css) print;

The final method is used within the actual style sheet code. The CSS @media tag surrounds the affected item, and the selected media type is assigned to the block. The following sample shows this format in action:
<style type="text/css">
@media print
{
body { font-size: 12pt; background: white; }
}
</style>

The syntax is simple, and you can assign multiple media types (in each method) by separating them with commas. The concept may seem good, but the point is better delivered with an example.

Media types in action
Let's look at a simple example to get a better grasp of how this approach works. The following HTML is the basis for the example:
<html>
<head><title>Builder.com CSS Test</title>
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
</head>
<body>
<h1>This is a test document</h1>
<div class="navbar">
<a href="link1">link1</a> | <a href="link2">link2</a>
</div>
<div class="content">
This is the body of the document. Please print this.
</div>
<div class="comments">
Please send us your <a href="link3">comments</a>
</div>
<h2>@ 2004</h2>
</body></html>

This is a simple HTML document that displays a title, some links, text, and a copyright footer. We want only the title, text, and copyright to appear on the printed page. Everything will appear on the screen. To do this, we might construct the following style sheet:
<style type="text/css">
body {font-size: 12pt; font-face: arial; line-height: 1em; background: yellow; text-decoration: underline; }
h1 {font-size: 20pt; font-weight: bold; }
.navbar, .comments {font-size: 14pt; font-color: red; }
h2 {font-size: 8pt; font-weight: italic; }
.content {margin-left: 10%; }
</style>

Now we must create the style sheets to present the data for both screen and print. For the screen layout, we want the format shown in the preceding style sheet. The printed output will contain everything but the navbar and comments area, as well as a few other changes:
body {font-size: 12pt; line-height: 1em; background: white; margin-left: 10%; }
h1 {font-size: 20pt; font-weight: bold; }
.navbar, .comments {display: none;}
h2 {font-size: 8pt; font-weight: italic; }
.content {margin-left: 10%; }

Notice that display:none is used to hide an item. In this case, items are hidden or omitted from the printed page. We can place these CSS elements in the head portion of the HTML page:
<head><title>Builder.com CSS Test</title>
<style type="text/css">
@media screen {
body {font-size: 12pt; line-height: 1em; background: yellow; text-decoration: underline; }
h1 {font-size: 20pt; font-weight: bold; }
.navbar, .comments {font-size: 14pt; font-color: red; }
h2 {font-size: 8pt; font-weight: italic; }
.content {margin-left: 10%; }
}
@media print {
body {font-size: 12pt; line-height: 1em; background: white; margin-left: 10%; }
h1 {font-size: 20pt; font-weight: bold; }
.navbar, .comments {display: none;}
h2 {font-size: 8pt; font-weight: italic; }
.content {margin-left: 10%; }
}
</style></head>

You'll notice items appear and disappear when they're viewed on the screen and the printed page. Also, you may notice some overlap between the two styles. We could combine some elements to reduce redundancy.

Choose your target
The Web has developed into a rich platform with a variety of client devices. This includes handheld phones, Braille devices, printed output, and the popular color monitor. Delivering content to a wide range of devices can be frustrating, but CSS provides a way to streamline the process with its broad media support.

Editor's Picks