Last active
June 16, 2021 09:22
-
-
Save nfreear/51eaee1781e5e5c885a474432b2e1325 to your computer and use it in GitHub Desktop.
A print CSS and PDF test HTML page.
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 lang="en"> | |
| <meta charset="UTF-8" /> | |
| <link rel="gist" href="https://gist.github.com/nfreear/51eaee1781e5e5c885a474432b2e1325" /> | |
| <title> Print CSS / PDF test </title> | |
| <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css"> --> | |
| <style> | |
| body { | |
| background-color: pink; | |
| background-image: url(https://live.staticflickr.com/4111/5084917028_9d988929ac_b.jpg); | |
| X-background-repeat: no-repeat; | |
| X-background-position: center top; | |
| background-size: cover; | |
| font: 1.2rem/1.6 sans-serif; | |
| } | |
| body > * { | |
| background: #fefefe; | |
| border: .4rem solid purple; | |
| color: #a00; | |
| margin: 2rem auto; | |
| max-width: 33rem; | |
| padding: 1rem; | |
| } | |
| main h1 { | |
| margin-top: 0; | |
| } | |
| pre { | |
| font-size: small; | |
| } | |
| button, | |
| a.btn { | |
| background: #ddd; | |
| border: 1px solid #aaa; | |
| border-radius: .25rem; | |
| color: #222; | |
| cursor: pointer; | |
| font-size: medium; | |
| padding: .3rem 1rem; | |
| text-decoration: none; | |
| } | |
| .only-print { | |
| display: none; | |
| } | |
| @page { | |
| size: A5; | |
| margin: 1.3cm; | |
| marks: crop cross; | |
| } | |
| @media print { | |
| .only-print { | |
| display: block; | |
| } | |
| .cookie-notice, | |
| .not-print { | |
| display: none; | |
| } | |
| body, | |
| body > * { | |
| background: white; | |
| color: black; | |
| font: 1.1rem/1.5 serif; | |
| margin: 0; | |
| } | |
| body > * { | |
| border: 1px solid #444; | |
| } | |
| h2 { | |
| page-break-before: always; | |
| } | |
| } | |
| </style> | |
| <header class="only-print">🖨️ Print-only header! </header> | |
| <div class="cookie-notice"> I am a cookie notice <button> Close me! </button> </div> | |
| <main> | |
| <p class="not-print"><a href="./export.php" class="btn">Export to PDF</a></p> | |
| <h1> Print CSS / PDF test </h1> | |
| <p> Hello world ! <a href="https://example.org">I'm a link</a>! </p> | |
| <p> Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. | |
| <p> Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. | |
| <p>Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | |
| <p>Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
| <h2> New page? </h2> | |
| <p> The <q>New page?</q> heading and this paragraph should be on a new page ... </p> | |
| </main> | |
| <pre class="not-print"> | |
| NDF, 15-June-2021. | |
| * https://www.flickr.com/photos/brenda-starr/5084917028; | |
| * https://stackoverflow.com/questions/16649943/css-to-set-a4-paper-size; | |
| * https://css-tricks.com/the-at-rules-of-css/ | |
| * https://packagist.org/packages/barryvdh/laravel-dompdf; | |
| * https://github.com/dompdf/dompdf; | |
| * (https://npmjs.com/package/html-pdf) | |
| </pre> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment