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>