How Can I Design an HTML Page to Print as A4 Size?

How to Design an HTML Page with A4 Paper Dimensions

Many users desire the ability to print an HTML page that mimics the dimensions and margins of an A4-sized sheet. This article explores the techniques necessary to achieve this effect.

CSS Media Queries for Print

The key to controlling the printed dimensions of an HTML page lies in utilizing CSS media queries. These queries target the print medium and allow for the application of specific styles. For A4-sized printing, the following @media query can be used:

@media print {
    body {
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm;
    }
}

This code sets the width and height of the printed page to 21cm and 29.7cm respectively, corresponding to an A4 page. Additionally, it defines margins of 30mm (top and bottom) and 45mm (left and right) to achieve the desired page dimensions.

Subsequent Page Breaks

If the HTML content exceeds the specified page size, subsequent pages must be created. This can be accomplished by inserting CSS page breaks. For example:

div.chapter {
    page-break-after: always;
}

This code ensures that every chapter starts on a new page.

Browser Display

To optimize the web display of the page while maintaining the printed A4 dimensions, create a separate web CSS file or override parts of the print CSS. For example:

@media screen {
    body {
        width: 80%;
        height: auto;
        margin: 20px;
    }
}

This code sets the displayed width to 80% of the available browser space, with automatic height adjustment. The margins are also reduced to 20px for a more web-friendly layout.

Conclusion

By implementing CSS media queries and managing page breaks, it is possible to create an HTML page that behaves like an A4-sized document when printed. By separating print and web CSS, the page can also maintain an optimized display for different viewing environments.

The above is the detailed content of How Can I Design an HTML Page to Print as A4 Size?. For more information, please follow other related articles on the PHP Chinese website!