See also
Scriptwise
The concept is to create seperate style rules for the screen and the print formats which can be applied by any one of the following 3 methods.
- Seperate style sheets
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
- Imported
<style type="text/css" media="print, screen">
@import "basic.css";
</style>
- Included with your embedded rules
<style type="text/css">
@media print{
Rules for printer
}
@media screen{
Rules for screen
}
</style>
You can use page-break-before and/or page-break-after to break your page up for printing.
Values are always, auto, and ""
Unfortunately the usual cross browser problems exist with the print method as the following simple example should show depending on which browsers you try this in, for example when you print preview this page the example divs background should be yellow which NS7 shows but in IE, Moz, and Firefox the background is shown white.
This page has been set up using rules for the screen and rules for printing.
To preview select File on your browsers toolbar and then Print Preview.
These are the rules that apply to the example div for the screen
width:200px;
color:yellow;
font-size:20px;
text-align:center;
border:2px solid blue;
background-color:green;
As you can see the print version of this page is totally different to what you see in your browser.
This example div should now show the results of the following attributes.
width:200px;
color:green;
font-size:40px;
text-align:right;
border:2px dashed red;
background-color:yellow;
Everything is correct except background should be yellow which NS7 shows but in IE, Moz, and Firefox the background is shown white.
When I print preview this page in IE it shows there are 2 pages when there should only be one, havent figured that out yet :(
There will no doubt be other cross browser problems as well as the usual standards problems depending on the layout of your page and the CSS attibutes you use.
So be warned :)
The only way you are going to get a perfect print in all browsers, and I use that term loosely, is by trial and error.
It is possible to print in landscape by putting the content in a div and in your print rules apply writing-mode:tb-rl to the div, unfortunately this is only recognised in IE.
<div style="writing-mode: tb-rl">Landscape Content</div>