css - printing exact size

Question

I need to print a web page on regular A4 page.

The print result should be exactly 20cm x 20cm (no matter it's position on paper).

I have this html page:

body {
  -webkit-print-color-adjust: exact;
  height: 20cm;
  width: 20cm;
  margin: 0;
  padding: 0
}

img {
  height: 20cm;
  width: 20cm;
  position: absolute;
  top: 0;
  left: 0;
}

h1 {
  font-size: 0.9cm;
  position: relative;
  top: 1cm;
  text-align: center;
  width: 70%;
  margin: 0 auto;
  color: #ffde00;
}

@media print {
  body {
    height: 20cm;
    width: 20cm;
  }
}

<img src="background.png">
<h1>My Example Text</h1>

When I am printing this page (on a regular lasterJet A4 printer) I am getting about 18.9cm result on the paper.

How can I make it exactly 20cm ?

My guess is that the printer driver resizes the body to fit the page. See if you can find a setting like that. And/or, reduce the margins. Also, if the body is 20cm high, can you fit a 20cm img plus a 0.9cm h1 into it? — Mr Lister, Nov 22 '17 at 11:12
@mplungjan I dont have pdf file, and I dont want to create one (I have many web pages like this one) — Tal Levi, Nov 22 '17 at 11:49
https://stackoverflow.com/questions/19065562/add-image-in-pdf-using-jspdf — mplungjan, Nov 22 '17 at 11:53
It could simply be that the printable area of your printer is less than 20cm wide (which wouldn't be unusual for an A4 printer) — Johannes, Sep 30 '20 at 22:49

score 0 · Answer 1 · answered Sep 30 '20 at 22:37

0

To set the print area you can use @media print an example:

/* style sheet for “letter” printing */
@media print and (width: 1.5in) and (height: 1in) {
@page {
margin: 1in;
}
}

answered Sep 30 '20 at 22:37

FabricioG

3,107
6
35
74

css - printing exact size

1 Answers1