Creating page headers and footers using CSS for print
PdfPdf GenerationFlying SaucerCss Paged-MediaPdf Problem Overview
I'm creating a PDF using Flying Saucer (which dumps out CSS/HTML to iText to a PDF) and I'm trying to use CSS3 to apply an image header and footer to each page.
I'd essentially like to put this div in the top left of each page:
<div id="pageHeader">
<img src="..." width="250" height="25"/>
</div>
My CSS looks somewhat like this:
@page {
size: 8.5in 11in;
margin: 0.5in;
@top-left {
content: "Hello";
}
}
Is there a way for me to put this div in the content?
Pdf Solutions
Solution 1 - Pdf
Putting an element to the top of each page:
@page {
@top-center {
content: element(pageHeader);
}
}
#pageHeader{
position: running(pageHeader);
}
See http://www.w3.org/TR/css3-gcpm/#running-elements (works in Flying Saucer)
Solution 2 - Pdf
To include both header and footer on pages (elaborating on excellent answer from @Adam):
<style>
@page {
margin: 100px 25px;
size: letter portrait;
@top-left {
content: element(pageHeader);
}
@bottom-left {
content: element(pageFooter);
}
}
#pageHeader{
position: running(pageHeader);
}
#pageFooter{
position: running(pageFooter);
}
</style>
<body>
<header id="pageHeader">something from above</header>
<footer id="pageFooter">lurking below</footer>
<div>meaningful rambling...</div>
</body>
NOTE: In order for footer to repeat on every page it may be necessary to define it BEFORE other body content (for multi-page content)
Solution 3 - Pdf
I spent a lot of time to get this working on modern Chrome, Firefox and Safari. I use this to create a PDF from HTML. You will get header and footer fixed to each page without overlapping the page content. Try it:
CSS
<style>
@page {
margin: 10mm;
}
body {
font: 9pt sans-serif;
line-height: 1.3;
/* Avoid fixed header and footer to overlap page content */
margin-top: 100px;
margin-bottom: 50px;
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 100px;
/* For testing */
background: yellow;
opacity: 0.5;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
font-size: 6pt;
color: #777;
/* For testing */
background: red;
opacity: 0.5;
}
/* Print progressive page numbers */
.page-number:before {
/* counter-increment: page; */
content: "Page: " counter(page);
}
</style>
HTML
<body>
<header id="header">Header</header>
<footer id="footer">footer</footer>
<div id="content">
Here your long long content...
<p style="page-break-inside: avoid;">This text will not be broken between the pages</p>
</div>
</body>