How to use HTML to print header and footer on ever

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 top and bottom of every printed page, regardless of the content.

To clarify, if the document was printed onto 5 pages, each page should have the custom header and footer.

Does anybody know if this is possible using HTML/CSS?

Answer 1

If you don;t need the formatting use document.title and that works like charm in every major browser (tested in Chrome , IE 11, Firefox).

Or you can use

<title>Title repeated on each Page - CLASSIFIED</title>

Answer 2

the magic solution is really putting every thing in single table.

• thead: this is for the repeated header.

• tfoot: the repeated footer.

• tbody: the content.

and make a single tr, td and put every thing in a div

CODE::

<table class="report-container">
   <thead class="report-header">
     <tr>
        <th class="report-header-cell">
           <div class="header-info">
            ...
           </div>
         </th>
      </tr>
    </thead>
    <tfoot class="report-footer">
      <tr>
         <td class="report-footer-cell">
           <div class="footer-info">
           ...
           </div>
          </td>
      </tr>
    </tfoot>
    <tbody class="report-content">
      <tr>
         <td class="report-content-cell">
            <div class="main">
            ...
            </div>
          </td>
       </tr>
     </tbody>
</table>

---

table.report-container {
    page-break-after:always;
}
thead.report-header {
    display:table-header-group;
}
tfoot.report-footer {
    display:table-footer-group;
} 

---

extra: to prevent overlapping with multiple pages. like:

<div class="main">
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
  ...
  ...
  ...
</div>

which results in overflow that will make things overlap with the header within the page breaks..

so >> use: page-break-inside: avoid !important; with this class article.

table.report-container div.article {
    page-break-inside: avoid;
}

---

pretty simple, hope this will give you the best result you wishing for.

best regards. ;)

source..

Answer 3

If you can use javascipt, have the client handle laying out the content using javascript to place elements based on available space.

You could use the jquery columnizer plugin to dynamically lay out your content in fixed size blocks and position your headers and footers as part of the rendering routine. http://welcome.totheinter.net/columnizer-jquery-plugin/

See example 10 http://welcome.totheinter.net/autocolumn/sample10.html

The browser will still add its own headers or footers if enabled in the os. Consistent layout across platforms and browsers will likely require conditional css.

Answer 4

If you are using a template engine like Asp.net Razor Engine or Angular, I think you must re-generate your page and split the page in several pages and then you can freely markup each page and put header and footer on theme. one example could be as bellow:

@page {
  size: A4;  
   margin: .9cm;
}


@media print {

   body.print-paper-a4 {
    width: 210mm;
    height: 297mm;
  }

   body {
       background: white;
       margin: 0;
       padding: 0;
   }

   .print-stage,
   .no-print {
       display: none;
   }


   body.print-paper.a4 .print-paper {
      width: 210mm;
        height: 297mm;
    }

   .print-paper {
       page-break-after: always;
       margin: 0;
       padding: .8cm;
       border:none;
       overflow: hidden;
   }

}





.print-papers {
    display: block;
    z-index: 2000;
    margin: auto;

}


body.print-paper-a4 .print-paper {
    width: 21cm;
    height:27cm;
}


.print-paper {
    margin: auto;
    background: white;
    border: 1px dotted black;
    box-sizing: border-box;
    margin: 1cm auto;
    padding: .8cm;
       overflow: hidden;   
}


body.print-mode .no-print-preview {
    display: none;
}

body.print-mode .print-preview {
    display: block;
}

<body class="print-mode print-paper-a4">
        
        <div class="print-papers print-preview">
            <div class="print-paper">
                <div style="font-size: 5cm">
                    HELLO
                </div>

            </div>
            <div class="print-paper">
              <div class="page-header">
                </div>
              
              
            </div>
            <div class="print-paper">
                
                

            </div>            
        </div>
  </body>

Answer 5

Is this something you want to print-only? You could add it to every page on your site and use CSS to define the tag as a print-only media.

As an example, this could be an example header:

<span class="printspan">UNCLASSIFIED</span>

And in your CSS, do something like this:

<style type="text/css" media="screen">
    .printspan
    {
        display: none;
    }
</style>
<style type="text/css" media="print">
    .printspan
    {
        display: inline;
        font-family: Arial, sans-serif;
        font-size: 16 pt;
        color: red;
    }
</style>

Finally, to include the header/footer on every page you might use server-side includes or if you have any pages being generated with PHP or ASP you could simply code it in to a common file.

Edit:

This answer is intended to provide a way to show something on the physical printed version of a document while not showing it otherwise. However just as comments suggest, it doesn't solve the issue of having a footer on multiple printed pages when content overflows.

I'm leaving it here in case it's helpful nevertheless.

Answer 6

Use page breaks to define the styles in CSS:

@media all
  {
  #page-one, .footer, .page-break { display:none; }
  }

@media print
  {
  #page-one, .footer, .page-break   
    { 
    display: block;
    color:red; 
    font-family:Arial; 
    font-size: 16px; 
    text-transform: uppercase; 
    }
  .page-break
    {
    page-break-before:always;
    } 
}

Then add the markup in the document at the appropriate places:

<h2 id="page-one">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>

References

• CSS Paged Media: Page Breaks

• MDN: page-break-before

• MDN: break-before

• Multi-column Layout

• XHTML Print: Second Edition

• Webkit Bug 5097: CSS2 page-break-after does not work

• Print HTML FAQ: Will the program respect CSS styles such as page-break-after?

• How to deal with page breaks when printing a large HTML table