Innnards: How do I add a header and footer to each printed page of my HTML document?

As the author of the WWW FAQ, I regularly answer questions about the workings of the Web. If a question is frequently asked, I simply add an article to the FAQ. But sometimes a question is more detailed, more in-depth— not really a FAQ, but still of interest to others. You'll find those questions, with my answers, here in Innards along with commentary on other web-technology-related topics.

2007-09-18

Unfortunately, the answer is "you can't... yet." Although the CSS3 specification includes a proposed solution for running headers and running footers, it is not supported by the major web browsers as of this writing. Until it is, there won't be much point in using it.

For the curious, the proposed solution looks like this (one would do this within a .css file, or within a style element):

@page {
@top-left { content: "Header in Top Left Cell (top-left)" }
@bottom-left { content: "Footer in Bottom Left Cell (bottom-left)" }
}

But does it work? So far, no. That's because the major web browsers (including both Microsoft Internet Explorer and Firefox) do not support it yet.

Until support for CSS headers and footers is added to the major browsers, it won't be possible to do what you ask with pure HTML and CSS.

As a general rule, the browser vendors pay vastly more attention to on-screen presentation. Printing takes a back seat. The best way to exercise control over the printed appearance of your document is to offer a downloadable version of your document in the Adobe PDF format. It's easy to "Save As" PDF format from both Microsoft Word and OpenOffice, among other programs.

The proposed solution for headers and footers in CSS3 can do more than display text. There are ways to insert page numbers and so forth. But since none of this is actually working yet in the major web browsers, I won't go into agonizing detail. Those who are eager to learn more can check out the current working draft of the CSS3 "paged media" specification on the W3C Consortium web site.


Follow us on Twitter | Contact Us

Copyright 1994-2012 Boutell.Com, Inc. All Rights Reserved.