HTML div with A4 dimensions is larger than A4

Question

I set the size of a parent div to A4 (size="21cm 29.7cm"). However, in Chrome print preview, with A4 and no margins, the HTML page won't fit on A4. I have to scale it to 80%.

Is there something in my HTML causing this? I expected the size="21cm 29.7cm" to force the page to be A4.

UPDATE I found this:

CSS to set A4 paper size

And tried the below CSS, but not working:

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
}

HTML:

<!Doctype>
<html>
<head>
  <style>
    .background
    {
      position: relative;
      top: 0;
      left: 0;
    }
    .text
    {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 1449px;
      height: 2050px;
    }
  </style>
</head>
<body>
  <div style="position: relative; left: 0; top: 0;" size="21cm 29.7cm">
    <img src='page0022.jpg' class="background"/>
    <img src='0022.svg' class="text"/>
  </div>
</body>
</html>

Have you tried to include a css reset like https://meyerweb.com/eric/tools/css/reset/ otherwise look around device pixel ratio — NVRM, Jan 23 '21 at 18:11
@NVRM I pasted those styles at the top of my CSS style sheet but it doesn't seem to have changed anything. — user997112, Jan 23 '21 at 18:17
@WaisKamal I'm a total noob here. I just want to convert my html to A4 (to print) — user997112, Jan 23 '21 at 18:17
If the above CSS `@page` solutions are not working it is likely an issue with the size of your images. You need to make sure they abide by the A4 dimensions and do not overflow the page. — justinseibert, Jan 23 '21 at 18:46
@justinseibert It seems to be a problem with Chrome. In Firefox it works fine. — user997112, Jan 23 '21 at 18:56

score 2 · Accepted Answer · 2021-01-24T04:51:54.677

2

Read about size: https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size

Add these code to your HTML file:

<div class="page">...</div>

Add these code to your CSS file

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

In case you think you really need pixels (you should actually avoid using pixels), you will have to take care of choosing the correct DPI for printing:

72 dpi (web) = 595 X 842 pixels
300 dpi (print) = 2480 X 3508 pixels
600 dpi (high quality print) = 4960 X 7016 pixels

Yet, I would avoid the hassle and simply use cm (centimetres) or mm (millimetres) for sizing as that avoids rendering glitches that can arise depending on which client you use.

edited Jan 24 '21 at 04:51

answered Jan 23 '21 at 18:37

I use the pixels because I have an SVG which I have resized and laid over an image. Using pixels was the only way I could align the text and the image. – user997112 Jan 23 '21 at 18:45
Read about a paper A4 sizes in pixels: https://www.papersizes.org/a-sizes-in-pixels.htm – Jan 24 '21 at 05:00
I have needed your background and text image in SVG full link URL because your short (relative) URL is not working my Editor – Jan 24 '21 at 05:08

justinseibert · Answer 2 · 2021-01-23T18:28:30.610

0

You should define size within an @page rule in your CSS stylesheet. It is not intended to be an attribute as you have done in your example.

https://developer.mozilla.org/en-US/docs/Web/CSS/@page

@page {
  size: A4;
}

size as an attribute is used to define the width of <input> and <select> elements, either by pixels or number of characters depending on type

edited Jan 23 '21 at 18:28

answered Jan 23 '21 at 18:22

justinseibert

166
2
5

Okay, have pasted that in my CSS file but hasn't changed. Do I need to set anything else in that page rule too, or A4 should suffice? – user997112 Jan 23 '21 at 18:29
Set the margin to 0cm and then 5cm but it doesn't seem to be making a difference. I'll paste the CSS in my Q. – user997112 Jan 23 '21 at 18:33
Try removing the `height` on your `.text` class or changing those dimensions to be %-based as the pixel size may be overflowing the A4 dimension – justinseibert Jan 23 '21 at 18:36

HTML div with A4 dimensions is larger than A4

2 Answers2