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?
CSS
<style>
.empty-header {
height: 0px
}
.empty-footer {
height: 0px
}
@media print {
.empty-header {
height: 100px
}
.empty-footer {
height: 20px
}
}
header {
width: 100%;
height: 50px;
}
footer {
width: 100%;
height: 20px;
}
@media print {
header,
footer {
position: fixed;
color: #777;
}
footer {
bottom: 0;
}
}
</style>
HTML
<header>
<h3>Header Example</h3>
<li>This is an example of a header.</li>
</header>
<table class=paging>
<thead class="empty-header"></thead>
<tbody>
<tr>
<td>
<ol>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
<li>This is the main content of the page.</li>
</ol>
</td>
</tr>
</tbody>
<tfoot class="empty-footer"></tfoot>
</table>
<footer>(repeated footer)</footer>
</body>
2
Answers
Yes, it’s possible to print HTML pages with custom headers and footers on each printed page using CSS. You can use the
@page
rule to specify the margins for the page box, and then you can use::before
and::after
pseudo-elements content in the margin area.Here’s an example of how you can do that:
This will add "UNCLASSIFIED" in red, Arial, size 16pt to the top and bottom center of every printed page.
Note: This code is using Bootstrap by CDN (Content Delivery Network) link.
The web standard which has been proposed for managing paged media has unfortunately not been fully implemented yet by the major browsers.
In the meantime, suggest you use the excellent Javascript library Paged.js to accomplish this. It works as a polyfill, allowing you to use the web standard to specify your headers and footers, and then interpreting that in a way that current browsers can understand. The way I am using it here in this snippet will display the paginated results both on screen and when printed, but if you need it to display paginated results in print view only, that is possible.