PrintCSS.live - The PrintCSS Playground

HTML

<section class="front"> <div class="top"> <h1>Tobias Köngeter</h1> </div> <div class="bottom"> <p>Überkinger Straße 4<br> 70372 Stuttgart</p> <table> <tr> <td>T:</td> <td>+49 . 711 . 99 52 86-62</td> </tr> <tr> <td>E:</td> <td>info@siegertypen-design.de</td> </tr> </table> </div> </section> <section content="back"> <div class="top"> <h1>SIEGERTYPEN</h1> </div> </section>

CSS

@page { size: 85mm 55mm; margin: 0; bleed: 3mm; marks: crop; } section { position: relative; width: 85mm; height: 55mm; font-family: "FreightText Pro", serif; color: cmyk(0%, 100%, 100%, 0%, overprint); font-size: 9pt; line-height: 1.5; page-break-after: always; } h1, p { margin: 0; } table { border: none; border-collapse: collapse; font-size: inherit; font-style: inherit; line-height: inherit; font-weight: inherit; } td { padding: 0; } .top { position: absolute; top: 6mm; left: 6mm; width: 73mm; height: 16mm; } .bottom { position: absolute; bottom: 6mm; left: 6mm; width: 73mm; height: 30mm; display: flex; justify-content: end; flex-flow: column; } .bottom > * { width: 100%; }

JavaScript

Preview powered by paged.js

PDF rendered with (https://weasyprint.org/)