2 HTML pages generated by the same code print out at different sizes, even though the sizes are identical in the browser

Question

We have two pages generated by a vendor solution the we have customized. The pages are of the same type (that is, the same forms are filled out to create the HTML that is printed.) The only thing that should differ between the pages is the text of the users' answers. In the browser, the pages are of the same size (that is, according to the developer tools computed values, the fonts are the same size, the header is the same height and width, etc.) However, when printed, the text and images on one page are distinctly smaller than the other, as though the page had been scaled down somewhat (maybe 15%). The scaling is visible both in print preview and in the printed pages. The issue is present in both Firefox and Chrome.

One thing I noticed is that, while everything seems smaller in one of the printouts, the banner, which is set to 100% width, is the same width on both printouts, though the height is smaller in the scaled page. That suggests to me that the whole page is not simply being scaled, though I may be off base.

I tried printing both pages to PostScript files (.prn), but couldn't make sense of what I was seeing.

Can anyone explain what could be causing the scaling (if that's what it is)?

I'm afraid I can't attach screenshots or files, due to privacy concerns.

Answer 1

This issue is caused by how the browser is parsing the HTML code in order to generate the PostScripte file or whatever it wants to print from. The browser does exactly what it's supposed to do, so it's rather an issue with this specific code.

You could try a different approach by using other browsers, Firefox add-ons (e.g. one that creates PDFs) etc. They use different methods then the browser to create the printout so the problem might solve itself.

Or you edit the code with the web developer tools in the browser (or an add on which can edit the site before printing).