5

I'm trying to implement a fixed print header using position: running as described here

Unfortunately in both Chrome and FF the header only displays on page 1. Is this supported in modern browsers, and if so, how can I get it to show up on every page?

I've tried it both with, and without the big 90px margin. 

<html>
<head>
    <style type="text/css">
            div.header { display: none }
            @media print {
                div.header {
                    display: block;
                    position: running(header);
                }
                @page { @top-center { content: element(header) }}
                @page { margin-top: 90px; }
            }
    </style>
</head>
<body>

<div id="header" class="header">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>

    Lorem ipsum dolor sit amet, denique adversarium cum ei. Mea lobortis antiopam in. Pro ex congue ceteros. Vel clita eruditi pericula ea, no everti delicatissimi vis, adhuc oportere in vix. Forensibus interesset qui ne, vis at senserit periculis. Rebum urbanitas ex eos, ei sea zril admodum sadipscing.<br><br>

Vim atqui corrumpit percipitur ad, elitr aliquam suscipit eum an. An graecis explicari sed, ad pri elit iudico expetenda. Quis harum audiam at mel, ea modus atomorum assueverit has. In movet tollit cum, idque oblique vis ut.<br><br>

Vel ex dicunt discere temporibus. Ullum consul molestiae has cu, vel liber definitiones no. Sed ut ridens perpetua, vis ex facer velit patrioque. Has idque iriure delectus te. No dicta diceret accommodare vel, has omnium antiopam ne. Deleniti efficiantur vis id, oratio epicuri forensibus ne vis.<br><br>

Eum an mazim nonumy. Consul delectus cu vis, nihil delectus conceptam et usu. Quem laoreet nonumes te mea. Movet consul et mei, possim numquam id per.<br><br>

Ea vel summo dolorem expetenda, te justo lucilius sit. Id vel hinc accusamus assueverit, ea vis errem animal. Id vis dico vide velit, forensibus voluptatum id ius. Ponderum facilisi te per, nobis neglegentur id his, impetus minimum per an. Quod exerci aeterno ius eu, ne vix meis nonumes deterruisset, dolor complectitur ex per.<br><br>

Et iudico platonem mei, cu erant denique vel, no labores dissentiet ius. Ne quis meis sed. Ei vel ullum ignota molestiae, congue vocent similique at has. Ne per delenit inciderint.<br><br>

Enim iracundia incorrupte in eam, sit in assum tincidunt. Id per diam deseruisse, qui no praesent temporibus consequuntur, eos te elit ceteros referrentur. Esse eleifend omittantur sea ei, usu cu maiorum contentiones, eum fabulas dignissim ei. Eu quo inani melius, et autem omnesque sit.<br><br>

[.....tons more text.....]

</body>

</html>
Community
  • 1
  • 1
Adam Rackis
  • 82,527
  • 56
  • 270
  • 393

1 Answers1

2

It seems that although your syntax is correct, browsers do not support position: running or running-head yet. It is still a W3C Editor's draft, updated March 11 2014 at the moment of writing this, so it looks like we may have the ability later on but it's been years since they've been proposed. This is likely because W3C believe this should be handled by the browser's print function. You can see if your browser currently supports this feature in this jsFiddle (WARNING: opens print page)

I'd recommend using custom @media print setting to reach modern browsers to do what you're trying to do. This does require that you have an element for each page of print though, repeating the (hidden on webview) title each time

.header { display:none; }
.container:first-of-type .header { display:block; } // Only show first
@media print { // Show the rest when printed
    .header { position:fixed; margin-top:-50px; display:block; }
    .spacer { padding-top:50px; }
}

Demo (WARNING: opens up the print page)

You could also do a similar approach using a pseudo-element applied to the container, thus removing the need for the h2 within each time. This still requires that you have a container that contains a full page each time though. Demo (WARNING: opens up the print page)

With that being said, you can use Flying Saucer (which the question you linked is using) to do this, but it only has CSS 2.1 support. Other alternatives including using a PDF maker to add a title to each page

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147