check before going to print a web page

Recently we launched online forms product where students can apply for courses in various institutes individually and can pay forms fees, submit documents etc. Here we encountered with  printing web page functionality. It behaves differently across browsers and sometimes forms layout is not same as form shown in web page. However team is working on that , i searched in google and  find out to know root causes.


1. Avoid printing web page, best is to provide pdf for same as earlier we did for sums invoices reports.


2. Lets look below points which generally we follow if we plan to print web page.


General print styles tips to use to get better print outs 



/* Print styles */
@media print 
{
    tr, td, th {page-break-inside:avoid}
    thead {display:table-header-group}
    .NoPrint {visibility:hidden; display:none}
    a {color:#000000}
}

1. The top one prevents page breaks inside of a table row
2. The thead style makes any rows in the thead tag repeat for each page that the table spans across.
3. NoPrint is a class I use to show something on the screen, but not in print.
4. And, I like to turn off link colors.

Use separate CSS for print.

<LINK rel="stylesheet" type"text/css" href="print.css" media="print">

There is another way also.

<STYLE type="text/css">

@media print {

   BODY {font-size: 10pt; line-height: 120%; background: white;}

}

@media screen {

   BODY {font-size: medium; line-height: 1em; background: silver;}

}

</STYLE>

So lets take an example of CSS where we shown two different versions for screen and media.

/* screen display styles */

BODY {color: silver; background: black;}

A:link {color: yellow; background: #333333; text-decoration: none;}

A:visited {color: white; background: #333333; text-decoration: none;}

A:active {color: black; background: white; text-decoration: none;}

H1, H2, H3 {color: #CCCCCC; background: black; padding-bottom: 1px;

    border-bottom: 1px solid gray;}

Here is page for same.

And for printing purpose.

/* print styles */
BODY {color: black; background: white;}
A:link, A:visited {background: white; color: black; text-decoration: underline;
   font-weight: bold;}
H1, H2, H3 {background: white; color: black; padding-bottom: 1px;
   border-bottom: 1px solid gray;}
DIV.adbanner {display: none;}

check page here.

There are some other points like margin, float, hyperlink etc causes printing effect. So here is common CSS for printing.

body {
   background: white;
   font-size: 12pt;
   }
#menu {
   display: none;
   }
#wrapper, #content {
   width: auto;
   margin: 0 5%;
   padding: 0;
   border: 0;
   float: none !important;
   color: black;
   background: transparent none;
   }
div#content {
   margin-left: 10%;
   padding-top: 1em;
   border-top: 1px solid #930;
   }
div#mast {
   margin-bottom: -8px;
   }
div#mast img {
   vertical-align: bottom;
   }
a:link, a:visited {
   color: #520;
   background: transparent;
   font-weight: bold;
   text-decoration: underline;
   }
#content a:link:after, #content a:visited:after {
   content: " (" attr(href) ") ";
   font-size: 90%;
   }
#content a[href^="/"]:after {
   content: " (http://www.shiksha.com" attr(href) ") ";
   }

Hope it will be helpful.