Tried the following css for header / pager. So far so good. Problems found:
@page :left {
margin-left: 3cm;
margin-right: 4cm;
@top-left {
font-family: sans-serif;
font-weight: bold;
font-size: 1em;
content: "Header - Left - Page " counter(page);
}
@bottom-left {
font-family: sans-serif;
font-weight: bold;
font-size: 1em;
content: "Footer - Left - Page " counter(page);
}
}
@page :right {
margin-left: 4cm;
margin-right: 3cm;
@top-right {
font-family: sans-serif;
font-weight: bold;
font-size: 1em;
content: "Header - Right - Page " counter(page);
}
@bottom-right {
font-family: sans-serif;
font-weight: bold;
font-size: 1em;
content: "Footer - Right - Page " counter(page);
}
}
@page {
@top-center { content: element(ph); }
}
p.pageHeader{
position: running(ph);
}
p.pageHeader::before{ content: 'Page: ' counter(page) ' / '; }
</style>
</head>
<body>
<p class="pageHeader">
This is a test
</p>
<html>
<head>
<style>
/* The following fonts are installed on the server: */
.handwriting {
font-family: 'handwriting', serif;
}
.arabic {
font-family: 'arabic', serif;
}
.deja {
/* Contains glyphs for many languages. */
font-family: 'deja-sans', sans-serif;
}
/*
Also you can use the PDF built-in fonts:
- sans-serif
- serif
- monospace
*/
@page {
@top-center {
content: element(pageHeader) " something quoted " counter(page);
}
}
#pageHeader{
position: running(pageHeader);
}
</style>
</head>
<body>
<span id="pageHeader">
This is a test
</span>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
<div class="handwriting" style="text-align:center;font-size: 90px;color:orange;">
Hello World!
</div>
</body>
</html>