How to get correct rendering size when printing html elements

Question

I have trouble understanding how to render html elements with correct size when printing them to A4 size paper.

To illustrate my purpose, I simplified my code to a html

Answer 1

You are tackling a difficult problem which is a bane of many programmers' existence. Printing from HTML and ensuring compatibility with different browsers is basically a unicorn. You shouldn't manage that concern yourself. The quirks of CSS styling and the fragmentation of the browser ecosystem will make sure you don't succeed.

My advice is that you take a look at a PDF generator API like PDF Kit or iText.

From my research, page and form printing is especially problematic on Firefox. As you've noticed from first hand experience, you can't manage margins in a sane way. I also tried with Firefox 49.0.2 without success.

I thought about using @media print{} but Firefox was unwilling to collaborate.

That being said, your code worked just fine for me running Chrome on the version you mentioned. Note that I set the margins to 'none'.