HTML
<div class="headerLeft"> Running Headers and Footers </div> <div class="headerRight"> A sample document </div> <div class="footerLeft"> <img src="https://printcss.live/img/logo.png" /> </div> <div class="footerRight"> <a href="mailto:info@azettl.net">info@azettl.net</a> <br /> <a href="https://printcss.live/">printcss.live</a> </div> <div class="content"> <h1>PrintCSS: Running Headers and Footers</h1> <p> If you want to use HTML inside the page margin boxes, you will need to use running elements. These elements are normal HTML nodes with the CSS position property set to 'running(NAME)'. </p> <p> The name given to the running element is used within the page margin boxes to set their content to the running elements inner HTML. </p> <p> To do so, you need to set the specific page margin box's CSS content property to 'element(NAME)', where NAME is the given running element name. </p> <p> Elements with the position running do not appear in the document until you assign them to some CSS content property. </p> <p> Your running elements must come first in your HTML structure. For example, if you put the footer element before the closing body tag, the running footer will only appear on the last page. </p> </div>
CSS
@page { size: A4; margin: 20mm; @top-left{ content: element(headerLeft); border-bottom:2px solid #434190; } @top-center{ border-bottom:2px solid #434190; } @top-right{ content: element(headerRight); border-bottom:2px solid #434190; } @bottom-right { content: element(footerRight); border-top:2px solid #434190; } @bottom-center{ content: counter(page) ' / ' counter(pages); border-top:2px solid #434190; font-size:8pt; } @bottom-left{ content: element(footerLeft); border-top:2px solid #434190; } } .headerLeft{ position: running(headerLeft); font-size:12pt; } .headerRight{ position: running(headerRight); font-size:8pt; font-style: italic; text-align: right; color:#667eea; } .footerLeft{ position: running(footerLeft); } .footerLeft img{ width:20mm; } .footerRight{ position: running(footerRight); text-align: right; font-size:8pt; }
JavaScript
Preview powered by paged.js
PDF rendered with  (https://weasyprint.org/)