Simulate A4 page in HTML [duplicate]

Question

I need to create an HTML page with A4 paper size.

I know that A4 paper size in pixels is: 595px x 842px (string No. 10-11). But while I put those sizes and try to print the page (I print to PDF file, due to the temporary lack of inks), I do not get my HTML fully fits the page: it is much smaller.

When I tried to add some pixels (with the coefficient, of course), I got 794px x 1122px (string No. 12-13) and the second printing attempt (saving to PDF file) gave me the result that this variant is a bit bigger, then needed.

So, what is the solution and why may 595px x 842px not be compatible with real A4 saved to PDF?

This is the example

P.S. I use Chromium for Ubuntu 13.10 and did not checked it on Windows.

I am doing this to be able to simply change the values via PHP and then convert HTML page to PDF, like described here.

Answer 1

HTML assumes that the screen is 96 DPI, or that 1 pixel is 1/96 of an inch.

On hardware with a very high resolution, it uses the concept of logical pixels, which are units that are close to 1/96 of an inch, and each of which consists of multiple device pixels. This is true for printers, but also for phones and other devices with high res screens.

So, if you want a rectangle the same size an an A4 (21 × 29.7 cm), you should use 794 × 1122 pixels, or in CSS, width:794px; height:1122px. But you can also use physical units, width:21cm; height:29.7cm if you don't want to worry about these logical pixels.

Answer 2

If you're planning on printing this, remember you should print at 300dpi, so 8.5"x11"* 300 = height: 3300px; width: 2550px.

Also, I would buffer .25" for a margin as well, so just do 8" x 10.5" before converting to pixels.