Last active
March 25, 2025 20:25
-
-
Save ferminc/3838d39e3bfade4b3d5c93d75d4e5c12 to your computer and use it in GitHub Desktop.
CSS @page support test in Chrome (page counter, header, footer)
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| @page { | |
| size: A5 portrait; | |
| margin-top: 15mm; | |
| margin-bottom: 30mm; | |
| @top-center { | |
| content: "Header"; | |
| font-size: 3mm; | |
| font-style: italic; | |
| } | |
| } | |
| @page :first { | |
| margin-top: 50mm; | |
| counter-set: page -2; | |
| @top-center { | |
| content: ""; | |
| } | |
| @bottom-right { | |
| content: ""; | |
| } | |
| @bottom-left { | |
| content: ""; | |
| } | |
| } | |
| @page :left { | |
| margin-left: 15mm; | |
| margin-right: 10mm; | |
| @bottom-right { | |
| content: counter(page); | |
| font-size: 3mm; | |
| } | |
| } | |
| @page :right { | |
| margin-right: 15mm; | |
| margin-left: 10mm; | |
| @bottom-left { | |
| content: counter(page); | |
| font-size: 3mm; | |
| } | |
| } | |
| @page :blank { | |
| @top-center { | |
| content: "This page intentionally left blank"; | |
| } | |
| @bottom-right { | |
| content: ""; | |
| } | |
| @bottom-left { | |
| content: ""; | |
| } | |
| } | |
| @media print { | |
| * { | |
| padding: 0; | |
| margin: 0; | |
| box-sizing: border-box; | |
| } | |
| .pages { | |
| display: block; | |
| } | |
| .screen { | |
| display: none; | |
| } | |
| body { | |
| padding: 0 0mm; | |
| width: calc(148mm - 25mm); | |
| max-width: calc(148mm - 25mm); | |
| font-size: 5mm; | |
| font-weight: 400; | |
| line-height: 1.5; | |
| } | |
| blockquote { | |
| font-style: italic; | |
| margin-bottom: 10mm; | |
| border-left: 1mm solid #ccc; | |
| display: block; | |
| padding-left: 5mm; | |
| margin-left: 5mm; | |
| } | |
| p, | |
| h1, | |
| h3 { | |
| margin-bottom: 5mm; | |
| } | |
| .break { | |
| break-after: page; | |
| } | |
| } | |
| @media screen { | |
| .screen { | |
| display: block; | |
| } | |
| .content { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="screen"> | |
| <h1>Press <kbd>Ctrl</kbd> + <kbd>P</kbd></h1> | |
| </div> | |
| <div class="content"> | |
| <h1 style="text-align: center;">Obcaecati rerum.</h1> | |
| <h3 class="break" style="text-align: center;">Obcaecati rerum, odit nemo harum perferendis ipsa.</h3> | |
| <div class="break"></div> | |
| <div class="break" style="margin-top: 100mm;"> | |
| <p>(fake) Copyright notice<br>MMXXV<br>Printed in some country<br>ISBN: XXXXXXXXXX<br>First edition</p> | |
| </div> | |
| <div class="repeat"> | |
| <h1>Obcaecati rerum, odit nemo harum perferendis.</h1> | |
| <blockquote>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum officia optio ab facilis laborum | |
| a | |
| explicabo, neque debitis magnam tenetur qui, amet aliquam beatae voluptate, necessitatibus voluptas excepturi | |
| nisi | |
| nostrum.</blockquote> | |
| <p>Nobis laborum tenetur iure ullam expedita, perferendis | |
| quia optio accusantium velit impedit, vel dolore! Quo architecto expedita omnis voluptatibus optio reiciendis | |
| culpa! | |
| </p> | |
| <p>Perspiciatis, mollitia quia perferendis laudantium dolorum | |
| accusamus explicabo reprehenderit quis incidunt voluptatum nulla voluptatem ducimus aut eius ex cum repellendus | |
| voluptate expedita?</p> | |
| <p>Veritatis itaque, alias sed doloremque tempora maiores sequi laborum vitae quasi? Repellat nisi repudiandae | |
| facilis explicabo voluptate libero illo iste earum odit? Voluptate ipsam quos sequi quo nulla optio et tempore | |
| recusandae, officiis doloribus est? Perferendis, obcaecati aliquam? Provident eos voluptate mollitia et itaque! | |
| </p> | |
| <h3>Obcaecati rerum, odit nemo harum perferendis ipsa. | |
| Officia, recusandae autem assumenda architecto voluptatem voluptate alias dicta, nobis eos vero laborum neque | |
| tempore.</h3> | |
| <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos reprehenderit ipsam qui ut officiis perferendis | |
| omnis eaque modi, assumenda autem nisi. Iusto harum, commodi similique id illo dolores eveniet! Iste?</p> | |
| <p>Nobis laborum tenetur iure ullam expedita, perferendis | |
| quia optio accusantium velit impedit, vel dolore! Quo architecto expedita omnis voluptatibus optio reiciendis | |
| culpa! | |
| </p> | |
| <p>Harum, quo numquam vitae voluptatem, consequatur veritatis | |
| necessitatibus porro molestiae similique laudantium dolorum ut sint magnam ad fuga ab tempore eligendi sed.</p> | |
| <p>Perspiciatis, mollitia quia perferendis laudantium dolorum | |
| accusamus explicabo reprehenderit quis incidunt voluptatum nulla voluptatem ducimus aut eius ex cum repellendus | |
| voluptate expedita?</p> | |
| <h3>Obcaecati rerum, odit nemo harum perferendis ipsa. | |
| Officia, recusandae autem assumenda architecto voluptatem voluptate alias dicta, nobis eos vero laborum neque | |
| tempore.</h3> | |
| <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos reprehenderit ipsam qui ut officiis perferendis | |
| omnis eaque modi, assumenda autem nisi. Iusto harum, commodi similique id illo dolores eveniet! Iste?</p> | |
| <blockquote style="page-break-before: always;">Ex quidem facere suscipit rerum inventore et sint | |
| sapiente, pariatur quo vero velit earum maxime esse optio porro molestias officiis cum quae!</blockquote> | |
| <p>Nobis laborum tenetur iure ullam expedita, perferendis | |
| quia optio accusantium velit impedit, vel dolore! Quo architecto expedita omnis voluptatibus optio reiciendis | |
| culpa! | |
| </p> | |
| <p>Perspiciatis, mollitia quia perferendis laudantium dolorum | |
| accusamus explicabo reprehenderit quis incidunt voluptatum nulla voluptatem ducimus aut eius ex cum repellendus | |
| voluptate expedita?</p> | |
| <h3>Obcaecati rerum, odit nemo harum perferendis ipsa. | |
| Officia, recusandae autem assumenda architecto voluptatem voluptate alias dicta, nobis eos vero laborum neque | |
| tempore.</h3> | |
| <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos reprehenderit ipsam qui ut officiis perferendis | |
| omnis eaque modi, assumenda autem nisi. Iusto harum, commodi similique id illo dolores eveniet! Iste?</p> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| window.onload = function () { | |
| var repeatElement = document.getElementsByClassName('repeat')[0]; | |
| for (var i = 0; i < 10; i++) { | |
| var clone = repeatElement.cloneNode(true); | |
| document.getElementsByClassName('content')[0].appendChild(clone); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If someone knows how to make page :blank work or how to make rules for individual pages let me know