Section 36.2. Cascading Style Sheets for Print | Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))

36.2. Cascading Style Sheets for Print

In the past, to provide a version of a web page that was appropriate for printing, it was common to create an alternate, "printer-friendly" version of each page on a site. In general, printer-friendly pages were stripped-down versions of the document, containing just the necessary content and presented in a single column with minimal markup (see the sidebar, "Still Need a Printer-Friendly Version?").

Your client may have specific ideas of what a printout of their site should look like. Some clients may want the printout to match the way it looks on the screen. Be sure to have a conversation about print version expectations before launching into the print style sheet production.

Now that Cascading Style Sheets (CSS) are widely supported, it is possible to create a version of the document that is customized for print without having to create a separate document. One well-structured and semantically marked up (X)HTML document provides the content (yet another reason to start with good markup), and CSS does all the rest. The method involves creating two style sheets --one appropriate for screen display and one appropriate for printand using the media attribute or @media rule to match the style sheet to its intended medium. A more detailed explanation follows.

Still Need a Printer-Friendly Version?

There may be some cases in which you may choose to create an alternate (X)HTML source document just for print. For example, if your story has been broken up into pieces that appear in separate HTML documents, you will need to put the pieces back together in HTML to make the whole story available for print.

If you do find yourself creating a "printer-friendly" version, many of the considerations listed for CSS print style sheets also apply to alternate HTML pages, such as customizing content, using black text on white backgrounds, and removing background images. If the page is set to a fixed size, make sure that it is under 750 pixels to be sure the right edge is not clipped off when printing.

36.2.1. Creating the Style Sheets

The simplified example in this section demonstrates the basics of creating an all-purpose source document and targeted style sheets. In the real world, the documents and style sheets would no doubt be longer and more complex, but the core concepts are the same.

This simple, yet properly marked up, XHTML document (sample.html) is the source for both the screen version and the printed page, shown in Figure 36-1. The html and head elements have been omitted to save space, but they are implied.

 <body> <div >   <p><strong>LITTLECHAIR, Inc.</strong> | For more information, visit us at   www.littlechair.com</p> </div> <div >     <img src="/books/4/439/1/html/2/masthead.png"> </div> <h1>Style Guides and Documentation</h1> <p>I have found ... </p> <!-- content continues --> </body>

Figure 36-1. Media-specific style sheets at work

The style sheet used for the screen adds a background color to the page and formats the text in a way that is appropriate for web browsers, using relative measurements (ems and percentages). It also uses the display property to hide the div labeled printonly that contains identifying header information that is not needed on the web page. This style information is saved in an external style sheet called screen.css.

 #printonly {display: none;} body {background: #CCC; color: #333; font: 95%;} h1 {font: 1.5em Futura, Verdana, sans-serif; color: #C03;} p {font: 1em/1.5em Verdana }

