Section 13.3. Creating Print Style Sheets | Dreamweaver CS3: The Missing Manual

13.3. Creating Print Style Sheets

You should see how pages on your site print before embarking on a print-specific redesign. Often, all the information on a Web page prints without problems, so you may not have to add a printer style sheet to your site. But in some cases, especially when using heavy doses of CSS, pages look awful printed, like the example in Figure 13-1. But even if a page looks the same in print as it does on the screen, you have many ways to improve the quality of the printed version by adding custom printer-only styles (see Figure 13-2).

Figure 13-2. When printing a Web page, you really don't need navigation links or information that's not related to the topic at hand. With a printer style sheet, you can eliminate sidebars, navigation bars, and other content designed for Web browsing (left). The result is a simply formatted documentperfect for printing (right).

Tip: A quick way to see how a page will print without wasting a lot of paper and toner, is to use your browser's Print Preview command. On Windows this is usually available from a Web browser's File

Print Preview menu. On Macs, you usually first choose File

Print, and then in the window that appears click Preview. Using Print Preview you can check to see whether a page is too wide to fit on one page and see where page breaks occur.

13.3.1. Using !important to Override Onscreen Styling

As mentioned earlier, it's often useful to create a style sheet without specifying a media type (or by using media="all" ). When you're ready to define some printspecific rules, you can just create a separate style sheet to override any styles that don't look good in print.

Say you've got an <h1> tag that's styled to appear blue onscreen and you've also chosen rules controlling letter spacing, font weight, and text alignment. If the only thing you want to change for your printed pages is to use black rather than blue, then you don't need to create a new style with a whole new set of properties. Just create a main style sheet that applies in both cases, and a print style sheet that overrides the blue color for the <h1> tag.

One problem with this approach is that you need to make sure the printer styles actually do override the main style sheet. To do this successfully, you have to carefully manage the cascade . As discussed in Chapter 5, styles can interact in complex ways: Several styles may apply to the same element and those styles' CSS properties can merge and override each other. There's a surefire way to make sure one property trumps all othersthe !important declaration.

