Printing A4-Sized Pages with CSS

When it comes to printing web pages, achieving the desired layout and size can be a challenge. One common requirement is to print pages in A4 size, which is a standard paper size used in many parts of the world. In this tutorial, we will explore how to use CSS to set the size of a page to A4 and ensure that it prints correctly.

Understanding A4 Paper Size

Before we dive into the CSS code, let’s understand the dimensions of an A4 paper. An A4 paper measures 210mm x 297mm, which is equivalent to 8.27 inches x 11.69 inches.

Setting the Page Size with CSS

To set the page size to A4 using CSS, you can use the @page rule, which allows you to define the size and margins of a page. Here’s an example:

@page {
  size: A4;
  margin: 0;
}

This code sets the page size to A4 and removes any default margins.

Styling the Page Content

To style the page content, you can use CSS rules to set the width, height, and other properties of the elements on the page. For example:

.page {
  width: 210mm;
  height: 297mm;
  margin: 0 auto;
  padding: 2cm;
  border: 1px solid #D3D3D3;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

This code styles a .page element with an A4-sized width and height, adds some padding and margins, and sets the background color to white.

Printing the Page

To print the page, you can use the @media print rule, which allows you to define styles that apply only when the page is printed. Here’s an example:

@media print {
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

This code removes any unnecessary styles from the .page element when the page is printed and adds a page break after each page.

Common Issues and Solutions

When printing A4-sized pages, you may encounter some common issues, such as:

• The page content being clipped or scaled incorrectly.
• The page margins not being set correctly.

To solve these issues, make sure to set the width and height properties of the .page element to the correct values (210mm x 297mm) and use the @page rule to set the page size and margins. Additionally, you can use the html, body selectors to set the width and height of the HTML document to the correct values:

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

By following these steps and using the correct CSS code, you should be able to print A4-sized pages with ease.

Conclusion

Printing A4-sized pages with CSS requires attention to detail and a good understanding of how to use the @page rule and other CSS properties. By following the examples and tips outlined in this tutorial, you can create professional-looking printed pages that meet your needs.