Chapter 25. Creating Print-Friendly Web Pages
If you’ve ever used an online mapping tool such as MapQuest or Google Maps, you’ve no doubt experienced the need to print a web page. Similarly, the proliferation of coupons offered only online, purchase receipts for items from online resellers, and web-based flight check-in and the ability to print boarding passes from your home computer have increased the need for print-friendly pages. It’s true, not all web pages are designed entirely for viewing on the screen!
You might not realize this, but it’s possible to specifically design and offer print-friendly versions of your pages for users who want to print a copy for offline reading—something that Google Maps offers after showing you the on-screen version of content. CSS makes it easy to create web pages that will change appearance based on how they are viewed. In this chapter, you learn how to create such pages.
What Makes a Page Print-Friendly?
It’s important to point out that some web pages are print-friendly already. If your pages use white backgrounds with dark contrasting text and few images, you might not even need to concern yourself with a special print-friendly version. On the other hand, pages with dark backgrounds, dynamic links, and several images might prove to be unwieldy for the average printer.
The main things to keep in mind as you consider what it takes to make your pages more print-friendly are the limitations imposed by the medium. In other words, what is it about a printed page that makes it uniquely different from a computer screen? The obvious difference is size—a printed page is at a fixed size, typically 8 ½ by 11 inches, whereas the size of screens can vary greatly. In addition to size, printed pages also have color limitations (even on color printers). Very few users want to waste the ink required to print a full-color background when they really just want to print the text on the page.
Most users also aren’t interested in printing more than the text that serves as the focus on the page. For example, Figure 25.1 shows a travel route mapped out from Independence, Missouri to Oregon City, Oregon (an approximation of the historic Oregon Trail).
Figure 25.1 This page isn’t very print-friendly due to the form inputs and large image with its own display controls.
The page shown in Figure 25.1 contains form input fields, a large image that can itself be controlled (moved, zoomed, and so on), and other ancillary items that you come to expect in web content. Above the map appears a set of Actions that you can perform, one of which is a link to print the page. At this point, you might wonder why you can’t just click the Print button on your web browser. You certainly can do this, but that command prints the page as it is shown on your screen—complete with the form input fields and graphical elements, when all you really want to know are the turns you need to make when driving this route.
If you click the Print link in the body of the page, your web browser will display a page (see Figure 25.2) that Google has formatted specifically to be printed.
Figure 25.2 The print-friendly version of the page isolates the text of the driving instructions so that it can be printed by itself.
As shown in the figure, the print-friendly version of this page represents a significant improvement over the original, at least from the perspective of a printer. All the form inputs and images were removed.
If the font of printer-specific pages is sans serif, some web designers recommend changing the font to serif, which is considered easier to read in print. If you use a sans serif font on your pages, it’s up to you to decide whether you want to maintain the core look of a page when it’s printed—which means you don’t change the font to serif.
In the spirit of giving you a better grasp on what, specifically, to consider as you move toward creating print-friendly pages, following is a list of changes you should at least consider:
• Remove the background of the page, which effectively gives the printed page a white background.
• Change text colors to black; it’s okay to have some color in the text but black is preferred.
• Make sure that the font size is large enough that the page can be easily read when printed. You might have to test some different sizes.
• Remove link formatting or simply revert to a basic underlined link. Some designers like to retain an underline just so that a visitor knows that a link exists in the original page.
• Remove any and all nonessential images. This typically includes any images that aren’t critical to conveying the content in the page, such as navigation buttons, most ads, and animated images.
In addition to these suggestions, you might find it useful to add a byline with information about the author of the page, along with a URL for the page and copyright information. This is information that could potentially get lost after the user leaves your website and has only the printed version of the page in hand.
You probably don’t need to make these changes to your pages just yet. The idea is to plant the seed of what constitutes a print-friendly page so that you can do a better job of creating a printer-specific style sheet. That’s right: It’s possible to create a style sheet that is applied to pages only when they are printed. You learn this in the next section.
Applying a Media-Specific Style Sheet
Figure 25.1 showed how a small printer icon with a link enables you to view a special print-friendly version of a page. This type of icon is popular on many news sites, and it’s an important feature because you otherwise might not want to hassle with printing a page and wasting paper and ink on the graphics and ads that accompany articles. Although the printer icon and link approach is intuitive and works great, there is an option that does not require these specific links to print-friendly content.
This option involves using a print-specific style sheet that is automatically applied to a page when the user elects to print the page. CSS supports the concept of media-specific style sheets, which are style sheets that target a particular medium, such as the screen or printer. CSS doesn’t stop with those two forms of media, however. Check out the following list of specific media types that CSS 2 enables you to support with a unique style sheet:
• all—For all devices
• aural—For speech synthesizers (called speech in CSS 1 media types)
• braille—For Braille tactile feedback devices
• embossed—For paged Braille printers
• handheld—For handheld devices with limited screen size and bandwidth
• print—For printed material and documents viewed on screen in Print Preview mode
• projection—For projected presentations
• screen—For color computer screens
• tty—For devices using a fixed-pitch character grid (such as a terminal, teletype, or handheld devices with limited displays)
• tv—For television-type devices, which are typically low resolution, color and have limited ability to scroll
Perhaps the most interesting of these media is the aural type, which allows for web pages that can be read aloud or otherwise listened to. Clearly, the architects of CSS envision a Web with a much broader reach than we currently think of as we design pages primarily for computer screens. Although you probably don’t need to worry too much about aural web page design just yet, it serves as a good heads-up as to what might be on the horizon.
The good news about style sheets as applied to other media is that they don’t require you to learn anything new. Okay, maybe in the case of aural web pages you’ll need to learn a few new tricks, but for now you can use the same style properties you’ve already learned to create print-specific style sheets. The trick is knowing how to apply a style sheet for a particular medium.
If you recall, the <link /> tag is used to link an external style sheet to a web page. This tag supports an attribute named media that you haven’t seen yet. This attribute is used to specify the name of the medium to which the style sheet applies. By default, this attribute is set to all, which means that an external style sheet will be used for all media if you don’t specify otherwise. The other acceptable attribute values correspond to the list of media provided in the previous list.
Note
You can also use the @import command to link media-specific style sheets. For example, the following code works just like the previous <link /> code:
@import url(player.css) all;
@import url(player_print.css) print;
Establishing a print-specific style sheet for a web page involves using two <link /> tags, one for the printer and one for each remaining medium. Following is code that handles this task:
<link rel="stylesheet" type="text/css" href="standard.css" media="all" />
<link rel="stylesheet" type="text/css" href="for_print.css" media="print" />
Caution
You might have been tempted to specify media="screen" in the first linked style sheet in the previous code. Although this would work for viewing the page in a normal web browser, it would cause problems if a user viewed the page using a handheld browser or any of the other types of media. In other words, a style sheet applies only to the specific media types mentioned in the media attribute and nothing more.
In this example, two style sheets are linked into a web page. The first sheet targets all media by setting the media attribute to all. If you did nothing else, the standard.css style sheet would apply to all media. However, the presence of the second style sheet results in the for_print.css style sheet being used to print the page.
You can specify multiple media types in a single <link /> tag by separating the types with a comma, like this:
<link rel="stylesheet" type="text/css" href="for_pp.css"
media="print, projector" />
This code results in the for_pp.css style sheet applying solely to the print and projector media types and nothing else.
Designing a Style Sheet for Print Pages
Using the recommended list of modifications required for a print-friendly web page, it’s time to take a stab at creating a print-friendly style sheet. Let’s first look at a page that is displayed using a normal (screen) style sheet (see Figure 25.3).
Figure 25.3 A CSS-styled page as viewed in a normal web browser.
Tip
You can specify a media type for your style sheets even if you aren’t linking to external versions. The <style> tag also uses the same media attribute as the <link /> tag.
This figure reveals how the page looks in a normal web browser. In reality, this page isn’t too far from being print-ready, but it could still benefit from some improvements.
The following changes can help make this web page more print-friendly:
• Change the color of all text to black.
• Remove link formatting (bold and color).
• Stack the two player information sections vertically because they are unlikely to fit horizontally on the printed page.
• Remove the contact link entirely.
The first two changes to the normal style sheet are straightforward; they primarily involve changing or undoing existing styles. The third change, however, requires a bit of thought. Because you know that printed pages are a fixed size, you should use absolute positioning for all the elements on the printed page. This makes it much easier to place the content sections exactly where you want them. Finally, the last item on the list is very easy to accommodate by simply setting the display style property of the contact element to none.
Caution
Although absolute positioning works for the hockey player sample page, it’s not always a good idea for styling print-specific pages. More specifically, if you have a page that contains more than a printed page worth of content, you’re better off using relative positioning and letting content flow onto multiple pages.
Listing 25.1 shows the CSS code for the player_print.css style sheet, which incorporates these changes into a style sheet that is perfectly suited for printing hockey player pages.
Listing 25.1 CSS Code for the Print-Specific Hockey Player Style Sheet
body {
font-family:Verdana, Arial;
font-size:12pt;
color:black;
}
div {
padding:3px;
}
div.title {
font-size:18pt;
font-weight:bold;
font-variant:small-caps;
letter-spacing:2px;
position:absolute;
left:0in;
top:0in;
}
div.image {
position:absolute;
left:0in;
top:0.5in;
}
div.info {
position:absolute;
left:1.75in;
top:0.5in;
}
div.favorites {
position:absolute;
left:1.75in;
top:2in;
}
div.footer {
position:absolute;
text-align:left;
left:0in;
top:9in;
}
table.stats {
width:100%;
text-align:right;
font-size:11pt;
position:absolute;
left:0in;
top:3.75in;
}
div.contact {
display:none;
}
.label {
font-weight:bold;
font-variant:small-caps;
}
tr.heading {
font-variant:small-caps;
background-color:black;
color:white;
}
tr.light {
background-color:white;
}
tr.dark {
background-color:#EEEEEE;
}
th.season, td.season {
text-align:left;
}
a, a:link, a:visited {
color:black;
font-weight:normal;
text-decoration:none;
}
Probably the neatest thing about this code is how it uses inches (in) as the unit of measure for all the absolute positioning code. This makes sense when you consider that we think of printed pages in terms of inches, not pixels. If you study the code carefully, you’ll notice that the text is all black, all special style formatting has been removed from the links, and content sections are now absolutely positioned (so that they appear exactly where you want them).
Viewing a Web Page in Print Preview
Figure 25.4 shows the print-friendly version of a hockey player page as it appears in a browser’s Print Preview window.
Figure 25.4 You can use Print Preview to view the print-friendly version of a web page before you print it.
If Figure 25.4 had shown the entire page—all 11 inches of height and then some—you would have noticed that the print-friendly version of the page now includes the footer at the very bottom of the page (see Figure 25.5).
Figure 25.5 The hockey player page was converted to a PDF document by printing it as an Adobe PDF.
Just to show you how print-friendly pages can be used in a practical situation, check out Figure 25.5. This figure shows the same hockey player page as a PDF document that can be viewed in Adobe Acrobat Reader.
Adobe’s virtual printer can be used to “print” the hockey player web page to a PDF document. You might also find PDF converters such as DoPDF (http://www.dopdf.com/) will work for you for at a lower cost than the Adobe Acrobat software. Printing to a PDF effectively creates a version of the print-friendly web page in a format that can be easily shared electronically for printing.
Summary
This chapter focused on a practical application of CSS that solves a common need: printing web pages. You began the chapter by learning what exactly constitutes a print-friendly web page. From there, you learned about the mechanism built into CSS that allows a page to distinguish between the media in which it is being rendered, and then you learned how to select a style sheet accordingly. And finally, you created a print-specific style sheet that was used to style a page just for printing. Although most users prefer viewing a page on a large computer screen to reading it on paper, there are times when a printed web page is a necessity. Be sure to give your web page visitors the utmost in flexibility by offering print-friendly pages.
Q&A
Q. Can I use the media attribute of the <link /> tag to create a style sheet specifically for viewing a web page on a handheld device?
A. Yes. By setting the media attribute of the <link /> tag to handheld, you specifically target handheld devices with a style sheet. You will likely see all mobile websites eventually shift toward this approach to serve mobile pages, as opposed to using specialized markup languages such as WML (Wireless Markup Language).
Q. Do I still need to provide printer icons on my pages so that they can be printed?
A. No. The linked style sheet technique you learned about in this chapter allows you to support print-friendly web pages without any special links on the page. However, if you want to enable the user to view a print-friendly version of a page in a browser, you can link to another version of the page that uses the print-specific style sheet as its main (browser) style sheet. Or you can provide some “fine print” on the page that instructs the user to use the browser’s Print Preview feature to view the print-friendly version of the page.
Workshop
The workshop contains quiz questions and activities to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows.
Quiz
1. Does having a button to a print-friendly page mean the page is actually print-friendly?
2. What happens to an external style sheet that is linked to a page without any media attribute specified?
3. How would you link a style sheet named freestyle.css to a page so that it applies only when the page is viewed on a television?
Answers
1. No—you still have to link to a page with a specific style sheet applied to the content so that it appears print-friendly.
2. The media attribute assumes its default value of all, which causes the style sheet to target all media types.
3. Use the following in the <head> section of your HTML:
<link rel="stylesheet" type="text/css" href="freestyle.css" media="tv" />
Exercises
• Create a print-friendly style sheet for a page that has a fair number of colors and images. Be sure to add an extra <link /> tag to the page that links in the print-specific style sheet.
• If you’re feeling really ambitious, try using the handheld value of the <link /> tag’s media attribute to create a handheld-specific version of one of your web pages. The concept is the same as creating a print-friendly page, except in this case you’re dealing with an extremely constrained screen size instead of a printed page. You can test the page by publishing it and then opening it on a mobile phone or handheld browser.