html print a very wide page on several A4 sheets

I have a page with a wide (say around 3000px) horizontal graph which is normally scroll开发者_如何学编程able.

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.

---

You could add a rotation transformation to the print stylesheet. A partial solution as a long table will now be too wide...

.rotated-when-printed {
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    filter:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=6.123233995736766e-17,M12=-1,M21=1,M22=6.123233995736766e-17)
}

<!-- some very wide table -->
<table class="rotated-when-printed">
    ...
</table>

---

(a previous answer of mine to this question was deleted, don't know why: I try again)

Long time I looked for a CSS based solution on this problem, and I think it's not possible to have vertical page breaks of HTML tables through CSS (at least not page breaks on tabular data in a HTML TABLE tag, but it should be possible with tabular data organized in DIVs).

I think the only solution is to let javascript do the splitting. When the page is loaded, javascript can check if table is wider than the page width desired: in that case it's possible to dynamically create a new table and duplicate in it only the columns that are outside the allowed width, and deleting them from original table. All the process is a bit tricky, but results are satisfying.

It's also possible to let the javascript code run only for printing and not for the table showed on screen: a print button on the page can be arranged to run a server side code, for example php, which can generate a pdf thought the library wkhtmltopdf, passing to it the html page where is the table, including the javascript code. In fact wkhtmltopdf generate a pdf simulating a browser, and the javasript code will be correctly executed.

Now, this javascrpt library already exist, I wrote it and works very well (at least for my needs), and it freely available on Internet: I don't want to link it because already had a previous answer deleted, and I don't know if it was for that reason. But if someone is interested, you can ask in comments and I'll give it.

---

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.

---

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.