How to Correctly Set A4 Paper Size in CSS for Chrome Printing?

CSS to Set A4 Paper Size

Problem:

Users are experiencing difficulties printing an A4 paper simulation from a web page in Chrome, with content being clipped. The issue persists even though the element size is set to 21cm x 29.7cm.

Investigation:

After further analysis, the root cause was identified as assigning the initial value to the page width in the print media rule.

Impact of width: initial:

• In Chrome, width: initial within the .page element under the print media rule leads to scaling of page content if no specific length is provided for width on parent elements.

• This results in:

  • Content being too long for the page by approximately 2cm
  • Page padding exceeding the initial 2cm
  • Rendering of content at approximately 196mm before scaling up to 210mm

Solution:

To resolve this issue, explicitly set the A4 paper width and height in the print media rule to html, body, or .page, avoiding the initial keyword.

Revised Code:

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

Note: This modification maintains the original CSS settings while addressing the scaling problem in Chrome.

The above is the detailed content of How to Correctly Set A4 Paper Size in CSS for Chrome Printing?. For more information, please follow other related articles on the PHP Chinese website!