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?

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?

• javascript
• html
• css
• printing

• 1 The title and the question were in conflict. Please confirm that this is desired at the bottom of each printed sheet and not just once per web-page. – Brock Adams Commented Oct 29, 2010 at 5:31
• Yeah, so on a document that is multiple pages when printed, the footer needs to occur on each physical page. – Thomas Commented Oct 29, 2010 at 5:34

2 Answers 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 mon 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.

The W3C Working Draft for CSS Paged Media Module Level 3 contains a method to print in the margins.

Try this code, but it might not be widely supported yet.

@page {
     margin: 2cm; 2cm; 2cm; 2cm;
     @bottom-center { content: "Copyright My Company 2010" }
     @top-right { content: counter(page) }
}