HTML and CSS set printing page size to half letter

Question

I need to set a layout to be printed using paper of half letter size (215mm height and 139mm width). I have tested many css parameters such as

@page {
  size: 139mm 215mm;
  margin: 0;
}

@media print {
  @page {
    size: 139mm 215mm;
  }
}

html {
  width: 139mm;
  height: 215mm;
  margin: 0;
}

body {
  width: 139mm;
  height: 215mm;
  margin: 0;
}

<body>
  <div style="height: 215mm; width: 139mm; border:solid grey 1px;">
    <!-- My content -->
    ...
  </div>
</body>

But when I print using Control+P, I always get a Legal vertical size page.

How can I set this custom size to be printed in any browser?

Be inspired to this similar solution https://stackoverflow.com/questions/16649943/css-to-set-a4-paper-size — step, Jul 02 '18 at 05:53
I have tried that but still giving an A4 print preview size with my div in the left upper corner — Alex Lord Mordor, Jul 02 '18 at 05:57

score 0 · Answer 1 · answered Jul 02 '18 at 07:33

Beside defining size you also need to define height and width for @page. I updated your code and placed it below, I hope that solves your problem.

Key part:

@page {
  size: 139mm 215mm;
  height: 215mm;
  width: 139mm;
  margin: 0;
}

Snippet:

window.print();

@page {
  size: 139mm 215mm;
  height: 215mm;
  width: 139mm;
  margin: 0;
}

html {
  width: 139mm;
  height: 215mm;
  margin: 0;
}

body {
  width: 139mm;
  height: 215mm;
  margin: 0;
}

<body>
  <div style="height: 215mm; width: 139mm; border:solid grey 1px;">
    <!-- My content -->
    ...
  </div>
</body>

HTML and CSS set printing page size to half letter

1 Answers1

Key part:

Snippet:

Updated JSFiddle