Make Web Page Prints Differently From Screen
I have been working on an web-based invoicing system for a while and I'm almost finishing it. This system will be replacing my client's system that runs on Windows and prints invoices with dot matrix printers.
My client has all the invoice template pre-printed on 3-layered carbon paper. My invoicing system only has to fill up the values into invoice form, and not the whole form. But, to only showing only field values on the screen will be hard to read.
Therefore, I need to make my invoice has to be shown in full when it is on the screen, but to print only field values in the printed copy.
Meyerweb.com has a good solution for this problem. Keep your current CSS. Use a different CSS for printed media. Add these lines to your <head> section:
<LINK rel="stylesheet" type"text/css" href="screen.css" media="screen">
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">
In the print.css, you can simple use display attribute to make it invisible.
display: none;
If you don't like to link to any files, you can use the media attribute in the style tag in your header.
<style type="text/css" media="screen">
...
</style>
<style type="text/css" media="print">
...
</style>
It's working for me. I hope it works for you too. Feel free to comment for improvement.
If my article helped you solved your problem, consider buy me a beer!
Share this article: del.icio.us | digg it
Tags: CSS
Related posts:
