How to create printer friendly web page using javascript

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. 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 –

The web page is not printer friendly therefore the content might get distorted while printing it into a A4 size paper.
The print will contain unnecessary links and images while have no use in printable version.
The webpage might have dark background which will lead to wastage of print ink.
Some text might have light colors which may not be visible clear on a black & white printout.
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.
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;
}