Printing Headers

From CSS Discuss

Jump to: navigation, search

Contents

Printing Page Headers and Footers

Summary

The question arises from time to time on CSS Discuss "Is there a CSS solution which would allow a header and footer to repeat on each printed page?". We're talking about printed page headers and footers that are controllable through CSS, not the page headers and footers that the browser adds automatically (for which see Print Stylesheets ).

The answer is sometimes given to make use of position: fixed but the method doesn't work. Aside from the fact that IE doesn't support position: fixed, the CSS2 and CSS2.1 specs are deficient because they don't make it clear how to create a space on the printed page to avoid overwriting the header/footer.

Depending on your design requirements, you might be able to implement a partial solution, using a structural table for your content (yes, I know the objections!) and defining a header row to be repeated at the top of each printed page. Browser support is partial. See Printing Tables and this tutorial.

If you want full, CSS-controlled print headers and footers, you'll need to wait until browsers implement support for the CSS3 Paged Media Candidate Recommendation. It explicitly provides for the facility but in a quite different way, using margin boxes.

Detailed discussion

The position: fixed method would involve something like this in a print stylesheet:-

div#printhead {
display: block;
position: fixed; top: 0; left: 0; width: 100%; height: 2em;
}

The method seeks to exploit the CSS description of position: fixed, namely "... In the case of the print media type, the box is rendered on every page, and is fixed with respect to the page ..." [Section 9.3.1]. My research shows that the method doesn't work. Aside from the fact that IE doesn't support position: fixed, the CSS2 and CSS2.1 specs are deficient because they don't make it clear how to create a space on the printed page to avoid overwriting the header/footer.

Opera and Gecko-based browsers support position: fixed, so the header appears on every printed page. (IE doesn't support position: fixed at all, so the header appears at the top of the first page only.)

For the compliant browsers it's then necessary to shift down the document's main content on every page so that it doesn't overwrite the header. Setting a top margin on <body> (for example) will work only for the first page. I tried to figure out what the CSS2 spec authors had in mind. I concluded that the @page rule may have been intended here [Section 13.2]. Setting an @page top margin creates a page-box margin on every page but unfortunately it shifts down the "fixed" header as well. So I then applied a negative "top" offset to it. Although that had the desired effect, the header, now shifted outside the <body> box, was hidden, even when I specified overflow: visible on <body>. I've made no attempt to implement printed page footers!

I've raised the issue with the W3C CSS Working Group on the www-style@w3.org mailing list (November 2004) but I've had no acknowledgement that it has been recorded as an issue for the CSS2.1 Candidate Recommendation. I doubt if CSS2.1 will be amended because CSS3 Paged Media explicitly provides for the facility but in a quite different way, using margin boxes.

In conclusion, if you want CSS-controlled print headers and footers, you'll need to wait until browsers start to offer experimental support for the CSS3 Paged Media Candidate Recommendation. It could be several years before IE offers support for this CSS3 module, if it ever does.

About this page

This page was created in December 2004 by Jim Wilkinson, who welcomes comments, contributions and corrections.

Personal tools