The requirement sometimes arises where a user viewing one of you web pages might want to print it for some reason. This could be so that he has a hard copy he can put away in a safe place or even something like the directions to your company which he will need to have with him while driving.
I have created this simple page which has it's own style tag at the top for the purpose of this tutorial:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Print Test</title>
<style type="text/css">
#wrapper
{
background-color:Red;
width:500px;
}
#header
{
background-color:Blue;
color:White;
}
#menu
{
float:left;
background-color:Green;
width:100px;
}
#content
{
float:right;
width:400px;
height:100%;
background-color:Purple;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<div id="header">
This is my header
</div>
<div id="contentWrapper">
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="content">
Content Panel
</div>
</div>
</div>
</form>
</body>
</html>
The above html will render a page similar to this:
For a printable version we would like to remove all the background colour properties (yes its ugly, I know), hide the menu and also change the text colour in the header to black.
All we need to do to accomplish this is add another <style> tag to our page and modify the original just a bit. Change the original <style> tag to look like this:
<style type="text/css" media="screen">
Note the media="screen" part. Next add the following style block to your page:
<style type="text/css" media="print">
#header
{
font-weight:bold;
}
#menu
{
display:none;
}
</style>
What's happening above is that we are setting the font of the header to bold and hiding the menu when the media is "print". We don't need to set any background colour property since they are resetting back to defaults.
When you run and print preview the page, you might see something like this:
Making your asp.net pages printer friendly is really simple and your visitors will love you for auto formatting it for them.