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 (or click here to view html page)

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.

<link href="style-common.css" rel="stylesheet" type="text/css" />
<link href="style-screen.css" media="screen" rel="stylesheet" type="text/css" />
<link href="style-print.css" media="print" rel="stylesheet" type="text/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 -

/*style-screen.css*/
body
{
    background-color: #666666;
    color: #CCCCCC;
    border-bottom: 2px solid #CCCCCC;
}

Now change the header background color -

#header
{
    background-color: #FFFFFF;
    color: #000000;
    border-bottom: 2px solid #000000;
}

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

#leftMenu
{
    display: none;
}

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

.dontprint
{
    display: none;
}

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.


5 comment(S)


Arun Kumar on Aug 21, 2010 11:07 PM

I studied entire tips.It will be very useful for my future project.
Thanks lot.

Waqas on Mar 14, 2013 03:32 AM

thx for sharing also visit http://codingresolved.com/

tifanny357 on Mar 10, 2014 12:43 AM

Thanks. I have also ever read an article which is written with the purpose to provide detailed guide for customizing and processing images & documents in ASP.NET web application.

http://www.rasteredg..../imaging-processing/

Tips24h.net on Apr 5, 2014 06:15 AM

Cool tips, thanks

Nhatthienkt.com on Dec 20, 2014 11:42 PM

thanks for you. I need this.

Leave a comment