<div class="headerLeft"> Page Selectors and Page Breaks </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="cover"> <h1>Cover Page</h1> </div> <div class="toc"> <h1>Table of contents</h1> <a href="#running">PrintCSS: Running Headers and Footers</a> <a href="#toc">PrintCSS: Table of Contents</a> <a href="#footnotes">PrintCSS: Footnotes</a> </div> <div class="content"> <h1 id="running">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> <h1 id="toc">PrintCSS: Table of Contents</h1> <p>A very common use case for your PrintCSS document is creating a table of contents. But how would you know the page numbers of your chapters before you render the document? The content takes as many pages as it needs and if your content is dynamic it is impossible to say how many pages a chapter would result in.</p> <h1 id="footnotes">PrintCSS: Footnotes</h1> <p>Footnotes play an important role when it comes to creating books or PDF documents in general. Unfortunately, not all PDF rendering tools are supporting the W3C draft yet. While the commercial tools all have a good integration of the draft, most open-source tools lack support for footnotes completely.</p> <p>Still, in this article, I will explain the W3C footnote draft to you, and we will see the rendering result with the different tools.</p> </div>

@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; } } @page:first{ @top-left{ content:""; border-bottom:none; } @top-center{ border-bottom:none; } @top-right{ content:""; border-bottom:none; } @bottom-right { content:""; border-top:none; } @bottom-center{ content:""; border-top:none; } @bottom-left{ content:""; border-top:none; } } @page:left{ @bottom-right { content:""; border-top:2px solid #434190; } @bottom-center{ content:""; border-top:2px solid #434190; } @bottom-left{ content: counter(page) ' / ' counter(pages); border-top:2px solid #434190; font-size:8pt; } } @page:right{ @bottom-right { content: counter(page) ' / ' counter(pages); border-top:2px solid #434190; font-size:8pt; } @bottom-center{ content:""; border-top:2px solid #434190; } @bottom-left{ content:""; border-top:2px solid #434190; } } @page:blank { @top-left{ content:""; border-bottom:none; } @top-center{ content:""; border-bottom:none; } @top-right{ content:""; border-bottom:none; } @bottom-right { content:""; border-top:none; } @bottom-center{ content:""; border-top:none; } @bottom-left{ content:""; border-top:none; } } .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; } .toc{ break-after:always; page-break-after:always; } .toc a{ display:block; } .toc a::after { content: leader(".") target-counter(attr(href), page); } .cover{ break-after:always; page-break-after:always; } .content h1{ break-before:right; page-break-before:right; }