It may happen to any website developer that he/she want to create a printer-friendly page without having to generate another web page manually or dynamically. In this post I'll explain how to do this without any server-side languages but in CSS.
First, create a separate style sheet containing CSS rules that dictate the desired look when a page is printed. For this example, the style sheet with print-only CSS rules is named print.css.
Then associate the style sheet and set the media property to print:
<link rel="stylesheet" type="text/css" href="adv.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
We just declared two link tags which contain two css styles for different situations.
Pay attention to the media attributes in the link tags above. As you can see, value of the first media attribute is screen and the second is print. These values will set the css style of the page in different situations. For example if you set the value to "screen" you can see that the css file is working only in colored monitors.
So lets see possible values for the media attribute of link tag:
| | Media type | Description | all
|
Suitable for all devices |
braille
|
Intended for Braille tactile feedback devices |
embossed
|
Intended for paged Braille printers |
handheld
|
Intended for handheld devices (typically small-screen, limited-bandwidth devices) |
print
|
Intended for paged material and for documents viewed on-screen in print preview mode |
projection
|
Intended for projected presentationsfor example, projectors |
screen
|
Intended primarily for color computer screens |
speech
|
Intended for speech synthesizers |
tty
|
Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities) |
tv
|
Intended for television-type devices (with low-resolution, limited-scrollable color screens, and available sound) |
|
You can also assign a css style for all situations by set the media attribute's value to "all":
<link rel="stylesheet" type="text/css" href="uber.css" media="all" />
Or you can use one style sheet for several, but not all, media:
<link rel="stylesheet" type="text/css" href="print.css" media="print,projection" />
In the preceding code, the print.css style sheet is used for projection and print media when rendering the web document.