Chapter 11: Print Styles

---

Previously, in Chapter 10, we learned of the different methods that are available to apply CSS to your documents. In this chapter, we'll explore print styles—assigning CSS that is used specifically when printing a web page. With a few CSS rules, we can ensure that our structured markup looks as good on paper as it does on screen.

To begin, we'll talk about media types and how they relate to serving device-specific CSS.

How Can We Specify Styles for Print?

Before we answer that question, we need to familiarize ourselves with the idea that we can assign media types to our CSS. Declaring a media type enables us to target our styles to a specific medium.

For instance, if we'd like a certain linked style sheet to be intended only for computer screens, we could add the media attribute to the <link> element as follows:

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

The preceding code ensures that the styles linked in this statement are intended only for computer screens. You may be asking, "What else would we be targeting?" The answer is ... quite a few possibilities.

Media Types

In addition to the screen value used in the preceding code, there are a handful of other possible values. Here's a full list of the recognized media types, defined by the W3C in their CSS 2.1 specification (found at www.w3.org/TR/CSS21/media.html):

• all: Suitable for all devices.

• braille: Intended for braille tactile feedback devices.

• embossed: Intended for paged braille printers.

• handheld: Intended for handheld devices (typically small screen, limited bandwidth).

• print: Intended for paged material and for documents viewed onscreen in print preview mode.

• projection: Intended for projected presentations—for example, overhead projectors. Please consult the section on paged media (www.w3.org/TR/CSS21/page.html) for information about formatting issues that are specific to paged media.

• screen: Intended primarily for color computer screens.

• speech: Intended for speech synthesizers. Note: CSS2 had a similar media type called aural for this purpose. See the appendix on aural style sheets (www.w3.org/TR/CSS21/aural.html) for details.

• tty: Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors shouldn't use pixel units with the tty media type.

• tv: Intended for television-type devices (low resolution, color, limited scrollability screens, sound available).

We'll be most concerned with the all, print, and screen media types for this chapter.

Two Ways to Target

The W3C tells us that there are two ways that we can assign media types to CSS. We illustrated one of the methods at the beginning of the chapter using the <link> tag and media attribute. Let's take a look at both side by side.

Method A: The Media Attribute

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

Just as we demonstrated earlier, in Method A we're specifying the screenstyles.css file to apply only to computer screens. That should exclude the rules that are contained in screenstyles.css from being applied when printing the page or when the page is being viewed on a projector, handheld device, or screen reader.

Partial Support

It's important to note that concrete support for all media types is somewhat wishy-washy. In an ideal world, all devices and browsers would adhere to whatever media type is specified. For instance, if we had said

 <link rel="stylesheet" type="text/css" media="handheld" href="screenstyles.css" /> 

one would hope that only handheld devices such as PDAs, phones, etc., would recognize those styles. Unfortunately, standards haven't exactly reached that far beyond the browser at the time of this writing, and not every device will support their respective media type.

For this reason, we're focusing on types that have real-world uses—such as print styles.

Method B: @media or @import

 <style type="text/css">   @import url("screenstyles.css") screen;   @media print {     /* style sheet rules for print go here */   } </style> 

The second method for assigning media types happens in conjunction with an @import or @media directive. For instance, when we're using the @import method for referencing external style sheets, a media type can be added along with it.

Also, the @media rule allows us to section off rules that are specific to a certain media type. As in Method A, we're using the @media rule to assign styles specifically for print.

In the Head or Externally

We've put Method A in <style> tags as an example, where it would live in the <head> section of a document. But we could also put the @import and @media rules in an external style sheet that we're referencing with the <link> element (see the section "Combining B and C for Multiple Style Sheets" in Chapter 10).

While the default value when specifying a media type is screen, typically all is recognized when no media type is assigned. This means that, by default, CSS is meant for all devices—screen, handhelds, projectors, screen readers, etc.

Multiple Values Allowed

When using either method, it's allowable to assign multiple media types at one time. For instance, if we'd like to assign a style sheet to both print and screen using Method A, it would look something like this:

 <link rel="stylesheet" type="text/css" media="screen, print" href="screenstyles.css" /> 

Multiple values are separated by commas within the media attribute. Similarly, if we'd like to use Method B to assign multiple media types, the code would go something like this:

 <style type="text/css">   @import url("screenandprint.css") screen, print;   @media print {     /* style sheet rules for print go here */   } </style> 

In the preceding example, screenandprint.css is assigned to both screen and print by specifying multiple media type values, while after that we're using the @media rule to section off styles for print only.

Now that we've outlined the two methods for specifying media types, let's look at how we'd use them to serve screen and print styles.

Separating Screen and Print Styles

Let's imagine that we'd like to serve two CSS files for the same document—one for screens and one used when printing the page. We'll use my personal site as an example.

I use the <link> element to reference master styles (styles.css) for the entire site. The contents of the styles.css file is simply an @import rule that applies an external style sheet, while at the same time hiding it from older browsers like Netscape 4.x.

So, in the <head> of the page, I link the master styles.css file:

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

I also have created a separate style sheet specifically for printing (print.css). Inside the print.css file, I write rules that pertain only to the page when it's printed.

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

So, how can we ensure that each of these CSS files is used only for the intended medium? By adding the media attribute to the <link> element (as illustrated in Method A, from previously in this chapter):

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

By specifying screen for the styles.css file, we can ensure that the styles contained in styles.css are only applied for computer screens. Similarly, by specifying the print value for the media attribute, we ensure that the styles contained within print.css will only be applied when the user prints the page.

