Adding a text footer to the bottom of every printed page when a web page is printed

Question

Is there a technique for adding a text footer the bottom of each page when it is printed? For example "Copyright My Company 2010" - I know there is probably a way to do this with a background image using CSS, but I would really like to use text for this portion so the client can edit it. Any ideas?

Answer 1

You can have this in your normal footer and hide it in your regular CSS. For printing, include a separate print stylesheet that displays the footer.

Answer 2

CSS doesn't have any notion of page media, so it's going to be impossible to guarantee where the page breaks are going to occur naturally.

EDIT As pointed out below, CSS 2.1 did introduce @page as a way to deal with paged media, but it was never implemented across the common browsers. So, as I wrote above, it doesn't exist, although that's not technically true.

You can set hard page breaks, e.g. by placing a <div class="page-break"> at the approximate locations. You can then style it with page-break-before:always to ensure that a break happens there.

There's also a page-break-after property; but then you don't know how far down the page the element starts. So, when you need to position it, the only thing you can use is position:absolute;bottom:0 which wouldn't fix it to the page media, but to the bottom of the whole document.

If you use page-break-before then you know it always appears at the top of the page. Then, you can use position:absolute without giving a top or bottom, which results in only taking it out of the document flow. Then, giving it a height of 720pt (10 inches) means you have a bottom edge that you can position content against.

Here's how I would tackle it:

/* hide the page footer on screen display */
.page-break { display: none; }

@media print {
  /* make a 10-inch high block that sits on top of the page content */
  .page-break {
    page-break-before: always;
    display: block;
    position: absolute;
    height: 720pt;
  }

  /* stick the contents of .page-break to the bottom of the 10 inch block */
  .page-break .copyright {
    position: absolute;
    bottom: 0px;
  }
}

However, I have no idea how well browsers actually support this in reality. I remember playing with page breaks a while back, and ended up giving up because I couldn't get them to work reliably enough. I suspect it's still either impossible or very hackish and unreliable.