I was recently asked a question of the forums of how to send text only data to a printer. Well it’s not as hard as you think. The <link> tag has an attribute called media. One of the values is called print, which means the style sheet will only be applied when you print the document. You can use this to hide images when you print. Create a new style sheet (print.css) and add the following to it:
img
{
display:none;
}
Then in your page, all you need to do is reference that style sheet, and it will only be used when you print.
<head>
<title>Print Text Only Using CSS</title>
<link rel="Stylesheet" media="print" href="print.css" />
</head>
<body>
<img src="http://www.google.com.au/intl/en_au/images/logo.gif"
alt="Google" />
<p>Faucibus non sit amet elit. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer placerat, dui sed
posuere molestie, urna sapien porta purus, vel sodales ante
erat sed arcu. Nunc semper, diam ut blandit elementum,
ipsum purus vestibulum quam, sit amet auctor est nunc ut
risus. Maecenas vitae justo sit amet erat congue aliquet
molestie commodo odio. Praesent tempor pellentesque nibh.</p>
</body>
The code above is a small HTML page that displays Google’s logo and well as some sample text. When you print this, the image won’t be displayed. You can also do other stuff like changing the font size, font color for print only. This is a very useful thing to know.
Tweet
About The Author
No comments:
Post a Comment