Now that we've separated screen and print styles, let's talk a little about what styles would be appropriate in our print style sheet.

Building a Print Style Sheet

While our styles.css file may contain CSS for the layout, fonts, position, backgrounds, etc., we have a blank slate with the print.css file to customize styles for the printed page.

The key thing to remember when building a print style sheet is the targeted medium. Since we're dealing with a page, rather than a browser window, pixel dimensions and sizing aren't the best choice.

Make a Point

It makes perfectly good sense to use point values for font sizes in a print style sheet. So the first rule of our print style sheet might define a base font size for the body element—in points.

 body {   font-family: "Times New Roman", serif;   font-size: 12pt;   } 

Simple enough, and we have a better idea of how 12-point text would look like on a printed page, rather than a pixel value. We also made the text serif, which tends to print out nicely and is more easily readable on a printed page.

Save Ink by Hiding Unnecessary Elements

There may be plenty of page elements on the screen version of a site that aren't necessary on the printed page. Elements like navigation links, sidebars, forms, advertising, etc., can often be wasted ink when printed—and we can choose not to display them by using the display property in the print style sheet. Oftentimes, it's the content that the user desires to print.

For instance, if a typical site had #nav, #sidebar, #advertising, and #search elements that contained the site navigation, sidebar items, and search form, respectively—we could turn these off in our print style sheet with the following declaration:

 body {   font-family: "Times New Roman", serif;   font-size: 12pt;   } #nav, #sidebar, #advertising, #search {   display: none;   } 

By setting the display: none in our print style sheet, we'll be hiding those elements on the printed page.

By experimenting with turning off desired portions of your pages, you can quickly and easily create a customized "printer-friendly" version of your site from the same markup. No need to use server-side solutions to pump out an entirely parallel version of a site with a stripped-down template—just an extra CSS file, assigned with the print media type, does the trick.

This also reinforces the fact that organizing your structure into logical page "sections" can make styling easier after the fact. If your page has an advertising banner, assign an id to it that makes sense, so that complete control can be had with CSS—in this case, turning it off for printing.

Turning off backgrounds and colors would be another way to save ink and produce a more easily readable print version.

For instance, if we had previously assigned a background image or color to the <body> element, we could turn it off like this:

 body {   background: none;   } 

We could of course do the same for any element that we've assigned a background for in the screen version using the preceding method.

Expose Links

Another neat trick that unfortunately only modern browsers that fully support the CSS2 specification can take advantage of is exposing hyperlink URLs so they appear in print after the hyperlinked text.

Using the :after pseudo-class, we can write a CSS rule that will print the URL of a hyperlink after its text in the browsers that support it (try Mozilla, Safari, or Netscape 7.0 to see it in action). At the same time, it's painless for users of browsers that don't support the :after pseudo-class—only the hyperlinked text will show (Eric Meyer, "CSS: Design: Going to Print," www.alistapart.com/articles/goingtoprint/).

Let's add a rule that will expose hyperlink URLs (in our content area only) to our print style sheet:

 body {   font-family: "Times New Roman", serif;   font-size: 12pt;   } #nav, #sidebar, #search {   display: none;   } #content a:link:after, #content a:visited:after {   content: " (" attr(href) ") ";   } 

We've essentially told the print version of the page to reveal the hyperlink URLs after the hyperlinked text, putting the URL in between a set of parentheses with a single space before and after. This will only be done to hyperlinks within the #content section of the site. While we could've written a generic rule to expand all hyperlinks, we've chosen to only expand in the content area of the page—excluding links in headers, footers, and other areas.

Again, while this only works in few browsers at the time of this writing, it's harmless to browsers that don't support the :after pseudo-class—they will simply ignore it.

Link Text

While we've gone ahead and done something fancy for link URLs, let's not forget to call out linked text in a unique way so that it's easy to differentiate linked words from the normal flow of text.

 body {   font-family: "Times New Roman", serif;   font-size: 12pt;   } #nav, #sidebar, #search {   display: none;   } a:link, a:visited {   color: blue;   text-decoration: underline;   } #content a:link:after, #content a:visited:after {   content: " (" attr(href) ") ";   } 

We could, of course, choose any color we wished here. I opted for default blue and underlined, as it's easily recognizable as a link. For black-and-white printing, experiment to get a shade that shows enough of a contrast between a link and normal text.

Save Ink with Print Preview

Another tip for saving ink is to use the browser's print preview function to test print versions of our pages without actually printing an entire page out to paper.

In most browsers, the File Print dialog box contains a Preview option to view how the printed page will appear. You can get a good look at how your print style sheet is operating here.

How it Looks

The print style sheet that I use on my personal site looks much like the preceding example that we've been building. By comparing Figures 11-1 and 11-2, you can see how I've customized the print styles to turn off things like navigation and sidebars and have expanded links and changed fonts and sizes for optimal readability.

Figure 11-1: SimpleBits as viewed in a browser with screen styles enabled

Figure 11-2: SimpleBits, print version

You can easily see that with just a tiny CSS file, we can serve an entirely customized version of any number of pages specifically for printing. It's an easy feature to add to any project, yet it will enhance users' experience when they go ahead and print your pages.

The next time your boss says, "We need to build a new template for a printer-friendly version of the site and have a completely parallel directory structure," you can pull this little trick out your back pocket (or wherever you can fit this book).

For more on print styles, be sure to read CSS guru Eric Meyer's helpful articles, "CSS Design: Going to Print" (www.alistapart.com/articles/goingtoprint) and "Print Different" (www.meyerweb.com/eric/articles/webrev/200001.html).

---