html print a very wide page on several A4 sheets

Question

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

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>

Answer 2

(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.