Skip to content

Instantly share code, notes, and snippets.

@map7
Last active December 6, 2023 03:39
Show Gist options
  • Save map7/6991f0f70809c81f487c8359321fa32d to your computer and use it in GitHub Desktop.
Save map7/6991f0f70809c81f487c8359321fa32d to your computer and use it in GitHub Desktop.
HTML CSS + Paged polyfill with header and footer
<html>
<head>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style type="text/css">
.footer {
position: running(footerRunning);
}
@page {
@bottom-right {
content: element(footerRunning);
}
}
@media print {
@page {
size: "A4";
/* Chrome sets own margins, we change these printer settings */
/* top,right,bottom,left */
margin: 10mm 15mm 20mm 25mm;
}
@page {
@top-right {
content: "paged_example_2";
}
@bottom-center {
content: "Page " counter(page) " of " counter(pages);
font-size: 11px;
font-weight: bold;
border: solid 1px #ccc;
}
};
}
</style>
</head>
<body>
<p class="footer">
<i>Testing</i> Footer with italics <br />
New line
</p>
<div id="main">
<p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p> <p>This is a sample paragraph. You can add more content here to see how it flows onto the next page when printed.</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment