How to add running header and footer to printed pages

[osamagithub80]

Hello there;

Thanks for the great code.

Do you have an idea how to add running header and footer to printed pages?

Regards;

[ocram]

Thank you!

In general, it’s possible to add running or repeated headers and footers, yes.

You should be able to print a standard header into the pages’ margin boxes at the top with some CSS like this:

@page {
    size: A4;
    margin: 20mm;

    @top-left {
        content: element(headerLeft);
        border-bottom: 2px solid #666;
    }

    @top-center {
        border-bottom: 2px solid #666;
    }

    @top-right {
        content: element(headerRight);
        border-bottom: 2px solid #666;
    }
}

.headerLeft {
    position: running(headerLeft);
}

.headerRight {
    position: running(headerRight);
}

Then, just define your two (or one, or three) header boxes in HTML like this:

<div class="headerLeft">...</div>
<div class="headerRight">...</div>

The problem will probably be that your renderer – usually your browser – does not support all these advanced CSS features [1] [2], which is why alternative (special-purpose) renderers have appeared as well. But you may be able to simply patch the missing support in your browser using a polyfill such as Paged.js. Apart from that, Chrome/Chromium generally has the best support.

Let me know if that helps.