Printing differently
Here is instructions how you can print a web page differently than viewed on screen by using CSS stylesheets. You can hide your header / footer, web page menus, preventing credit card numbers from printing, tables or passwords from printing. This is good for omitting certain information. You can also print differently depending on the device that the document is being output to (or printed). This can be used to easily print alternate content on your page depending on if your viewing it or printing it. To do this, we will use the media attribute. I think of it as an if else statement depending upon the output device. Some of these outputs include printer, projection, screen, tty, tv and more. For a full list see this. Below is an example where you can to hide certain text from printing and also print text differently out the printer.
<html>
<head>
<style>
.name { FONT-SIZE:10px}
@media screen {
.doNotPrint{ display: all}
.creditCardNumber {COLOR: #111111;}
}
@media print {
.name{FONT-SIZE: 20px;}
.creditCardNumber { display: none;}
.doNotPrint{display: none; }
}
</style>
</head>
<body>
<P>
<TABLE id="Table1" cellSpacing="1">
<TR class="doNotPrint">
<TD>Welcome(WONT PRINT)</TD>
</TR>
<TR class="creditCardNumber">
<TD>4522668955551234(WONT PRINT)</TD>
</TR>
<TR class="name">
<TD>John Smith(PRINTS LARGE)</TD>
</TR>
</TABLE>
</P>
</body>
</html>
posted by dwight0 @ 1:51 PM
1 comments
1 Comments:
This can be used to easily print alternate content on your page depending on if your viewing it or printing it.
meizu
xiaomi mi4i
xiaomi redmi note 2
Post a Comment
<< Home