Last active
December 6, 2023 03:39
-
-
Save map7/6991f0f70809c81f487c8359321fa32d to your computer and use it in GitHub Desktop.
HTML CSS + Paged polyfill with header and footer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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