Scale HTML to fit one page when printing

Question

I have a Web page with a diagram that is meant to be fixed in size to width:1660px;height:480px; using CSS. The page (am I allowed to link to it?) displays properly in the browser, but when printing in Google Chrome (I haven't tested other browsers yet), it is too big horizontally to fit in a single page. How do I scale the HTML to fit one printed page?

Here's what the output might look like (Firefox 60):

I have tried messing around with media queries such as this:

@media print
{
    @page
    {
        size: 297mm 210mm; /* landscape */
        /* you can also specify margins here: */
        margin: 250mm;
        margin-right: 450mm; /* for compatibility with both A4 and Letter */
    }
}

But I cannot notice any effect in the print preview.

[edit]

Internet Explorer 11 seems to be able to scale the page automatically in the print dialog. I don't know why Google Chrome can't do this as well.

[edit]

I tried transforming the page too. However the printed result is very different in Chrome vs IE11.

@media print
{
    html
    {
        transform: scale(0.5);transform-origin: 0 0;
    }
}

Next, I tried zooming the page. This worked pretty well, but I don't know if it only affects Chrome or if it affects IE and Firefox as well.

@media print
{
    html
    {
        zoom: 50%;
    }
}

In either case, there's no way for the user to disable the effect when using CSS, unless you create new JavaScript controls too.

Answer 1

This is, unfortunately, a very common problem. In my experience, there is no reliable way to control print layout across browsers except to create a PDF. There are a number of "HTML to PDF" packages available, but while those generally work, they have similar variations depending on the browser they are run in. There are a number of hardware issues (e.g., screen size), browser settings (inherent differences between browsers plus locally set default font size and other configuration settings) and user settings (e.g., page zoom) that basically make this, IMHO, pretty much impossible except by generating a server side document.

I am sure this isn't what you want to hear, but the only reliable solution to make sure that the user is able to print a web page the way you (the developer) want it to be printed, is to generate a complete PDF on the server. That can be done with a number of different packages depending on the source language (PHP, Python, etc.) It is definitely more work for the developer, but you get to control image size, text size, font, etc. - all the things you should be able to control with CSS, and know that the page will print as expected. Instead of the print button on your page triggering the browser print function, have it download a file of the page from the server, all formatted and ready to print. You can target either letter (USA) or A4 (most other places in the world) and the two sizes are close enough that most people can adapt in Adobe Reader or other software to make it fit without losing data or having too much white space. Google Docs and many other systems do exactly the same thing in order to produce consistent output.

If your document is really "just one image" then it is even easier. Create the image server-side and embed it in a single-page downloadable PDF. If you can't easily create the image server-side, you can use a service such as URLBOX (which I have used as a paid subscriber but I have no other connection to it) to generate the images and download them to your server to embed in PDFs.