Styles for printing and other media types

Printing a web page doesn’t have to be a sucky experience. Today I’m going to write a very simple approach that can be taken to allow people who may choose to print (heavens!) a page on your site, without sucking out all of their color cartridges.

The medium is important

So, you’ve gone through the effort of making a nice looking site that works well. It’s fast, light, personally relevant, and highly interactive. Great. Now go to one of the personally relevant pages and print the page. What’s the result? In my opinion, when a user prints a web page, they desire to print the content, not the entire page. The printed version of the page should be optimized for the medium of paper. Indeed, links are not clickable on paper, so printing the site navigation is generally not tremendously beneficial. Showing links as underlined doesn’t really achieve much alone, but showing the address that the link references along with the link would keep the printed copy valuable. Background images may not print as well as they look on screen, and may in fact make the paper copy harder to read, etc.

Media types

We can assign media types to our CSS. Easily. For example, the following defines style that only apply to computer screens:

In fact, “screen” is just one of many media types that are defined. The W3C actually defines the following recognized media types:

all, suitable for all devices
braille, intended for tactile feedback devices
embossed, intended for paged braille printers
handheld, intended for handheld devices (generally small screen and low bandwidth)
print, intended for paper copies and print previews
projections, intended for overhead projectors
screen, intended for color monitors
speech, intended for speech synthesizers
tty, intended for media with a fixed-pitch character grid such as teletypes. it’s important not to use pixel units for this media type.
tv, intended for televisions (low resolution, color, limited scrolling, sound available)

So how do you target what media type the CSS you’re defining is intended for? There are three approaches: using the media attribute; using @media, or using @import.

Targeting via the Media Attribute

Targeting via the @media rule

This import will only be applied when printing or in print preview. It will not be applied for computer monitors.

Targeting via the @import rule

This import will only be applied when printing or in print preview. It will not be applied for computer monitors.

Defining styles for multiple media types

Of course, there’s no need to repeat CSS declarations that apply to more than one medium. Just comma-separate the media types, as in the following examples:

Keep it real

I’ve intentionally focused on the print media type because support for other media types in the current generation of browsers and devices is hit and miss. It’s best to try it at the point you’re looking at supporting the device (e.g. handhelds, tv’s, etc.) because often times this approach is far less expensive to implement than alternatives that usually result in conditional markup.

Considerations for the print medium

The key thing to remember is that it’s not the screen. There’s no mouse. No keyboard. Just a piece of paper. Here are some things that will make the paper version helpful.

Use points, not pixels. If you’re using relative fonts, it’s easy to just specify a font-size in points for the body. That’s it.
Save ink. Especially color ink.
Don’t print ads. Why bother? Once printed, they’re not clickable.
Use care when printing images. Printing images that are part of the content is probably highly desirable, and printing the site logo may be expected, but printing a lot of other “look and feel” images that go along with the site is wasteful.
Hide unnecessary elements from printing using display: none;. If you created your page using semantic markup, isolating navigation, forms, sidebars, etc. should be easy to do in a print-focused stylesheet.
Consider exposing the link URL’s in the printed version of the document, as discussed below.

Exposing Link URL’s for Print

Although it’s currently supported only in Mozilla, Safari and Netscape 7, the :after pseudo-class allows us to print the URL of a hyperlink after the link itself, which is valuable when a document is printed. This can be achieved for all links in the element with an ID of “content” in the following manner:

This instructs the browser to render the url in parenthesis after the link itself and underline the links when printing (to help distinguish them when printed). Although it’s not supported by all browsers, it is very helpful to users using browsers that support it, and it’s very cheap to implement.

This post is closed to new comments.