What is a printer friendly version of a 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. The overwhelming aim of Web design is visual, and many Web page designs don't print out very well. Navigation bars, ad banners, and other such things clutter up printouts and make them much harder to read. How many times have you seen a page on the Web which has, off to one side, a link which says, "Click here for a printer-friendly version"?
There are certainly other media-- audio browsers and handheld devices are two such examples-- but the output medium which most concerns authors is still the printer. CSS2 offers a way to address this, giving authors the ability to create stylesheets which are medium-specific.
What are media Types?
We'll look how you can style a single page for both screen (monitor) and print output, and provide an example you can try using Internet Explorer 5 for Windows, or MSIE 4.5 for the Macintosh. Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc.
CSS Media Type:
Some CSS properties are only designed for a certain media. For example the "voice-family" property is designed for aural user agents. Some other properties can be used for different media types. For example, the "font-size" property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.
There are currently ten defined media types:
all
aural
braille
embossed
handheld
print
projection
screen
tty
tv
There are other ways to assign media to stylesheets. For example, you can list one or more media types on an @import statement:
@import url(paged.css) print,projection;
Thus, the styles in paged.css will be used in both print and projection media, both of which are known as paged media. Multiple media can be specified for LINKed stylesheets as well. The following two statements are equivalent:
<LINK rel="stylesheet" type"text/css"
href="print.css" media="print,projection">
@import url(print.css) print,projection;
There is one other way to apply media-specific styles: the @media rule. Here's an example:
<STYLE type="text/css">
@media print {
BODY {font-size: 10pt; line-height: 120%; background: white;}
}
@media screen {
BODY {font-size: medium; line-height: 1em; background: silver;}
}
</STYLE>
The media rule in CSS allows 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.
How to do print with CSS:
There are a variety of ways to associate media-specific stylesheets to a document. The most familiar way is to use the LINK element and simply add the media attribute:
<LINK rel="stylesheet" type"text/css"
href="print.css" media="print">
Note: you'll need to be using MSIE5/Win or MSIE4.5/Mac for using stylesheet for printing.
Formatting for a printer:
First, let's assume a simple page of text with some various elements: paragraphs, headings, hyperlinks, and so on. This file is called latinesque.html, and we want to display it differently depending on whether it's on a monitor, or on paper. First we write a stylesheet for screen display (remember, there's no accounting for taste):
/* screen display styles */
BODY {color: silver; background: black;}
A:link {color: yellow; background: #333333; text-decoration: none;}
A:visited {color: white; background: #333333; text-decoration: none;}
A:active {color: black; background: white; text-decoration: none;}
H1, H2, H3 {color: #CCCCCC; background: black; padding-bottom: 1px;
border-bottom: 1px solid gray;}
The page has an ad banner, which is a feature common to so many sites.
All right, now we need to decide how the printed page should look. We decide on a simple, conventional print style, without an ad banner, and so the stylesheet turns out like this:
/* print styles */
BODY {color: black; background: white;}
A:link, A:visited {background: white; color: black; text-decoration: underline;
font-weight: bold;}
H1, H2, H3 {background: white; color: black; padding-bottom: 1px;
border-bottom: 1px solid gray;}
DIV.adbanner {display: none;}
We've added the last style in order to get rid of the ad banner in the printed version.
Now, to the top of the document, we add the following LINK elements:
<LINK rel="stylesheet" type"text/css"
href="screen.css" media="screen">
<LINK rel="stylesheet" type"text/css"
href="print.css" media="print">
Thus we get the document, which has the screen appearance of Example 1 but the printed appearance of Example 2-- load it up in MSIE, print it out, and see what happens!
Note: The article is not my original. It is mostly copied from web:http://www.meyerweb.com/eric/articles/webrev/2 00001.html
_________________
“You might say reality is the result of complex negotiations between the observer and the observed. But that is simply a point of view…”
Digital Bangladesh
