How to use HTML to print header and footer on every printed page of a document?

Question

Is it possible to print HTML pages with custom headers and footers on each printed page?

I\'d like to add the word \"UNCLASSIFIED\" in Red, Arial, size 16pt to the t

Answer 1

I'm surprised and unimpressed that Chrome has such terrible CSS print support.

My task required showing a slightly different footer on each page. In the simplest case, just an incrementing chapter and page number. In more complex cases, more text in the footer - for example, several footnotes - which could expand it in size, causing what is on that page's content area to be shrunk and part of it to reflow to the next page.

CSS print cannot solve this, at least not with shoddy browser support today. But stepping outside of print, CSS3 can do a lot of the heavy lifting:

https://jsfiddle.net/b9chris/moctxd2a/29/

  

  
Content
  

SCSS:

body {
  @media screen {
    width: 7.5in;
    margin: 0 auto;
  }
}

div.page {
  display: flex;
  height: 10in;    
  flex-flow: column nowrap;
  justify-content: space-between;
  align-content: stretch;
}

div.content {
  flex-grow: 1;
}

@media print {
  @page {
    size: letter;  // US 8.5in x 11in
    margin: .5in;
  }

  footer {
    page-break-after: always;
  }
}

There's a little more code in the example, including some Cat Ipsum; but the js in use is just there to demonstrate how much the header/footer can vary without breaking pagination. The key really is to take a column-bottom-sticking trick from CSS Flexbox and then apply it to a page of a known, fixed height - in this case, an 8.5"x11" piece of US letter-sized paper, with .5" margins leaving width: 7.5in and height: 10in exactly. Once the CSS flex container is told its exact dimensions (div.page), it's easy to get the header and footer to expand and contract the way they do in conventional typography.

What's left is flowing the content of the page when the footer, for example, grows to 8 footnotes not 3. In my case the content is fixed enough that I don't need to worry about it, but I'm sure there's a way to do it. One approach that leaps to mind, is to turn the header and footer into 100% width floats, then position them with Javascript. The browser will handle the interruptions to regular content flow for you automatically.