html print a very wide page on several A4 sheets

Question

Hello all,

I have a page with a wide (say around 3000px) horizontal graph which is normally scrollable.

In the printing version I render the entire graph, (I actually have a separate JAvascript/HTML code for the printing version), so it takes lets say three A4 widths (landscape) on the screen.

In this situtation I see the browser (FF3 in this case) does not allow me to print the wide page on several paper sheets (based on the print preview).

It seems like the only way to have the entire document printed is to have the user set zoom level to 30%, and then the entire graph fits on a single A4.

I must be missing some CSS directive there, but was unable to google it anywhere.

Will appreciate pointers/ideas.

Thanks.

Answer 1

Printing html across multiple pages like this is not a nice thing to have to do

You probably want to break the graph up into page sized chunks (e.g. a div for each page) so when they are floated beside each other the graph looks as required. Then use CSS page-break-before or page-break-after to ensure that the printed pages are broken up correctly and you don't lose any content off the side of the page.

Also ensure that you have the media type specify print for the css you use for the printable version.

Answer 2

You can't control how HTML is printed in any real way - HTML/CSS/JS has no access to the print driver or browser print settings. The only option is to convert your printable output to PDF (or some other print-centric format) and serve that instead.