A second style sheet (print.css) includes style information just for printouts. There are a couple of points of interest here. First, the display property is used to hide the masthead, and the printonly header gets a bottom border to set it apart from the content. The content is set to appear in black, serif text on a white background, which is appropriate for laser printing (print versions don't necessarily need to be black and white, however). Finally, the text has been resized in points. Points, you say? Yes, although point measurements should be avoided for screen presentation, they are the most appropriate choice for printouts. Fonts specified in pixels may print way too small.

 #masthead {display: none; } #printonly {     padding-bottom: 10px;     border-bottom: 1px solid;     font-size: 10pt;} body {background: white; color: black;     width: auto; } h1 {font: 18pt Times bold;} p {font: 12pt/18pt Times; }

We're not done yetwe still need to link the style sheets to the XHTML document.

36.2.2. Targeting Media with Style Sheets

The various methods for attaching style sheets to (X)HTML documents are discussed in detail in Chapter 16. This section looks at the mechanisms for applying style sheets to specific media.

The target medium can be one of nine different media types defined in the CSS 2.1 specification: all, screen, print, projection, braille, embossed, aural, tv, and tty. These media values are defined in Chapter 16. Here, we'll focus on the values relevant to printouts: all (the default), screen, and print, which incidentally, are values current browsers support most reliably.

The target medium is specified using the media attribute in the link or style elements or by using the @media or @import at-rules in a style sheet. Each of these methods is demonstrated here.

36.2.2.1. Linking to media-dependent style sheets

When an external style sheet is linked to a document using the link element, the media attribute provides the name of the medium. In this example, the two linked style sheets are differentiated by the values of their media attributes.

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

By specifying that print.css has a media of print, it is called into use only when the document is printed.

36.2.2.2. Using two embedded style sheets

A document may contain two embedded style sheets targeted at different media. The styles are differentiated using the media attribute in the style element.

 <head> <style type="text/css" media="screen">     #printonly {display: none;}     body {background: #CCC; color: #333; font: 95%;}     h1 {font: 1.5em Futura, Verdana, sans-serif; color: #C03;}     p {font: 1em/1.5em Verdana } </style> <style type="text/css" media="print">     #masthead {display: none; }     #printonly {padding-bottom: 10px; border-bottom: 1px solid;         font-size: 10pt; }     body {background: white; color: black; width: auto; }     h1 {font: 18pt Times bold;}     p {font: 12pt/18pt Times; } </style> </head>

36.2.2.3. @import rule

An external style sheet can be imported based on the display medium using the @import rule in a style sheet. Simply add the target medium value at the end of the rule as shown in this example:

 <style> <!-- @import url(screen.css) screen; @import url(print.css) print; --> </style>

36.2.2.4. @media rule

The @media rule enables style instructions for a number of media to be placed within one style sheet. Each @media rule can be interpreted as, "If the medium is going to be this, use these style instructions." Using the same style sheet information from the original example, the style sheet would look like this:

 <style> @media screen {     #printonly {display: none;}     body {background: #CCC; color: #333; font: 95%;}     h1 {font: 1.5em Futura, Verdana, sans-serif; color: #C03;}     p {font: 1em/1.5em Verdana } } @media print {     #masthead {display: none; }     #printonly {padding-bottom: 10px; border-bottom: 1px solid;         font-size: 10pt; }     body {background: white; color: black; width: auto; }     h1 {font: 18pt Times bold;}     p {font: 12pt/18pt Times; } } </style>

Screen Versus All

The first style sheet in this example targets screen display specifically. If the media had been left unspecified for that style sheet, it would apply to all media (because all is the default).

A style sheet that targets all media may be used strategically if there is a lot of redundant information between the screen and print versions. The print style sheet would then contain only styles that override the general settings.

When using this approach, be careful that unwanted styles that apply to "all" don't leak through into the print version. It may be necessary to increase the specificity of the selectors in the print style sheet or use the !important qualifier to ensure that critical styles are properly overridden.

It may be easier to keep screen and print style sheets completely separate so these problems are not an issue.

36.2.3. Considerations for Print Style Sheets

The previous section provides only the most rudimentary example of what can be done to customize a page for print using media-specific style sheets. There are many aspects of the printed document to keep in mind when crafting the print style sheet.

Many of the concepts here are inspired by these highly recommended articles on print style sheets by Eric Meyer, published by A List Apart. The articles document the details of building a print style sheet for A List Apart, and then building it again.

"CSS Design: Going to Print" (www.alistapart.com/articles/goingtoprint/)
"ALA's New Print Styles" (www.alistapart.com/articles/alaprintstyles/)

36.2.3.1. Think about content

As shown in the earlier example, CSS allows you to hide and reveal page elements, which means you have an opportunity not only to change the style of your web page for print, but also to tailor the content to be appropriate to the medium. Chances are, people just want the content of the page for later reading or filing. To save on ink, consider hiding such elements as navigation, search boxes, decorative mastheads, and so on. Whether you show ads may be more of a marketing mandate than a design decision, but in general, they should be left out, too.

You may also want to include information on the print version that does not show up in the browser. In the instance that the printout is passed along to a friend, or rediscovered in a file months later, it may be useful to include the URL of the page. It may include a marketing message or other call to action.

Upgrade Your Images

Page content isn't the only thing that can be hidden and revealed with CSS print styles. A similar technique may be used to serve an appropriately low-resolution image for the screen and a high-resolution image that will look sharper when it is printed. This technique is introduced by Ross Howard in his article "High-Resolution Image Printing" in A List Apart (www.alistapart.com/articles/hiresprinting).

36.2.3.2. Text and backgrounds

When styling text for print, it is best to specify dark type on a light background. Not only is it more legible, but it saves on toner. Most browsers don't print background images by default, but it doesn't hurt to turn them off with a style rule explicitly to make sure nothing hinders the readability of the text.

Also, as mentioned in the example, font size is best specified in points for print, as they will be handled more predictably than pixels.

Background images don't print out by default (although users may change that in the browser preferences). This means that any text replaced by background images according to CSS image replacement techniques (see Chapter 24) may cause content to be lost. If you do use image replacement, make sure those styles are targeted to screen only and not all by default (see the earlier "Screen Versus All" sidebar). The other option is to rewrite styles in order to override the techniques in the print style sheet.

36.2.3.3. Width and margins

Although not strictly necessary, you may want to get rid of multicolumn formatting (if there is any) and display the content in one column that fills the available width of the page. Changing the position of positioned elements to static and changing the float for floated elements to none should take care of undoing the columns. Setting the width of all elements to auto is the best approach for making sure they'll occupy the full width of the page after margins are applied (either by the browser or in the style sheet).

If your web page uses floats for long elements, make sure that the print style sheet resets the float to none. There is a bug in Gecko-based browsers that causes long floats to get clipped after the second or third page. Setting float: none for long elements fixes this problem. For more information, see the A List Apart article, "Going to Print," referenced earlier.

36.2.3.4. Handle your hypertext

An obvious difference between the web and print versions of your document is that hypertext links lose their usefulness in print. Whether you make linked text stand out more in the print version (for example, by making it bold and/or a different color than the surrounding text) or remove all styles so links blend in completely depends on your preferences and the requirements of the content. Whatever you do, make sure that it is a thoughtful and conscious decision.

You may also want to take advantage of the generated text capabilities of CSS 2 to write out the URL for each link. That way, if visitors want to follow up on links from a printout later, they'll know where to go.

URLs can be included by using the :after or :before selectors and the content property that grabs the value of the HRef attribute in each a element. In this example, the URLs for links and visited links in a section labeled maincontent will be written out in parentheses after the linked text.

 #maincontent a:link:after, #maincontent a:visited:after {    content: " (" attr(href) ") ";    }

Generated content is discussed in more detail in Chapter 23, including examples and screenshots of URLs written out after links in this manner.

Unfortunately, generated text is not supported by Internet Explorer, so this won't work for everyone. The good news is, it will be ignored by browsers that don't support it, so it won't do any harm to better serve a portion of your audience.

If you have a document with lots of links, displaying all those URLs could make your document cumbersome to read. Aaron Gustafson describes a method for turning those URLs into endnotes using JavaScript in his article, "Improving Link Display for Print," on A List Apart (www.alistapart.com/articles/improvingprint/). Aaron also contributed Chapters 24, 25, and 26 to this edition.