Printable Web Page

Ever wonder how to make your unnecessary page elements disappear only to leave a perfectly printable web page?  Using the stylesheet link’s media attribute can do the trick.  Below describes how to utilize this media stylesheet to hide specific elements within your page.  One of the keys to remember is that when your presenting mostly readable text, you want to stick to black and white with possibly red or blue links to let the user know certain text represented hyperlinks.

1.  First thing to do is to define a css file to hold or media printing specific css.  Let’s call it pring.css.

2.  Add the following reference to the head section of your html document.

<link href="/Styles/Print.css" type="text/css" media="print" rel="stylesheet" />

3.  Define the core css classed that drive most of you page.  Below shows the core css classes we will use.  The class “nonprintable” will be applied to any element that should not be shown on the printed page.  Sometimes you will need to force certain css styles so you can use a “printable” class for this purpose.  Applying black and white to the body of the html document is the cleanest way to obtain a slick page.  Notice that “a” links get a red color and a transparent background; this helps the user realize the text was a hyperlink and prevent any a link’s background images from showing up.

/* GENERAL */
.nonprintable
{
    display:none;
}

/* apply to specific items that must be forced */
.printable
{
    background:white !important;
    color:Black !important;        
}

body 
{
    background:white;
    color:Black;
}

/* A links */
a:link, a:visited 
{
    color:Red;
    background: transparent;
    font-weight: bold;
    text-decoration: underline;
}

/* END GENERAL */

 

4.  Add any non-generic css classes.  For example, if you were using the ASP.NET ajax tab controls you’d want to define the following classes to hide tabs.

 

/* 
asp.net ajax tab control 
*/
.ajax__tab_header, .ajax__tab_outer, .ajax__tab_inner
{
    display:none;
    visibility:hidden;
}
.ajax__tab_body
{
    border-color:White;
    visibility:hidden;
}

5.  Now apply css to elements within your document.  Menu’s, images, ads, and other content that you don’t want to print should get the “nonprintable” class.  This class will be assigned to the element but will not take affect until the user goes to print the page.  Try it by applying some css and doing a print preview.  This is a clever way of verify that the page looks correct without actually printing.