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}
}
- The top one prevents page breaks inside of a table row
- The thead style makes any rows in the thead tag repeat for each page that the table spans across.
- NoPrint is a class I use to show something on the screen, but not in print.
- 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.
Well, nice creation it is! I like your blog coz every time I see helpful thing in your blog.
ReplyDelete