In the past, creating a printer-friendly version of a web page means designing a separate page with both layout and formatting modified so that you can achieve satisfactory results when printing. Now, by using structured XHTML and CSS, you can achieve the same effect with much less effort. Most web pages from screen display to print effect
In the past, creating a printer-friendly version of a web page means designing a separate page with both layout and formatting modified so that you can achieve satisfactory results when printing. Now, by using structured XHTML and CSS, you can achieve the same effect with much less effort.
From screen display to print effect
Most web pages are designed to be suitable for viewing on computer screens. However, sometimes users need to print out certain pages, perhaps just to keep a long-term record, or use it as a convenient offline reference.
The trouble now is that many of the features that make the web page look eye-catching and colorful on the computer color screen cannot show the same effect on the printed version of the web page - especially when the printer is black and white. When demoted to grayscale printing, the combination of colors will lose the (original) contrast effect; the graphics will look distorted and take too long to print; the navigation buttons that play an important role on the web page are useless on the printing page.
To overcome these problems, web creators often 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 most graphics, backgrounds, and navigation elements are omitted. The page also converts color into some form to generate acceptable grayscale images.
CSS solution
One advantage of separating content and representation using structured XHTML tags 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 the print style sheet to the same XHTML file at the same time, so there is no need to create a printer-friendly page separately, just a printer-friendly style sheet is enough. When you add multimedia type files to the link code, this is telling the browser which CSS rules to follow or ignore for screen output, and which rules to use for printout.
Here is an example linking to a pair of CSS files:
The following is the quoted content:
<linkrel=stylesheettype=text/cssmedia=screenhref=mysite-screen.css/>
<linkrel=stylesheettype=text/cssmedia=printthref=mysite-print.css/>
If you need to support older browsers, you must stick to using CSS1's media descriptors screen and print. They are mutually exclusive, so when generating pages for screen display, the browser ignores the print style sheet and vice versa. So, each stylesheet needs to contain the same style selector, but there are different rule declarations to generate page styles separately for different output devices.
Simplify CSS
If you are willing to give up taking care of older browsers and assume your users are using CSS2-enabled browsers (such as IE5 and above or Netscape6 and above), you can use the new all media descriptor to greatly simplify the CSS code.
Here is an example of linking using CSS2 media descriptors:
The following is the quoted content:
<linkrel=stylesheettype=text/cssmedia=allhref=mysite-all.css/>
<linkrel=stylesheettype=text/cssmedia=printthref=mysite-print2.css/>
These links are almost exactly the same as the previous one; the difference is that the CSS file contains styles for printing media.
The styles associated with media=all in the CSS file can be applied to screen display, printing, and all other media, so you can put all the created styles into this file. The CSS file that is individually associated with media=print can be much smaller because the page inherits all styles from all media files, so there is no need to copy these styles in the print media file.
The only styles required in the print media CSS file are those that change or add page styles for printout. Generally speaking, this is nothing more than some styles that prohibit displaying divs containing graphics and navigation content, and replacing the body label and the width and blank settings of the main div with settings suitable for printouts.
This trick works because all media CSS files and print media CSS files are combined into the same cascading style rules. Therefore, the link order of these CSS files is quite important. All media file links must be placed before printing media file links.
Here are some tips on using print media CSS files:
If you prohibit the display of a div, you must use display:none instead of visibility:hidden.
Neither dots nor inches are correct units of measurement for screen display, but they are correct units of measurement for printouts.
The selector used in printing media files should be exactly the same as the selector you use in all media files. For example, if you use div#sidenav to select divs with id as sidenav in all media files, then using #sidenav in printing media files may not be able to successfully achieve your goal.
Don't forget to explicitly force substitute the rule declaration that changes from one file to another. For example, if you set padding for an element in all media files and want to remove this padding in the printout, it is not enough to add a style that ignores the padding declaration in the print media file - you must explicitly set padding:0pt to replace the previous settings.
If you are using a graphic editor like Dreamweaver, you can preview the screen effect of the generated page instead of the printout effect. To preview the printing style in the Dreamweaver Design viewing window, change the link to the printing media CSS file to media=screen. This allows you to preview the CSS style 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 your visitors with a printer-friendly web page, you no longer need to create a separate version of the original page. Adding a link to a CSS stylesheet with media=print media descriptor will enable any XHTML/CSS page to be converted into a printer-friendly page.