How Can I Control Browser Print Settings (Margins, Headers, Footers) Using CSS?

Altering Browser Print Settings (Margins, Headers, Footers)

Many attempts have been made to address the topic of modifying browser print settings, but definitive clarity remains elusive. This article provides a comprehensive explanation and code example based on the latest CSS standards.

Customization with @page Directive

CSS offers the @page directive, allowing the modification of page-specific formatting for printed media. By using this directive, developers can specify printer margins, page orientation, and other settings.

Setting Printer Margins

To set printer margins, use the margin property within the @page directive. This property takes values in millimeters and affects the margin settings in the printer's options panel.

Note: Browser behavior for @page properties can vary. For example, Safari does not support margin setting, while other major browsers do.

To remove headers and footers using @page, set the margins as follows:

@page {
    margin: 0mm;
}

This technique may not be effective if your printed content spans multiple pages since the browser-specific margins are disabled.

Browser-Specific Behavior

Different browsers exhibit varying behavior when handling @page directives. Here's a breakdown:

• Firefox 3.6 and below: @page margins are ignored.
• IE 7 and below: @page margins are ignored.
• Safari 5.1.7: @page margins are not supported.
• Chrome 4.1: @page margins are ignored.
• IE 8: @page margins are respected, but the browser header and footer are not hidden.
• Opera 10: @page margins are not respected, but the browser header and footer are hidden if background is non-transparent.
• Chrome 21 and above: @page margins are respected, and the browser header and footer are hidden if the margins overlap with the content.

Example Code

The following HTML and CSS code demonstrates how to customize print settings with @page directive.

    <title>Print Test</title>
    <style type="text/css" media="print">
    @page 
    {
        size:  auto;
        margin: 0mm;
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm;
    }
    </style>


  <div>Top line</div>
  <div>Line 2</div>

Note: This code hides the browser header and footer in Chrome but not in other browsers.

Limitations and Considerations

Changing browser print settings dynamically may not be supported consistently across all browsers. Some browsers may override custom settings, or the results may vary depending on the specific printer used.

The above is the detailed content of How Can I Control Browser Print Settings (Margins, Headers, Footers) Using CSS?. For more information, please follow other related articles on the PHP Chinese website!