Structured XHTML and CSS page transitions to printer pages

css|xhtml| Printing | page | conversion

In the past, creating a printer-friendly version of a Web page meant designing a separate page with the layout and formatting modified so that you could get a satisfying result when printing. 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.