Create Printer Friendly Web Page Using Media Attribute

When you create a web page you usually keep in mind how it will rendered on the browser and its usability. Sometime, depending upon the content, you also know that your page might be printed by end user. But you don’t want that the printer version of your page to be same as the screen version. Most of the time you might create a separate printable version of the page. User will click specially open the printable version and take its print or sometime he will directly print your webpage.

Now what are the issues here -

1.    The web page is not printer friendly therefore the content might get distorted while printing it
        into a A4 size paper.

2.    The print will contain unnecessary links and images while have no use in printable version.

3.    The webpage might have dark background which will lead to wastage of print ink.

4.    Some text might have light colors which may not be visible clear on a black & white printout.

5.    If you create separate printable view then it will involve another user action which sometimes
       user don’t do.

There is a clean solution to this problem using the media attribute in the link tag. By using you can specify on which media a particular style sheet will be applicable. Therefore you can have different style sheet for printer and browser screen and user don’t have to worry about this.

 

Lets take an example to understand this. Look at the screen below:-

 

Now lets start making it printer friendly. First of all create three different style sheets. One for screen, one for print and one which will contain common classes. Include this css in page and add desired media value i.e. for printer add media = print and for screen css add media = screen. Don’t specify the media for the common css.

 

I assume we already have all css except the printer friendly css. Now lets start creating the printer. First of all change the body color. Since default color of white so we moved the body background color css to the screen css.

 

Now change the header background color.



 We don’t need the left menu in the printer view so lets remove it.

Also hide any other smaller thing like Back to dailycoding, print button etc.

Now when you see this page in browser the view will remain same, but when you print this page it will look like below.

 

 

You can see that we haven't created any new page here and above page much better printer friendly than original page. This all was done just using css.

Sumber :

http://www.dailycoding.com/Posts/create_printer_friendly_web_page_using_media_attribute.aspx

Demo:

http://www.dailycoding.com/Uploads/2010/08/PrinterFriendlyPage.htm


Disediakan oleh : Nanthini Chandiran.