CODEWITHSUNDEEP
javascripthtmlcssprinting
Thomas
Thomas

Reputation: 5099

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

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?

Upvotes: 4

Views: 13245

Answers (2)

JohanB
JohanB

Reputation: 56

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) }
}

Upvotes: 0

Andrew Vit
Andrew Vit

Reputation: 19259

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.

Upvotes: 4

Related Questions