How to Control Page Margins When Printing HTML Documents?

Control Page Margins for Printing HTML Documents

When printing HTML pages, it's often desirable to control the margins to ensure proper formatting on paper. However, setting margins in a conventional style-sheet may not have the intended effect.

How to Specify Margins for Print

To specify margins specifically for printed output, it's recommended to use units like centimeters (cm) or millimeters (mm) instead of pixels. Pixels are translated differently by browsers and may not yield consistent results on paper. For consistency, use the following code:

<code class="css">body {
  margin: 25mm 25mm 25mm 25mm;
}</code>

Note: This does not adjust the printer's printable area or browser-controlled margins.

Font Sizes in Print

For font sizes, use points (pt) instead of pixels in the print media:

<code class="css">p {
  font-size: 10pt;
}</code>

Controlling Margins with @page Directive

For full control over printed margins, including those outside the HTML body, use the @page directive:

<code class="css">@page {
  margin: 25mm 25mm 25mm 25mm;
}</code>

This method affects the printer's margin settings, but users can still modify them in the print preview.

Browser Considerations

Be aware that some browsers, such as IE7 and above, automatically adjust the page size for optimal fit, potentially distorting the print output. To override this, users should select "Print Preview" and set the print size to 100%.

Related Resource

For further discussion on disabling browser printing options, refer to the following response: https://stackoverflow.com/questions/3780990/disabling-browser-print-options-headers-footers-margins-from-page

The above is the detailed content of How to Control Page Margins When Printing HTML Documents?. For more information, please follow other related articles on the PHP Chinese website!