When you add !important after the value in a CSS declaration, that particular property overrides any conflicts with other styles. Add this rule to a print style sheet to ensure that all <h1> tags print black:

 h1 {     color: #000  !important ;  }

This h1 style overrides even more specific styles, including # main h1, h1.title , or # wrapper #main h1 from the main style sheet.

13.3.2. Reworking Text Styles

You may not necessarily want to have text look the same onscreen as it does in print. A good place to start when creating a printer style sheet is by modifying the font- size and color properties. Using pixel sizes for text doesn't mean much to a printer. Should it print 12-pixel type as 12 dots? If you've got a 600 DPI printer, that text will be illegibly small. And while bright green text may look good onscreen, it may come out a difficult-to-read pale gray when printed.

Pixels and ems (Section 6.2) make sense for onscreen text, but the measurement of choice for printing is points . Points are how Word and other word processing programs measure font sizes, and they're what printers expect. In practice, most Web browsers translate pixel and ems to something more printer friendly anyway. The base onscreen font size for most browsers16-pixelsprints out as 12 points. But there's no consistent way to predict how every browser will resize text, so for maximum printing control, set the font size specifically to points in your print style sheets.

To make all paragraphs print in 12-point type (a common size for printing), use the following rule:

 p {     font-size: 12pt; }

Note: As with ems, you don't add an 's' when setting the font to a point size: 12pt not 12pts.

Likewise, screen colors don't often translate well when printed on a black and white laser printer. Crisp black text on white paper is much easier to read, for instance, than light gray letters . What's more, as you'll see in the next section, white text on a black backgroundthough very legible onscreenoften doesn't print well. To make text most readable on paper, it's a good idea to make all text print black. To make all paragraph text black, add this style to your print style sheet:

 p {     color: #000; }

As mentioned in Section 13.3, if your print style sheet competes with styles from another attached style sheet, then use !important to make sure your printer styles win:

 p {     font-size: 12pt !important;     color: #000 !important; }

To make sure all text on a page prints black, use the universal selector (Section 3.1) and !important to create a single style that formats every tag with black text:

 * { color: #000 !important }

Of course, this advice applies only if your site's printed out in black and white. If you think most visitors to your site use color printers, then you may want to leave all the text color in, or change the colors to be even more vibrant when printed.

13.3.3. Styling Backgrounds for Print

Adding background images and colors to navigation buttons , sidebars, and other page elements adds contrast and visual appeal to your Web pages. But you can't be sure if the background will come through when those pages are printed. Because colored backgrounds eat up printer ink and toner, most Web browsers don't normally print them and most Web surfers don't turn on backgrounds for printing even if their browser has this feature.

In addition, even if the background does print, it may compete with any text that overlaps it. This is especially true if the text contrasts strongly with a colorful background on a monitor, but blends into the background when printed on a black-and-white printer.

Note: White text on a black background used to pose the biggest problemyour visitor would end up with a blank white page. Fortunately, most current Web browsers have the smarts to change white text to black (or gray) when printing without backgrounds.

13.3.3.1. Removing background elements

The easiest way to take care of backgrounds is to simply remove them in your print style sheet. Say you reverse out a headline so that the text is white and the back-ground's a dark color. If the style that creates that effect is named .headHighlight , then duplicate the style name in your print-only style sheet, like this:

 .headHighlight {     color: #000;     background: white; }

This style sets the background to whitethe color of the paper. In addition, to get crisp printed text, this style sets the font color to black.

GEM IN THE ROUGH
Two Birds with One Stone

You can use the background-color property to set a background color to white like this: background-color: white . You get the same effect using the background shorthand method: background: white . Remember that the background property (Section 8.5) can also specify a background image, how the image repeats, and its position.

But when you leave out any values using the shorthand method, the Web browser resets to its normal value.

In other words, by omitting a background image value, the Web browser sets that value to its normal setting none . So a declaration like background: white ; not only sets the background color to white but also removes any background images. By using the background shorthand property, you kill two birdssetting a white background and removing imageswith very little code.

13.3.3.2. Leaving background elements in

If you don't want to get rid of the background, you can leave it in and hope that visitors set their browsers to print them. If you leave background elements in your print style sheet and text appears on top of them, then make sure the text is legible with the backgrounds on and off.

Another thing to consider when using background images: Do you need the image to print out? Say you place a company's logo as a background image of a <div> tag used for the banner of a page. Because the logo's in the background, it may not print. Your company or client may not be happy when every page printed from their site lacks a logo. In this case, you've got a few options. You can insert the logo as a regular <img> tag instead of a background image. This technique works, but what if the logo looks great on a full-color monitor but no good at all when printed on a black-and-white printer? Another technique is to leave the logo in as a background image, and add another , more printer-friendly logo using the <img> tag. You then hide that <img> tag onscreen but show the printer-friendly logo when printed. You'll learn this second technique in the tutorial in Section 13.4.4.

Tip: If you want to be absolutely sure that a background image prints, there's another tricky CSS workaround for overcoming a browser's reluctance to print background images. You can find it here: http://web-graphics.com/mtarchive/001703.php.

POWER USERS' CLINIC
Revealing Links in Print

Imagine a coworker hands you a printout of a fascinating article she found on the Web. You're reading along and come to this passage: "And that's when I found the secret to eternal life here ." The underline tells you there's a clickable link that reveals the secret. But on a piece of paper, of course, you have no way to follow where the link leads.

To prevent this conundrum on your own pages, you can make linked URLs print along with the rest of the text: "secret to eternal life here (http://www.pyramind_scam.com/)." Using an advanced selector :after and an advanced CSS property called content , you can print text that doesn't appear onscreen at the end of a styled element. Unfortunately, the :after selector and content property trick doesn't work in Internet Explorer 6 or earlier (nor in IE 7, as of this writing). But it does work in Firefox and Safari, so you can at least spell out URLs for the benefit of visitors using those browsers.

To do so, add a style to the print style sheet that prints the URL after each link.

You can even add other text items like parentheses to make it look better:

 a:after {  content: " (" attr(href) ") "; }

However, this CSS doesn't distinguish between external or internal links, so it also prints unhelpful document-relative links to other pages on the same site: "Visit the home page (../../index.html)." Using a bit of CSS 3 magic, you can force the style to print only absolute URLs (the ones that begin with http:// ), like so:

 a[href^="http://"]:after {  content: " (" attr(href) ") "; }

Since this style uses yet-to-be-finalized CSS 3 rules, it works only in really new browsers like Firefox and Safari, and even the CSS Validator (Section 2.4.1) doesn't know about it. So if you use root-relative links on your site, you can use another technique to print the correct, full URLs. See this article for more information: www.alistapart.com/articles/goingtoprint/.

13.3.4. Hiding Unwanted Page Areas

Web pages are often loaded with informational and navigational aids like navigation bars, sidebars full of helpful links, search boxes, and so on. These elements are great for surfing the Web, but don't do much good on a piece of paper. Your Web pages may also contain ads, movies, and other doodads that people don't like to waste expensive ink and toner on. You can do your visitors a favor by stripping these onscreen frills out of the content they really want to print.

As you learned in the first part of this book, one way to lay out a page is to wrap <div> tags around different layout elementsbanner, main navigation, content, copyright notice, and so on. By styling each <div> using floats or absolute positioning, you can place various page elements right where you want them. You can use that same structure to create a print-only style sheet that hides unwanted elements using the display property (Section 7.3).

By setting the display value to none , you can make a Web browser remove a styled element from a page. So to prevent a sidebar from printing, simply redefine that style in a print style sheet and set its display property to none :

 #sidebar {     display: none; }

For most pages, you want the print style sheet to display only the most basic informational elementslike the logo, the main content, and a copyright noticeand hide everything else. You can easily hide multiple elements with a group selector, like so:

 #banner, #mainNav, #sidebar, #ads, #newsLinks {     display: none; }

Remember, these styles go into your print style sheet , not the main style sheet. Otherwise, you'd never see the navigation, banner, or other important areas of your page onscreen. However, at times you'll want to hide something from your main style sheet and reveal it only when printed.

Say you place your site's logo as a background image inside the banner area of a page. You may want to do this to have text or links appear on top of an empty area of the logo graphic. You (or your boss or client) certainly want the logo to appear on any printed pages, but since not all browsers print background images, you can't be sure the logo will appear when printed. One solution's to insert an <img> tag containing a modified, printer-friendly version of the logo graphic; add an ID to the image; create an ID style in the main style sheet with the display property set to none ; and then set the display property for the same ID style in the print style sheet to block . Voil ! The logo appears only when printed. You'll see an example of this trick in the tutorial in Section 13.4.4.

Tip: If you're using float-based layouts (see Chapter 12), then you may also want to fix a Firefox bug that plagues long passages of floated textlike the part of your page containing the main story or article. When printing, Firefox gets confused about the placement of really long floated blocks. In this case, you should unfloat that block in the print-only style sheet, like this: float: none ;.

13.3.5. Adding Page Breaks for Printing

Version 2.1 of the Cascading Style Sheet standard includes many CSS properties aimed at better formatting a printed Web page: from setting the orientation of the page to defining margins and paper size. (You can see the full list at www.w3.org/TR/CSS21/page.html.) Unfortunately, today's Web browsers recognize very few of these print styles.

Two widely recognized properties are page-break-before and page-break-after . Page-break-before tells a Web browser to insert a page break before a given style. Say you want certain headings to always appear at the top of a page, like titles for different sections of a long document (see Figure 13-3). You can add page-break-before: always to the style used to format those headings. Likewise, to make an element appear as the last item on a printed page add page-break-after: always to that element's style.

The page-break-before property is also useful for large graphics, since some browsers let images print across two pages, making it a little tough to see the whole image at once. If you have one page with three paragraphs of text followed by the image, then the browser prints part of the image on one page and the other part on a second page. You don't want your visitors to need cellophane tape to piece your image back together, so use the page-break-before property to make the image print on a new page, where it all fits.

Here's a quick way to take advantage of these properties. Create two class styles named something like .break_after and .break_before , like so:

 .break_before { page-break-before: always; } .break_after { page-break-after: always; }

You can then selectively apply these styles to the elements that should print at the topor bottomof a page. If you want a particular heading to print at the top of a page, then use a style like this: < h1 class="break_before" >. Even if the element already has a class applied to it, you can add an additional class like this: < h1 class="sectionTitle break_before" >. (You'll learn about this useful technique in the next chapter in Section 14.2.2.)

Figure 13-3. Normally when printing a Web page, a Web browser breaks the content into multiple pages in order to fit as much content on each page as possible (left). But if you want to put page breaks in more attractive and logical places, then use the pagebreak-before property (right).