How can CSS be used to print multiple pages without any margins? And what is causing this slight extra height in the output

Question

How can CSS be used to print multiple pages without any margins? And what is causing this slight extra height in the output

Check out the Live Demo here, apologies for the messy CSS as I have been experimenting with different styles.

I am currently attempting to print PDF files using the browser's print dialog. Each file consists of 4 pages in the DIN lang format with an additional 3mm on each side.

In the HTML code below, each .page represents a physical page with dimensions outlined above. The printable area is precisely the DIN lang measurements (105mm x 210mm) centered on the page.

Despite my efforts, I am struggling to make the .page element fit perfectly into the parameters set in @page. There seems to be a slight excess height that becomes more noticeable when additional pages are added. When I include page-break-after: always;, it appears that the first page is already too tall (resulting in what seems like a blank page following it).

https://i.sstatic.net/myT67.png

html css printing media-queries

Answer 1

Answer №1

It took me hours of experimenting with different setups and scouring the internet for answers on various platforms before finally stumbling upon a workaround that, while not perfect, is currently the most effective solution available.

To implement this fix, simply add the following code snippet to your print media query:

@media print {
  body {
     border: 1px solid transparent;
  }
}

Complete code for execution:

window.print();

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  padding: 0;
  margin: 0;
  height: fit-content;
}

.print-area {
  background-color: #ffffff;
  width: 105mm;
  height: 210mm;
  font-size: 12pt;
  display: none;
}

.page {
  display: block;
  height: 216mm;
  width: 111mm;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: 0;
  /* page-break-after: always; */
}

#page-one {
  background-color: rgb(206, 135, 208);
  top: 0;
  left: 0;
}
#page-two {
  background-color: rgb(78, 73, 212);
}
#page-three {
  background-color: rgb(232, 227, 151);
}
#page-four {
  background-color: rgb(118, 196, 124);
}

@media print {
  body {
    border: 1px solid transparent;
  }
}

@page {
  size: 111mm 216mm;
  margin: 0 !important;
}

<div class="page" id="page-one">
  <div class="print-area">
    <h1>Hello from page 1</h1>
  </div>
</div>
<div class="page" id="page-two">
  <div class="print-area">
    <h1>Hello from page 2</h1>
  </div>
</div>
<div class="page" id="page-three">
  <div class="print-area">
    <h1>Hello from page 3</h1>
  </div>
</div>
<div class="page" id="page-four">
  <div class="print-area">
    <h1>Hello from page 4</h1>
  </div>
</div>

Answer 2

It took me hours of experimenting with different setups and scouring the internet for answers on various platforms before finally stumbling upon a workaround that, while not perfect, is currently the most effective solution available.

To implement this fix, simply add the following code snippet to your print media query:

@media print {
  body {
     border: 1px solid transparent;
  }
}

Complete code for execution:

window.print();

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  padding: 0;
  margin: 0;
  height: fit-content;
}

.print-area {
  background-color: #ffffff;
  width: 105mm;
  height: 210mm;
  font-size: 12pt;
  display: none;
}

.page {
  display: block;
  height: 216mm;
  width: 111mm;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: 0;
  /* page-break-after: always; */
}

#page-one {
  background-color: rgb(206, 135, 208);
  top: 0;
  left: 0;
}
#page-two {
  background-color: rgb(78, 73, 212);
}
#page-three {
  background-color: rgb(232, 227, 151);
}
#page-four {
  background-color: rgb(118, 196, 124);
}

@media print {
  body {
    border: 1px solid transparent;
  }
}

@page {
  size: 111mm 216mm;
  margin: 0 !important;
}

<div class="page" id="page-one">
  <div class="print-area">
    <h1>Hello from page 1</h1>
  </div>
</div>
<div class="page" id="page-two">
  <div class="print-area">
    <h1>Hello from page 2</h1>
  </div>
</div>
<div class="page" id="page-three">
  <div class="print-area">
    <h1>Hello from page 3</h1>
  </div>
</div>
<div class="page" id="page-four">
  <div class="print-area">
    <h1>Hello from page 4</h1>
  </div>
</div>

How can CSS be used to print multiple pages without any margins? And what is causing this slight extra height in the output

Answer №1

Complete code for execution:

Similar questions

Troubleshooting Media Queries Problems in HTML and CSS

Distributing elements evenly across the parent width using Angular FlexLayout for a responsive design

Verify the accurate sequence for arranging the items in the drag and drop list

Is it possible to precisely position multiple children in a relative manner?

Issue with Responsive Behavior of Multi-Row Cards in Bootstrap 4

HTML5: Enhancing Video Playback on the iPad with Custom Zoom Controls

Explore the possibilities with Intel XDK's customizable keyboard feature

Problem with loading image from local path in Angular 7

The particular division is failing to display in its designated location

Expanding your knowledge of AngularJS: utilizing ng-click to interact with elements

Implementing HTML rendering in a PyQt5 window

Tips for customizing the appearance of a label when a MUI Radio Button is selected

Tips for creating dynamic animations in an opencart dropdown menu

Issue in Less.js: the 'min' function encountered an error due to incompatible types

`Scrolling through a horizontal menu with no scrollbar present`

When resizing the browser, HTML/CSS elements tend to shift positions :(

Displaying a loading animation within a specific div element

Obtain consistent outcomes by entering identical data in both Ajax and PHP

Guide to displaying WordPress functions within an accordion in my loop

Having trouble with the button's functionality in Internet Explorer?