21

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.

Community
  • 1
  • 1
Max Krizh
  • 585
  • 3
  • 7
  • 34
  • 6
    Share the correct numbers Elliot? – Popnoodles Jan 04 '14 at 21:53
  • Well, I've took them from many websites, including [StackOverflow](http://stackoverflow.com/a/3341581/2486472) – Max Krizh Jan 04 '14 at 21:53
  • 1
    @ElliottFrisch, I just looked up the numbers for an A4 page in Adobe Illustrator and the OP has the correct pixel dimensions for an A4 page. If you have some information to back up your claim please share as I'm curious to know why the numbers are off. My guess is perhaps you are considering DPI in print to be a factor. – Anil Jan 04 '14 at 21:55
  • 5
    Assuming you want HQ PDF you should use 300dpi; A4 paper is 8.27 inches by 11.75 inches. So for print rendering you'd use 8.27 * 300 = 2481 11.75 * 300 = 3525 Your numbers are correct for the screen resolution of 72 DPI. – Elliott Frisch Jan 04 '14 at 21:56
  • @SlyRaskal Yes. I was looking up the dimensions of A4 (it's not a common size here). – Elliott Frisch Jan 04 '14 at 21:56
  • Yea, that's what I thought, it was the DPI. Good Catch @ElliottFrisch – Anil Jan 04 '14 at 21:56
  • 2
    @ArtemUshakov In the answer you link to they discuss specifying the sizes in millimetres. Also, don't forget about page margins and printable areas. – robertc Jan 04 '14 at 21:57
  • @robertc I thought there were no any margins and printing areas while saving to PDF file... – Max Krizh Jan 04 '14 at 21:59
  • thank you! This must be an answer! I already found the same solution, but by completing some math statements and now it almost fits the whole A4 printed page. Thank you anyway - I will keep in mind that HTML has it's own 96 DPI resilution. – Max Krizh Jan 05 '14 at 19:10

2 Answers2

64

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.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • Can confirm that using w:794 h:1122 1 as scaling factors in chrome works to reproduce A4-sized previews. It still adds a scrollbar, but making PDFs has become a lot simpler regardless. – G_V Jun 17 '19 at 12:27
6

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.

Catalyst
  • 137
  • 4
  • 9