Convert XHTML CSS pages to printer pages_HTML/Xhtml_Web page production

In the past, creating a printer-friendly version of a Web page meant designing a separate page with modified layout and formatting so that it would look good when printed. Now, by using structured XHTML and CSS, you can achieve the same effect with far less effort.
From screen display to printing effect
Most web pages are designed to be viewed on a computer screen. However, sometimes users need to print out certain pages, perhaps to keep a long-term record or to use them as convenient offline reference.
The trouble now is that many of the features that make Web pages look eye-catching and colorful on a color computer screen don’t have the same effect on a printed version of a Web page—especially if the printer is black and white. . When downgraded to grayscale printing, color combinations will lose contrast; graphics will look distorted and take too long to print; navigation buttons that play an important role on Web pages will not print properly. There is also no use on the page.
In order to overcome these problems, Web creators often design a printer-friendly version of the page so that visitors will have the desire to print. Printer-friendly versions usually contain the same content as the main Web page, but omit most graphics, background, and navigation elements. The page also converts color into some form to produce an acceptable grayscale image.
CSS solution
One advantage of using structured XHTML markup and CSS formatting to separate content and presentation is that you can easily reformat the content by changing the CSS style. Therefore, creating a printer-friendly page is a matter of linking a different CSS file to the same XHTML page.
You can link both the screen style sheet and the print style sheet into the same XHTML file, so there is no need to create a separate printer-friendly page, just a printer-friendly style sheet. When you include a multimedia type file in the link code, you are telling the browser which CSS rules to follow or ignore for screen output, and which rules to use for print output.
Here is an example of linking to a pair of CSS files:
The following is the quoted content:


If you need to support older browsers, you must stick to the CSS1 media descriptors screen and print. They are mutually exclusive, so browsers ignore print style sheets when generating pages for screen display, and vice versa. Therefore, each style sheet needs to contain the same style selector, but have different rule declarations to generate page styles separately for different output devices.
　Simplify CSS
If you are willing to give up taking care of old browser versions and assume that your users are using browsers that support CSS2 (such as IE5 and above or Netscape6 and above) , you can use the new all media descriptor to greatly simplify CSS code.
Here is an example of a link using CSS2 media descriptors:
The following is the quoted content:


These links are almost identical to the previous ones; the difference is that the CSS file contains the styles for the print media.
Styles associated with media="all" in a CSS file can be applied to screen display, print, and all other media, so you can put all the styles you create in this file. The CSS file associated with media="print" alone can be much smaller because the page inherits all styles from all media files, so there is no need to duplicate those styles in the print media files.
The only styles required in the print media CSS file are those that change or add page styles for print output. Generally speaking, this is nothing more than styles that suppress the display of divs containing graphics and navigation content, and replace the width and margin settings of the body tag and main div with settings suitable for printout.
This trick works because all media CSS files and print media CSS files are combined into the same cascading style rules. Therefore, the order in which these CSS files are linked is quite 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 want to disable the display of a div, use display:none instead of visibility:hidden.
Neither points (pt) nor inches (in) are correct units of measurement for screen display, but they are correct units of measurement for printed output.
The selectors you use in print media files should be exactly the same as the selectors you use in all media files. For example, if you use div#sidenav to select the div with id sidenav in all media files, then using #sidenav in the printed media file may not successfully achieve your goal.
Don’t forget to explicitly force override rule declarations that change from one file to another. For example, if you set padding for an element in all media files and want to remove the padding in the print output, it is not enough to add a style that ignores the padding declaration in the print media file - you must set it explicitly padding:0pt to replace the previous setting.
If you are using a graphics editor such as Dreamweaver, you can preview the generated page on screen rather than as a printed output. To preview print styles in Dreamweaver's Design view window, change the link to the print media CSS file to media="screen". This allows you to preview CSS styles in print media files. Don't forget to change the media descriptor back to media="print" before publishing 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. Any XHTML/CSS page can be converted into a printer-friendly page by adding a link to a CSS stylesheet with the media="print" media descriptor.