Technique Analysis: Convert the XHTML+CSS page into a printer page

css|xhtml| Printing | tips | page | Conversion in the past, creating a printer-friendly version of a Web page meant designing a separate page with both layout and formatting modified so that you can get a satisfying result when you print. Now, by using structured XHTML and CSS, you can achieve the same results with a much less expensive effort.

display from screen to print effect

Most Web pages are designed for viewing on a computer screen. However, there are times when users need to print out some pages, perhaps to keep a long-term record, or to use it as a handy offline reference.

The trouble now is that there are many features that make Web pages look compelling and colourful on a computer color screen, and do not show the same effect on a printed version of a Web page--especially if the printer is black and white. When degraded to grayscale printing, the color combination loses (the original) contrast, the graphic looks distorted and takes too long to print, and the navigation buttons that play an important role on the Web page are useless on the printed page.

To overcome these problems, web creators often specifically design a printer-friendly version of the page so that visitors have the desire to print. Printer-friendly versions usually include the same content as the main web page, but omit most of the graphics, backgrounds, and navigation elements. The page also converts color into a form that produces a grayscale image that can be accepted.

Solutions for CSS

One advantage of separating content and presentation with structured XHTML and CSS formats is that you can easily reformat the content by changing the CSS style. Therefore, creating a printer-friendly page is to link a different CSS file to the same XHTML page.

You can link both the screen style sheet and the print style table to the same XHTML file, so there's no need to create a printer-friendly page on your own, just a printer-friendly style sheet. When you add a multimedia type file to the link code, this is the rule that tells the browser which CSS to follow or ignore for screen output, and which rules to use to print out.

The following are examples of links to a pair of CSS files:
<link rel= "stylesheet" type= "text/css" media= "screen" href= "Mysite-screen.css"
/>
<link rel= "stylesheet" type= "Text/css" media= "print" href= "Mysite-print.css"/>
If you need to support older browsers, you will have to stick with the CSS1 Media descriptor screen and print. They are mutually exclusive, so when the page is generated for the screen display, the browser ignores the print style sheet, and vice versa. Therefore, each style sheet needs to contain the same style selector, but there are different rule declarations to generate page styles for different output devices separately.

Simplified CSS

If you are willing to give up looking after older browsers and assume that your users are using browsers that support CSS2 (such as IE5 and above or Netscape 6 and above), you can use the new all media descriptor to greatly simplify CSS code.

The following is an example of a link that uses the CSS2 media descriptor:
<link rel= "stylesheet" type= "Text/css" media= "All" href= "Mysite-all.css"/>
<link rel= "stylesheet" type= "Text/css" media= "print" href= "Mysite-print2.css"
/>
These links are almost exactly the same as before; the difference is that the CSS file contains styles for printing media.

The style associated with media= "All" in the CSS file can be applied to screen display, print, and all other media, so you can put all the created styles into this file. CSS files that are individually associated with media= "print" can be much smaller because pages inherit all the styles from all media files, and there is no need to replicate these styles in print media files.

The only styles that are required in print media CSS files are those that change or add page styles for print output. In general, this is nothing more than a style that suppresses the display of div that contains graphics and navigation content, and replaces the main tag and the width and whitespace settings of the main div with the settings that fit the printout.

This technique works because all media CSS files and print media CSS files are grouped together into the same cascading style rules. Therefore, the order of links to these CSS files is very important. All media file links must be placed before the print media file link.

Here are some tips for using print media CSS files:

If you prohibit the display of a div, you should use Display:none instead of Visibility:hidden.

Dots (PT) and Inches (in) are not the correct units of measure for on-screen display, but they are the correct unit of measurement for the printout.

The selectors used in print media files are exactly the same as the selectors you use in all media files. For example, if you use Div#sidenav to select a div with ID sidenav in all media files, using #sidenav in print media files may not succeed in achieving your goal.

Don't forget to explicitly force the substitution of a rule statement that changes from one file to another. For example, if you set the padding for an element in all media files and want to remove the padding from the printout, it is not enough to add a style that ignores the padding declaration in the print media file-you have to explicitly set up padding:0pt, To replace the previous setting.

If you are using a graphics editor such as Dreamweaver, you can preview the screen effect of the resulting page, rather than the effect of the printout. To preview the print style in the Dreamweaver Design view window, change the link to the print media CSS file to media= "screen". This allows you to preview the CSS styles in the print media file. Don't forget to change the media descriptor back to media= "print" before posting your page.

When you need to provide a printer-friendly Web page for your visitors, you no longer need to create a separate version of the original page. By adding a link to a CSS style sheet with the media= "print" Media descriptor, you can convert any XHTML/CSS page into a printer-friendly page.