How to Fix A4 Print Clipping in Chrome Using CSS?

CSS to Set A4 Paper Size for Precise Printing

Problem:

Setting HTML element size to A4 dimensions (21cm x 29.7cm) results in page clipping when printing in Chrome, despite displaying correctly in the browser window.

Analysis:

Chrome specifically seems to have an issue with assigning 'initial' to the page width in the print media rule. This causes scaling of the content to a slightly larger size than the defined A4 dimensions, resulting in clipping.

Solution:

To resolve this issue, avoid using 'initial' for page width in the print media rule. Instead, explicitly assign the A4 dimensions to HTML, body, or directly to the '.page' element.

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

By setting fixed dimensions, the content remains within the A4 boundaries, preventing clipping. This resolves the issue in Chrome while preserving the rest of the CSS styles.

Note: This modification addresses the specific issue with Chrome's handling of 'initial' for page width. However, it's important to test the print functionality across different browsers to ensure consistency and accuracy of the printed output.

The above is the detailed content of How to Fix A4 Print Clipping in Chrome Using CSS?. For more information, please follow other related articles on the PHP Chinese website!