Convert XHTML + CSS pages to printer pages

In the past, creating a printer-friendly version for Web pages meant to design a separate page with both the layout and format modified, so as to achieve satisfactory results during printing. Now, by using structured XHTML and CSS, you can achieve the same effect with less effort.

From screen display to print effect

Most Web pages are designed for viewing on computer screens. However, sometimes you need to print some pages to keep a long-term record or use it as a convenient offline reference.

The trouble now is to make Web pages look appealing and colorful on computer color screens, the same effect cannot be displayed on printed web pages, especially when the printer is black or white. When being downgraded to grayscale printing, the color combination will lose (original) the comparison effect; the image will look distorted and take too long to print; navigation buttons that play an important role in Web pages are useless in printing pages.

To overcome these problems, Web creators often design a printer-friendly version for the page, so that visitors have the desire to print. Printer-friendly versions usually contain the same content as the main Web pages, but most graphics, backgrounds, and navigation elements are omitted. The page also converts the color into a certain form to generate acceptable gray images.

CSS Solution

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

You can link the screen style sheet and print style sheet to the same XHTML file at the same time, so there is no need to create a printer-friendly page separately, you only need a printer-friendly style sheet. When you add a multimedia file to the link code, this tells the browser what CSS rules should be followed or ignored for screen output, and what rules should be used to print the output.

The following example links to a pair of CSS files:

**************************************** ********************


/>


**************************************** *********************

To support earlier browsers, you must stick to the CSS1 media descriptor screen and print. They are mutually exclusive. Therefore, when a page is generated for the screen display, the browser will ignore the print style sheet, and vice versa. Therefore, each style sheet must contain the same style selector, but there are different rule declarations to generate page styles for different output devices.

Simplify CSS

If you are willing to discard the browser of the old version and assume that your user is using a browser that supports CSS2 (for example, IE5 or later or Netscape 6 or later ), you can use the new all media descriptor to greatly simplify CSS code.

The following is an example of link using CSS2 media descriptor:

**************************************** ********************



**************************************** ********************

These links are almost identical to the previous one. The difference is that CSS files contain styles used to print media.

Styles associated with media = "all" in CSS files can be applied to screen display, printing, and all other media. Therefore, you can put all created styles in this file. CSS files associated with media = "print" can be much smaller, because pages inherit all styles from all media files, this eliminates the need to copy and print the styles in a media file.

The only style required to print a media CSS file is those that change or add a page style to print the output. In general, this is just a style that prohibits the display of div containing graphics and navigation content, and replaces the subject label and the width and white space settings of the main div with the settings suitable for printing and output.

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

The following are some tips for Printing Media CSS files:

To disable the display of a div, use display: none instead of visibility: hidden.
Neither point (pt) nor inch (in) is the correct measurement unit for screen display, but they are the correct measurement units for print output.
The Selector Used in printed media files must be exactly the same as that used in all media files. For example, if you use div # sidenav to select the div whose id is sidenav in all media files, # sidenav in the printed media file may not be able to achieve your goal.

Do not forget to explicitly force a rule statement that will change from one file to another. For example, if you set padding for an element in all media files and want to remove this padding from the print output, adding a style that ignores the padding declaration to the printed media file is not enough-you must explicitly set the padding: 0pt to replace the previous settings.

If you are using a graphic editor such as Dreamweaver, You can preview the screen effects of the generated page, rather than print the output results. To preview the Print Style in the Design window of Dreamweaver, you must change the link to the printed media CSS file to media = "screen ". This allows you to preview and print CSS styles in a media file. Do not 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 for the original page. Add a link to the CSS style sheet with media = "print" media descriptor to convert any XHTML/CSS page into a printer-friendly page.