Try CSS media types to build printer-friendly pages
Published: 23 Jun 2003 14:38 BST
As a reader of this or any other media Web site, you are undoubtedly familiar with the printer-friendly page. It is a version of an article that is free of most graphics, background colors, and advertisements. In most cases, the printer-friendly page is a separate file that requires a trip to the Web server to retrieve.
I'm going to share an example that demonstrates how to use Cascading Style Sheets (CSS) media types to format a single HTML file for both the screen and a printer.
Media types explained
The @media rule in CSS allows me to assign specific styles based on the type of device the page will be displayed on. There is no need to create separate HTML files for each device, only separate @media rules within a single CSS file. There is also no need to make a separate request from the Web server, since the switch between media types is done on the client side.
Some of the supported devices under CSS include computer screens, printers, televisions, handhelds, speech synthesisers, and Braille tactile feedback devices. Currently, however, the major browsers support only a small number of the available media types. Internet Explorer 4.5+ and Netscape 4.7+ support screen and print, while Opera 3.67+ supports screen, print, and projector.
The HTML file
The first step is to open an existing HTML page. Figure A shows a screenshot of the printer-unfriendly page I will use in this example. Listing A provides the code. Notice that the style information is presented inline for the sake of demonstration.
Figure A
Previous
Did you find this article useful?
116 out of 232 people found this useful
Digg
Slashdot
Del.ici.ous
Stumble
Reddit
