This is the behemoth I have been working on for a while and here is my response: You have to guess-timate. The problem starts with the very bad coverage HTML has for printers. In fact - there is none. So to begin with you have to guess as to the setup of the printer. I assume 8.5x11 paper with a one(1) inch margin on all four sides giving you only 6.5x9 inch paper. Most printers print at 300dpi now-a-days. HOWEVER! HTML automagically will convert your point size(PTs) to print correctly on a printer - but that will completely muck-up most of what you are trying to do. Why? Because each printer prints slightly differently and so what will work on one - will not on another. (Or it will kind-of work.)
There is an excellent website called (if I remember correctly) www.linotypist.com where the person discusses printing problems in HTML. His first suggestion is:
Begin CSS:
html {
font-size: 62.5%;
}
End CSS:
This weird number causes all printers to make 1em = 10px. My suggestions in addition to this is to wrap your entire output in a table with a single TD inside of it. Like so:
Begin HTML:
<table style='table-layout:fixed;'>
<tbody>
<tr>
<td valign='top'>
End HTML:
The "table-layout:fixed;" causes whatever you write out to the printer to be "fixed" (as in width and placement). The "valign='top'" on the TD statement ensures that your printouts always start at the top of the page. This IS important.
My next suggestion is to have two - SEPARATE - style sheets. One for the printer and one for the screen. Like so:
Begin STYLE:
<style media='print'>
[Put in your styles for the printer]
</style>
<style media='screen'>
[Put in your styles for the screen]
</style>
End STYLE:
The reason is - you can then hide things on the printer/screen as you need to so you can concentrate on just that medium. Mixing and matching is no where near as good as you can mistakenly combine what is to go only to the printer with what is to go to the screen. By keeping them separate you stand a better chance of getting everything right.
My next suggestion: Count lines and pages. Just like in the 1970's when there was no page control - there really isn't any kind of page control in HTML today. You would have thought that W3C would give as much consideration to printing as they do just showing stuff on the screen - but no. They do not. So you need to keep track of how many lines you have printed and how many pages. You can do this if you use something like PHP to generate the web page and just count everywhere you either do a <BR>, <P>, or <TR> (in a table). If you are going to use DIVs or some other positionable element, then (in PHP) do a wordwrap() on the text to be displayed. However many lines come back in the array is approximately however many will be used when printing.
My last suggestion is NEVER use the <P> command to do a page eject. Why? Because <P> always puts at least one blank line (if not two sometimes) on your page. These "hidden" newline commands will throw off your counting of lines. Instead, use this:
This will not use any space on your page and always do a page break after it. (Or you can use page-break-before:always - it doesn't really matter which you use.)
This is the behemoth I have been working on for a while and here is my response: You have to guess-timate. The problem starts with the very bad coverage HTML has for printers. In fact - there is none. So to begin with you have to guess as to the setup of the printer. I assume 8.5x11 paper with a one(1) inch margin on all four sides giving you only 6.5x9 inch paper. Most printers print at 300dpi now-a-days. HOWEVER! HTML automagically will convert your point size(PTs) to print correctly on a printer - but that will completely muck-up most of what you are trying to do. Why? Because each printer prints slightly differently and so what will work on one - will not on another. (Or it will kind-of work.)
There is an excellent website called (if I remember correctly) www.linotypist.com where the person discusses printing problems in HTML. His first suggestion is:
Begin CSS:
html {
font-size: 62.5%;
}
End CSS:
This weird number causes all printers to make 1em = 10px. My suggestions in addition to this is to wrap your entire output in a table with a single TD inside of it. Like so:
Begin HTML:
<table style='table-layout:fixed;'>
<tbody>
<tr>
<td valign='top'>
End HTML:
The "table-layout:fixed;" causes whatever you write out to the printer to be "fixed" (as in width and placement). The "valign='top'" on the TD statement ensures that your printouts always start at the top of the page. This IS important.
My next suggestion is to have two - SEPARATE - style sheets. One for the printer and one for the screen. Like so:
Begin STYLE:
<style media='print'>
[Put in your styles for the printer]
</style>
<style media='screen'>
[Put in your styles for the screen]
</style>
End STYLE:
The reason is - you can then hide things on the printer/screen as you need to so you can concentrate on just that medium. Mixing and matching is no where near as good as you can mistakenly combine what is to go only to the printer with what is to go to the screen. By keeping them separate you stand a better chance of getting everything right.
My next suggestion: Count lines and pages. Just like in the 1970's when there was no page control - there really isn't any kind of page control in HTML today. You would have thought that W3C would give as much consideration to printing as they do just showing stuff on the screen - but no. They do not. So you need to keep track of how many lines you have printed and how many pages. You can do this if you use something like PHP to generate the web page and just count everywhere you either do a <BR>, <P>, or <TR> (in a table). If you are going to use DIVs or some other positionable element, then (in PHP) do a wordwrap() on the text to be displayed. However many lines come back in the array is approximately however many will be used when printing.
My last suggestion is NEVER use the <P> command to do a page eject. Why? Because <P> always puts at least one blank line (if not two sometimes) on your page. These "hidden" newline commands will throw off your counting of lines. Instead, use this:
Being HTML:
<hr style='width:0px;height:0px;page-break-after:always;'>
End HTML:
This will not use any space on your page and always do a page break after it. (Or you can use page-break-before:always - it doesn't really matter which you use.)
I hope this helps.