How to Accurately Simulate A4 Paper for Printing in Chrome using CSS?

Adjusting CSS to Simulate A4 Paper and Enable Accurate Printing

To create a simulated A4 paper in web that accurately prints in Chrome, certain CSS adjustments are necessary. While the provided dimensions of 21cm x 29.7cm for the element size may appear correct, when printing or generating a print preview, the page gets clipped.

Addressing the Issue

After further investigation, the root cause lies in assigning "initial" to the page width within the print media rule. Using "initial" for width in Chrome results in scaling if no specific length value is defined for its parent elements. This results in the page being too long and the padding being larger than the intended 2cm.

Solution

To rectify this issue, replace "initial" with the actual paper width (210mm) and height (297mm) in the print media rule. Apply this to "html," "body," or directly to the ".page" element.

html, body {
  width: 210mm;
  height: 297mm;
}

Example

The following revised CSS code incorporates the suggested solution:

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

Compatibility

This solution successfully resolves the printing issue in Chrome (tested on various OS platforms) while maintaining the functionality in other browsers.

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