Demo

Want to see what typeset.sh can do. Here some test cases. Feel free to use any sample code if you want, they can be a good starting point for your template.

Invoice

Rendering invoice as PDF can be an hassle, but not with typeset.sh.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>invoice.html</title> <style> @page { size: A4; margin: 30mm 10mm 80mm 25mm; @top-center { content: 'Page ' counter(page) ' of ' counter(pages); vertical-align: top; padding-top: 10mm; } @area header { content: element(header); top: 10mm; right: 10mm; left: 20mm; } @area footer { content: element(footer); padding: 5mm 10mm; bottom: 0mm; height: 50mm; right: 0mm; left: 0mm; background: #F0F0F0; border-top: 1mm solid red; } @area perforate-mark { left: 0mm; top: 148.5mm; width: 3mm; border-bottom: 0.2mm solid #ccc; } @area fold-mark-left-top { left: 0mm; top: 90mm; width: 6mm; border-bottom: 0.2mm dashed #ccc; } @area fold-mark-left-bottom { left: 0mm; top: 195mm; width: 6mm; border-bottom: 0.2mm dashed #ccc; } @area fold-mark-right-top { right: 0mm; top: 90mm; width: 6mm; border-bottom: 0.2mm dashed #ccc; } @area fold-mark-right-bottom { right: 0mm; top: 195mm; width: 6mm; border-bottom: 0.2mm dashed #ccc; } } html { font-size: 9pt; } h1 { font-size: 14pt; clear: both; margin: 0; } .comment { border-left: 1mm solid red; background: #F0F0F0; font-size: 0.9em; padding: 1mm 2mm; margin: 2mm 0; } .info { float: right; } h3 { text-align: right; margin: 1em 0 0.5em 0; clear: both; } table.information { clear: right; border: none 0; border-collapse: separate; border-spacing: 0; } table.information td, table.information th { border: none 0; padding: 0; } table.information th { font-weight: bold; padding-right: 5mm; text-align: left; } table.information td { text-align: right; } table.information th::after { content: ':'; } header#logo { position: running(header); text-align: right; } header#logo img { width: 50mm; } footer#details { position: running(footer); font-size: 9pt; line-height: 140%; color: #666; } footer#details .col1 { float:left; width: 25%; margin-top: 5mm; } footer#details .col2 { float:left; width: 35%; margin-top: 5mm; } footer#details .col3 { float:right; width: 30%; margin-top: 5mm; } header#letter { min-height: 60mm; } header#letter .left { /* Absolute position to fit the letter window */ position: absolute; box-sizing: border-box; left: 0; top: 5mm; height: 40mm; width: 90mm; font-size: 10pt; padding: 0; } address.sender { font-size: 0.75em; color: #999; margin-bottom: 1em; } header#letter .right { float: right; width: 40%; } .order-details { display: flow-root; } section.payment { float:left; width: 40%; margin-top: 5mm; } section.shipping { float:right; width: 40%; margin-top: 5mm; } table.items { clear: both; width: 100%; border: none; font-size: 9pt; margin: 5mm 0; } table.items th { border: none 0; border-bottom: 0.5mm solid black; font-weight: bold; text-align: left; padding-bottom: 2mm; } table.items td { border: none 0; padding: 2mm 0; } table.items tr:nth-child(even) td { background: #f3f3f3; } table.items .qty { text-align: center; } table.items .price { text-align: right; white-space: nowrap; } table.totals { margin-top: 5mm; float: right; border: none; border-collapse: separate; padding: 0; border-spacing: 0; } table.totals td, table.totals th { border: none; border-width: 0; padding: 1mm 0; line-height: 100%; } table.totals th { font-weight: bold; padding: 1mm 5mm; text-align: left; } table.totals .grand td, table.totals .grand th { border-bottom: 1mm double black; font-size: 1.1em; padding-top: 2mm; } table.totals td { text-align: right; } </style> </head> <body> <header id="logo"> <img class="logo" src="https://typeset.sh/images/typeset.sh-logo.svg" style="float:right" /> </header> <header id="letter"> <div class="left"> <address class="sender">typeset.sh • Hansaallee 78 • 60323 Frankfurt am Main • Germany</address> <address class="recipient"> <strong>Sample Business</strong><br /> John Doe<br /> 3 Edgar Buildings<br /> George Street<br /> England </address> </div> <div class="right"> <div class="info"> <h3>Invoice</h3> <table class="information"> <tbody> <tr> <th>Customer #</th> <td>55-4884844</td> </tr> <tr> <th>Date</th> <td>January 26 2019</td> </tr> <tr> <th>Due date</th> <td>February 27 2019</td> </tr> <tr> <th>USt.-IdNr.</th> <td>DE 317 949 066</td> </tr> </tbody> </table> </div> <div class="info"> <h3>Buisiness Serviceline</h3> <table class="information"> <tbody> <tr> <th>Tel.:</th> <td>+49 30 3432622-113</td> </tr> <tr> <th>Fax.:</th> <td>+49 30 3432622-114</td> </tr> <tr> <th>E-Mail:</th> <td>contact@typeset.sh</td> </tr> </tbody> </table> </div> </div> </header> <footer id="details"> <img src="https://typeset.sh/images/typeset.sh-logo.svg" style="height: 1.5em; display: block;" /> <div class="col1"> Hansaallee 78<br /> 60323 Frankfurt am Main<br /> Germany </div> <div class="col2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a justo ultrices odio aliquam aliquet. Donec vel pulvinar lorem. Mauris auctor vitae lorem sit amet blandit. Suspendisse tempor convallis justo ac vehicula. </div> <div class="col3"> Payment and Banking details<br /> Sparkasse Frankfurt am Main<br /> DE27 1007 7777 0209 2997 00<br /> Commerzbank Frankfurt am Main<br /> DE11 5205 1373 5120 7101 31 </div> </footer> <h1>Invoice #100575695</h1> <p>Date: January 26 2019</p> <p class="comment">Order comment: Please make sure all items are wrapped separately as agreed on the phone.</p> <div class="order-details"> <section class="payment"> <strong>Payment method</strong><br /> Paypal </section> <section class="shipping"> <strong>Shipping method</strong><br /> DHL - Express </section> </div> <div class="order-details"> <table class="items"> <thead> <tr> <th class="sku">SKU</th> <th>Name</th> <th class="qty">Quantity</th> <th class="price">Price</th> <th class="price">Tax</th> <th class="price">Total</th> </tr> </thead> <tbody> <tr> <td class="sku">45-572-547</td> <td>Black chair with red arm rest</td> <td class="qty">2</td> <td class="price">120,00 &euro;</td> <td class="price">19,16 &euro;</td> <td class="price">240,00 &euro;</td> </tr> <tr> <td class="sku">45-572-547</td> <td>Black chair with red arm rest</td> <td class="qty">1</td> <td class="price">85,90 &euro;</td> <td class="price">15,59 &euro;</td> <td class="price">85,90 &euro;</td> </tr> <tr> <td class="sku">45-572-547</td> <td>Black chair with red arm rest</td> <td class="qty">8</td> <td class="price">85,90 &euro;</td> <td class="price">15,59 &euro;</td> <td class="price">85,90 &euro;</td> </tr> <tr> <td class="sku">45-572-547</td> <td>Black chair with red arm rest</td> <td class="qty">7</td> <td class="price">85,90 &euro;</td> <td class="price">15,59 &euro;</td> <td class="price">85,90 &euro;</td> </tr> <tr> <td class="sku">45-572-547</td> <td>Black chair with red arm rest</td> <td class="qty">12</td> <td class="price">85,90 &euro;</td> <td class="price">15,59 &euro;</td> <td class="price">85,90 &euro;</td> </tr> <tr> <td class="sku">45-572-547</td> <td>Black chair with red arm rest</td> <td class="qty">2.5 sqrm</td> <td class="price">85,90 &euro;</td> <td class="price">15,59 &euro;</td> <td class="price">85,90 &euro;</td> </tr> <tr> <td class="sku">45-572-547</td> <td>Black chair with red arm rest<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td> <td class="qty">3</td> <td class="price">85,90 &euro;</td> <td class="price">15,59 &euro;</td> <td class="price">85,90 &euro;</td> </tr> <tr> <td class="sku">45-572-547</td> <td>Black chair with red arm rest</td> <td class="qty">1</td> <td class="price">85,90 &euro;</td> <td class="price">15,59 &euro;</td> <td class="price">85,90 &euro;</td> </tr> <tr> <td class="sku">45-572-547</td> <td>Black chair with red arm rest</td> <td class="qty">1</td> <td class="price">85,90 &euro;</td> <td class="price">15,59 &euro;</td> <td class="price">85,90 &euro;</td> </tr> <tr> <td class="sku">45-572-547</td> <td>Black chair with red arm rest</td> <td class="qty">1</td> <td class="price">85,90 &euro;</td> <td class="price">15,59 &euro;</td> <td class="price">85,90 &euro;</td> </tr> <tr> <td class="sku">45-572-547</td> <td>Black chair with red arm rest</td> <td class="qty">5 kg</td> <td class="price">85,90 &euro;</td> <td class="price">15,59 &euro;</td> <td class="price">85,90 &euro;</td> </tr> <tr> <td class="sku">45-572-547</td> <td>Black chair with red arm rest</td> <td class="qty">1</td> <td class="price">85,90 &euro;</td> <td class="price">15,59 &euro;</td> <td class="price">85,90 &euro;</td> </tr> <tr> <td class="sku">45-572-547</td> <td>Black chair with red arm rest</td> <td class="qty">1</td> <td class="price">85,90 &euro;</td> <td class="price">15,59 &euro;</td> <td class="price">85,90 &euro;</td> </tr> <tr> <td class="sku">45-572-547</td> <td>Black chair with red arm rest</td> <td class="qty">1</td> <td class="price">85,90 &euro;</td> <td class="price">15,59 &euro;</td> <td class="price">85,90 &euro;</td> </tr> </tbody> </table> <table class="totals"> <tr> <th>Subtotal</th> <td>290,90 &euro;</td> </tr> <tr> <th>Tax</th> <td>34,23 &euro;</td> </tr> <tr> <th>Discount</th> <td>10,00 &euro;</td> </tr> <tr class="grand"> <th>Grand total</th> <td>340,00 &euro;</td> </tr> </table> </div> <div style="clear: both; margin-top: 10mm; text-align: justify; text-align-last: left"> <p>Dear Jon Doe, thank you for you order, if you have any questions, please don't hesitate to ask.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a justo ultrices odio aliquam aliquet. Donec vel pulvinar lorem. Mauris auctor vitae lorem sit amet blandit. Suspendisse tempor convallis justo ac vehicula. Integer ligula quam, facilisis id risus finibus, sodales commodo diam. Nulla ante mi, porta vel odio et, condimentum accumsan arcu. Suspendisse mattis diam vitae lacus facilisis, nec commodo lectus scelerisque. Quisque vel accumsan elit. Nam sit amet magna sit amet lectus pretium mollis in ut lacus. </p> </div> </body> </html>

Article

This sample uses multi-column layout.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>John's Corner Cafe Menu</title> <style> @page { size: A4; margin: 10mm; } h1 { font-size: 20pt; text-align: left; break-after: avoid; } h2 { font-size: 10pt; font-weight: bold; break-after: avoid; } p { font-size: 8pt; text-align: justify; } p.abstract { font-weight: bold; } .image { position: relative; padding: 2mm; border: 0.2mm solid black; } .image img { width: 100%; } .image .author { display: block; position: absolute; top: 2%; right: 0; background: rgba(0, 0, 0, .7); color: white; font-size: 6pt; padding: 2mm; } table.data { margin: 1mm; text-align: right; background: #f0f0f0; break-inside: avoid; border: 1px black solid; } table.data td { font-size: 7pt; border: 1px black solid; padding: 1mm; } table.data th { text-align: left; font-size: 7pt; font-weight: bold; border: 1px black solid; padding: 1mm; } </style> </head> <body> <section > <h1>Sumo indoctum liberavisse ad mea</h1> <div class="image"> <img src="https://typeset.sh/images/demo/scenic-photo-of-rocky-mountains-during-daytime-2840747.jpg" /> <span class="author">Photo by Francesco Ungaro from Pexels</span> </div> <div style="column-count: 3"> <h2>Vel ut detraxit pericula tractatos</h2> <p>Lorem ipsum dolor sit amet, vis ludus audire ei. Quis justo quidam eam id, prima decore philosophia has cu, meis rebum feugait ex est. Eos ea dicunt repudiandae. Ponderum nominati perpetua no vim. Eam cu graeci alterum, veri doctus ancillae sit ad.</p> <p>Tale verear mea ad, te appetere repudiandae vix, ex putant impedit maluisset mei. Est ut porro dicta habemus. No quem moderatius cum, molestie detraxit sea cu, cu sit legimus abhorreant honestatis. Erat regione ne pri, liber repudiare his at. Duo timeam perpetua ad, cum delectus delicatissimi in. Ei nec enim dicta.</p> <h2>Nam ei solum tollit scriptorem</h2> <p>Alienum neglegentur quo ut, vis id exerci inermis, cu aperiri noluisse sed. Et usu decore nostro, ea tritani eleifend accommodare qui. Delenit facilis explicari nec at. Ei sea corpora theophrastus, vix melius blandit an, ne pro partem perfecto inciderint. Munere aperiri tacimates sed et, oratio mucius prompta mei cu.</p> <p>Te nibh ferri bonorum qui, cu illum ullum omnium usu. Magna fastidii mei an, duo volumus accusam voluptaria te, nam ut tollit nostrud suavitate. Ea habemus posidonium repudiandae mel, lorem vivendum pri ea. Quem odio sea at, ex vidisse alterum inimicus sit. Nostrud labores mel ex, in altera semper offendit duo, porro mentitum omittantur eos cu.</p> <div class="image"> <img src="https://typeset.sh/images/demo/yellow-and-white-sail-boat-on-sea-3703074.jpg" /> <span class="author">Photo by Dimitry Anikin from Pexels</span> </div> <p>Eum vero vidisse eu. Qui ut duis alienum, his viris delicata no. Habeo ornatus qualisque te nam, duo nominati persequeris id, sed regione instructior ex. Nec ex quodsi appellantur. Ius persius omittantur ea. Vis tibique iudicabit cu, id mei labore accommodare. Ut eam commodo oblique adolescens.</p> <h2>Nec ex quodsi appellantur</h2> <p>Lorem ipsum dolor sit amet, vis ludus audire ei. Quis justo quidam eam id, prima decore philosophia has cu, meis rebum feugait ex est. Eos ea dicunt repudiandae. Ponderum nominati perpetua no vim. Eam cu graeci alterum, veri doctus ancillae sit ad.</p> <p>Tale verear mea ad, te appetere repudiandae vix, ex putant impedit maluisset mei. Est ut porro dicta habemus. No quem moderatius cum, molestie detraxit sea cu, cu sit legimus abhorreant honestatis. Erat regione ne pri, liber repudiare his at. Duo timeam perpetua ad, cum delectus delicatissimi in. Ei nec enim dicta.</p> </div> </section> <section > <h1>Habeo ornatus qualisque te nam</h1> <div style="column-count: 3"> <h2>Vel ut detraxit pericula tractatos</h2> <p>Lorem ipsum dolor sit amet, vis ludus audire ei. Quis justo quidam eam id, prima decore philosophia has cu, meis rebum feugait ex est. Eos ea dicunt repudiandae. Ponderum nominati perpetua no vim. Eam cu graeci alterum, veri doctus ancillae sit ad.</p> <p>Tale verear mea ad, te appetere repudiandae vix, ex putant impedit maluisset mei. Est ut porro dicta habemus. No quem moderatius cum, molestie detraxit sea cu, cu sit legimus abhorreant honestatis. Erat regione ne pri, liber repudiare his at. Duo timeam perpetua ad, cum delectus delicatissimi in. Ei nec enim dicta.</p> <h2>Nam ei solum tollit scriptorem</h2> <p>Alienum neglegentur quo ut, vis id exerci inermis, cu aperiri noluisse sed. Et usu decore nostro, ea tritani eleifend accommodare qui. Delenit facilis explicari nec at. Ei sea corpora theophrastus, vix melius blandit an, ne pro partem perfecto inciderint. Munere aperiri tacimates sed et, oratio mucius prompta mei cu.</p> <table class="data"> <tr> <th>fastidii</th> <th>accusam</th> <th>voluptaria</th> </tr> <tr> <td>+ 324.42</td> <td>+ 214.14</td> <td>+ 21.08</td> </tr> <tr> <td>+ 212.42</td> <td>- 51.76</td> <td>+ 125.44</td> </tr> </table> <p>Te nibh ferri bonorum qui, cu illum ullum omnium usu. Magna fastidii mei an, duo volumus accusam voluptaria te, nam ut tollit nostrud suavitate. Ea habemus posidonium repudiandae mel, lorem vivendum pri ea. Quem odio sea at, ex vidisse alterum inimicus sit. Nostrud labores mel ex, in altera semper offendit duo, porro mentitum omittantur eos cu.</p> <p>Eum vero vidisse eu. Qui ut duis alienum, his viris delicata no. Habeo ornatus qualisque te nam, duo nominati persequeris id, sed regione instructior ex. Nec ex quodsi appellantur. Ius persius omittantur ea. Vis tibique iudicabit cu, id mei labore accommodare. Ut eam commodo oblique adolescens.</p> <h2>Nec ex quodsi appellantur</h2> <p>Lorem ipsum dolor sit amet, vis ludus audire ei. Quis justo quidam eam id, prima decore philosophia has cu, meis rebum feugait ex est. Eos ea dicunt repudiandae. Ponderum nominati perpetua no vim. Eam cu graeci alterum, veri doctus ancillae sit ad.</p> <p>Tale verear mea ad, te appetere repudiandae vix, ex putant impedit maluisset mei. Est ut porro dicta habemus. No quem moderatius cum, molestie detraxit sea cu, cu sit legimus abhorreant honestatis. Erat regione ne pri, liber repudiare his at. Duo timeam perpetua ad, cum delectus delicatissimi in. Ei nec enim dicta.</p> <p>Erat regione ne pri, liber repudiare his at. Duo timeam perpetua ad, cum delectus delicatissimi in. Ei nec enim dicta.</p> <div class="image"> <img src="https://typeset.sh/images/demo/teacup-with-sliced-lemon-1772124.jpg" /> <span class="author">Photo by Olenka Sergienko from Pexels</span> </div> </div> </section> <section> <h1>Ponderum nominati perpetua no vim</h1> <p class="abstract">Lorem ipsum dolor sit amet, vis ludus audire ei. Quis justo quidam eam id, prima decore philosophia has cu, meis rebum feugait ex est. Eos ea dicunt repudiandae. Ponderum nominati perpetua no vim. Eam cu graeci alterum, veri doctus ancillae sit ad. Tale verear mea ad, te appetere repudiandae vix, ex putant impedit maluisset mei. Est ut porro dicta habemus. No quem moderatius cum, molestie detraxit sea cu, cu sit legimus abhorreant honestatis. Erat regione ne pri, liber repudiare his at. Duo timeam perpetua ad, cum delectus delicatissimi in. Ei nec enim dicta.</p> <div style="column-count: 2"> <h2>Vel ut detraxit pericula tractatos</h2> <p>Lorem ipsum dolor sit amet, vis ludus audire ei. Quis justo quidam eam id, prima decore philosophia has cu, meis rebum feugait ex est. Eos ea dicunt repudiandae. Ponderum nominati perpetua no vim. Eam cu graeci alterum, veri doctus ancillae sit ad.</p> <h2>Nam ei solum tollit scriptorem</h2> <p>Alienum neglegentur quo ut, vis id exerci inermis, cu aperiri noluisse sed. Et usu decore nostro, ea tritani eleifend accommodare qui. Delenit facilis explicari nec at. Ei sea corpora theophrastus, vix melius blandit an, ne pro partem perfecto inciderint. Munere aperiri tacimates sed et, oratio mucius prompta mei cu.</p> <p>Tale verear mea ad, te appetere repudiandae vix, ex putant impedit maluisset mei. Est ut porro dicta habemus. No quem moderatius cum, molestie detraxit sea cu, cu sit legimus abhorreant honestatis. Erat regione ne pri, liber repudiare his at. Duo timeam perpetua ad, cum delectus delicatissimi in. Ei nec enim dicta.</p> <table class="data" style="width: 100%; margin: 2mm 0"> <thead> <tr> <th>Fastidii</th> <th>Accusam</th> <th>Voluptaria</th> <th>Repudiandae</th> </tr> </thead> <tbody> <tr> <td>+ 324.42</td> <td>+ 214.14</td> <td>+ 21.08</td> <td>+ 234.73</td> </tr> <tr> <td>+ 212.42</td> <td>- 51.76</td> <td>+ 342.86</td> <td>+ 125.44</td> </tr> <tr> <td>+ 81.42</td> <td>- 578.12</td> <td>+ 534.99</td> <td>+ 249.54</td> </tr> <tr> <td>+ 453.67</td> <td>- 34.54</td> <td>+ 348.59</td> <td>+ 764.57</td> </tr> <tr> <td>+ 314.21</td> <td>- 56.88</td> <td>+ 124.46</td> <td>+ 48.23</td> </tr> <tr> <td>+ 997.81</td> <td>- 245.73</td> <td>+ 124.56</td> <td>+ 25.78</td> </tr> </tbody> </table> <p>Eum vero vidisse eu. Qui ut duis alienum, his viris delicata no. Habeo ornatus qualisque te nam, duo nominati persequeris id, sed regione instructior ex. Nec ex quodsi appellantur. Ius persius omittantur ea. Vis tibique iudicabit cu, id mei labore accommodare. Ut eam commodo oblique adolescens.</p> <h2>Nec ex quodsi appellantur</h2> <div class="image" style="width: 40%; float: left; margin: 2mm 2mm 2mm 0;"> <img src="https://typeset.sh/images/demo/building-with-lights-1929611.jpg" /> <span class="author">Photo by VisionPic .net from Pexels</span> </div> <p>Lorem ipsum dolor sit amet, vis ludus audire ei. Quis justo quidam eam id, prima decore philosophia has cu, meis rebum feugait ex est. Eos ea dicunt repudiandae. Ponderum nominati perpetua no vim. Eam cu graeci alterum, veri doctus ancillae sit ad.</p> <p>Erat regione ne pri, liber repudiare his at. Duo timeam perpetua ad, cum delectus delicatissimi in. Ei nec enim dicta.</p> </div> </section> </body> </html>

Tables

Supporting complex table layout using row-span, column-span etc

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>typeset.sh - tables</title> <style> @page { size: A4; margin: 10mm; } table { border:2mm solid red; } table.separated { border-collapse: separate; border-spacing: 1mm 1mm; padding: 2mm; } table.collapsed { border-collapse: collapse; } table th { padding: 2mm; border: 1mm solid black; } table td { padding: 2mm; border: 1mm solid black; } tr.top td { vertical-align: top; } tr.middle td { vertical-align: middle; } tr.bottom td { vertical-align: bottom; } tr.baseline td { vertical-align: baseline; } </style> </head> <body> <h1>Table layout using typeset.sh</h1> <h3>Border spacing: separated</h3> <table class="separated"> <thead> <tr> <td>First name</td> <td>Last name</td> <td>Age</td> </tr> </thead> <tbody> <tr> <td>Jacob</td> <td>Siefer</td> <td>30</td> </tr> <tr> <td>John</td> <td>Smith</td> <td>35</td> </tr> <tr> <td>Marry</td> <td>Faith</td> <td>39</td> </tr> </tbody> </table> <h3>Border spacing: collapsed</h3> <table class="collapsed"> <thead> <tr> <td>First name</td> <td>Last name</td> <td>Age</td> </tr> </thead> <tbody> <tr> <td>Jacob</td> <td>Siefer</td> <td>30</td> </tr> <tr> <td>John</td> <td>Smith</td> <td>35</td> </tr> <tr> <td>Marry</td> <td>Faith</td> <td>39</td> </tr> </tbody> </table> <h3>Row and column spans</h3> <table class="collapsed"> <tr> <th colspan="10">Full page span 10 table head</th> </tr> <tr> <th colspan="1">Firstname</th> <td colspan="4">John</td> <th colspan="1">Lastname</th> <td colspan="4">John</td> </tr> <tr> <th colspan="1">Organisation</th> <td colspan="9">Example Inc.</td> </tr> <tr> <th colspan="10">Contact Information</th> </tr> <tr> <th colspan="1" rowspan="2">Phone</th> <th colspan="1">Private</th> <td colspan="3">12345 12345</td> <th colspan="1" rowspan="2">Email</th> <th colspan="1">Private</th> <td colspan="3">john@example.com</td> </tr> <tr> <th colspan="1">Work</th> <td colspan="3">54321 54321</td> <th colspan="1">Work</th> <td colspan="3">john@example.com</td> </tr> <tr> <th colspan="10">Address</th> </tr> <tr> <th colspan="1">Name</th> <td colspan="9">John Snow @ Example Inc.</td> </tr> <tr> <th colspan="1" rowspan="2">Street</th> <td colspan="9">Street Address Line 1</td> </tr> <tr> <td colspan="9">Street Address Line 2</td> </tr> <tr> <th colspan="1">Postcode</th> <td colspan="2">54321</td> <th colspan="1">City</th> <td colspan="3">Red Bluff</td> <th colspan="1">State</th> <td colspan="2">CA</td> </tr> <tr> <th colspan="10">Order</th> </tr> <tr> <th colspan="2">SKU</th> <th colspan="5">Name</th> <th colspan="1">Quantity</th> <th colspan="1" style="text-align: right;">Unit Price</th> <th colspan="1" style="text-align: right;">Row Total</th> </tr> <tr> <td colspan="2">6544534</td> <td colspan="5">Foo Bar TV Professional Edition</td> <td colspan="1">2</td> <td colspan="1" style="text-align: right;">$850.00</td> <td colspan="1" style="text-align: right;">$1,900.00</td> </tr> <tr> <td colspan="2">343456</td> <td colspan="5">Office Desk, Green three legs</td> <td colspan="1">1</td> <td colspan="1" style="text-align: right;">$547.00</td> <td colspan="1" style="text-align: right;">$547.00</td> </tr> <tr> <th colspan="9">Sub-Total</th> <td colspan="1" style="text-align: right;">$2,447.00</td> </tr> <tr> <th colspan="9">Tax</th> <td colspan="1" style="text-align: right;">$427.00</td> </tr> <tr> <th colspan="9">Shipping</th> <td colspan="1" style="text-align: right;">$47.00</td> </tr> <tr> <th colspan="9">Grand Total</th> <td colspan="1" style="text-align: right;">$2,921.00</td> </tr> </table> <h3>Vertical alignments</h3> <table> <tbody> <tr class="baseline"> <td style="font-size:5mm"> The following table row consist of </td> <td style="font-size:10mm"> multiple cells with different </td> <td style="font-size:5mm"> <div style="border: 10mm solid purple; background: lightsalmon;">baselines defined.</div> </td> </tr> <tr class="top"> <td style="font-size:5mm"> The following table row consist of... </td> <td style="font-size:10mm"> ...multiple cells that... </td> <td style="font-size:5mm"> <div style="padding: 5mm; background: lightsalmon;">... are all top aligned</div> </td> </tr> <tr class="middle"> <td style="font-size:5mm"> The following table row consist of... </td> <td style="font-size:10mm"> ...multiple cells that... </td> <td style="font-size:5mm"> <div style="padding: 5mm; background: lightsalmon;">... are all middle aligned</div> </td> </tr> <tr class="bottom"> <td style="font-size:5mm"> The following table row consist of... </td> <td style="font-size:10mm"> ...multiple cells that... </td> <td style="font-size:5mm"> <div style="padding: 5mm; background: lightsalmon;">... are all bottom aligned</div> </td> </tr> </tbody> </table> </body> </html>

Flex Layout

Sample of css flex layout in action

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flex box sample - typeset.sh</title> <style> @page { size: a4; margin: 5pt; } html { font-size: 8pt; line-height: 10pt; } .catalog { display: flex; background: white; justify-content: space-between; align-items: stretch; flex-flow: row wrap; padding: 10mm; } .catalog > .item { display: flex; flex: 0 0 50mm; background: #dedbd6; border-radius: 1mm; align-items: stretch; flex-flow: column nowrap; margin-bottom: 10pt; padding: 4mm; border-bottom: 0.5mm solid red; } .catalog > .item > a { display: block; background: red; color: white; width: 20mm; padding: 2mm; border-radius: 0.5mm; margin-top: auto; align-self: center; text-align: center; } .catalog > .item > h3 { margin: 0; } .catalog > .item > p { margin-bottom: 2em; } </style> </head> <body> <div class="catalog"> <div class="item"> <h3>Item 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a>Buy now</a> </div> <div class="item"> <h3>Item 3</h3> <p>Quisque rutrum risus ac massa gravida, quis consectetur sem tempus.</p> <a>Buy now</a> </div> <div class="item"> <h3>Item 4</h3> <p>Praesent vehicula nec quam et dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a>Buy now</a> </div> <div class="item"> <h3>Item 5</h3> <p>Phasellus at augue pretium, hendrerit erat dictum, consectetur lorem. Quisque rutrum risus ac massa gravida, quis consectetur sem tempus.</p> <a>Buy now</a> </div> <div class="item"> <h3>Item 6</h3> <p>Integer a elit lorem.</p> <a>Buy now</a> </div> <div class="item"> <h3>Item 7</h3> <p>Quisque rutrum risus ac massa gravida, quis consectetur sem tempus.</p> <a>Buy now</a> </div> </div> </body> </html>

Grid Layout

Sample of css grid layout in action

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Grid samples</title> <style> @page { size: 420pt 620pt; margin: 10pt; } .grid-1 { display: grid; width: 400pt; background: lightgrey; grid-template-columns: repeat(5, min-content); grid-auto-flow: row; row-gap: 10pt; column-gap: 10pt; justify-content: space-evenly; } .grid-2 { display: grid; width: 400pt; background: lightgrey; grid-template-columns: 50pt 1fr 2fr 50pt; grid-auto-flow: row; row-gap: 5pt; column-gap: 5pt; } .grid-3 { display: grid; width: 400pt; background: lightgrey; grid-template: [header-top] "a a a" [header-bottom] [main-top] "b b b" 1fr [main-bottom] / 25% 1fr auto; grid-auto-flow: row; row-gap: 5pt; column-gap: 5pt; } .item { background: tomato; } </style> </head> <body> <h1>Grid layout examples</h1> <h2>Spanning and content size</h2> <p>Auto flow row with spanning rows and columns.</p> <div class="grid-1"> <div class="item" style="grid-column-end: span 1;">000000 000000</div> <div class="item" style="grid-column-end: span 3;">1111111111111111111</div> <div class="item" style="grid-column-end: span 1;">22222 222</div> <div class="item" style="grid-column-end: span 3;">333 33333333</div> <div class="item" style="grid-column-end: span 2; grid-row-end: 2 span">44</div> <div class="item" style="grid-column-end: span 2;">5555555555</div> <div class="item" style="grid-column-end: span 1;">66</div> </div> <h2>Using fr (free space) unit</h2> <div class="grid-2"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> <div class="item">D</div> <div class="item">E</div> <div class="item">F</div> <div class="item">G</div> <div class="item">H</div> </div> <h2>Using grid-template and areas</h2> <p>Supporting grid configuration using grid template shorthand property.</p> <div class="grid-3"> <div class="item" style="grid-area: a">Header A</div> <div class="item">B</div> <div class="item">C</div> <div class="item">D</div> <div class="item">E</div> <div class="item">F</div> <div class="item">G</div> <div class="item">H</div> <div class="item">I</div> <div class="item">J</div> <div class="item" style="grid-area: b">Header B</div> </div> </body> </html>

Background

Sadly some advanced gradient are not yet supported by all pdf viewers, especially the browser once.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Background examples</title> <style> @page { size: A4; margin: 10mm; @bottom-right { content: "Typeset.sh Background Examples, Page " counter(page); color: #888; } } .img1 { background-image: url("https://typeset.sh/images/demo/bg.png"); } .img2 { background-image: url("https://typeset.sh/images/demo/christopher-ivanov-oKJ-J4PSPr4-unsplash.jpg"); background-repeat: no-repeat } .multiple { width: 300px; height: 300px; border-radius: 20px; background: linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)), url("https://typeset.sh/images/demo/bg.png") no-repeat center left, url("https://typeset.sh/images/demo/bg.png") no-repeat center right, url("https://typeset.sh/images/demo/christopher-ivanov-oKJ-J4PSPr4-unsplash.jpg") no-repeat center/contain, linear-gradient(to top, lightcoral, lightgreen, lightcyan); } section { display: flow-root; clear: both; margin-bottom: 20px; break-inside: avoid; } section > div { box-sizing: border-box; width: 200px; height: 150px; float: left; margin: 5px; background: #eee; border-radius: 10px; color: rgba(0, 0, 0, .4); font-weight: bold; font-size: 30px; padding: 10px; } .values { clear: both; font-size: 0.8em; } </style> </head> <body> <h1>Typeset.sh background rendering examples.</h1> <section> <h2>Background repeat</h2> <p>Examples using background repeat and positioning.</p> <div class="img1" style="background-repeat: repeat">1</div> <div class="img1" style="background-repeat: no-repeat">2</div> <div class="img1" style="background-repeat: no-repeat; background-position: bottom left;">3</div> <div class="img1" style="background-repeat: repeat-x">4</div> <div class="img1" style="background-repeat: repeat-y">5</div> <div class="img1" style="background-repeat: repeat-x; background-position: bottom 20px;">6</div> </section> <section> <h2>Background size</h2> <p>Examples using background size and positioning. Using keyword contain, cover or custom size.</p> <div class="img2" style="background-size: contain">1</div> <div class="img2" style="background-size: cover">2</div> <div class="img2" style="background-size: cover; background-position: top">3</div> <div class="img2" style="background-size: 50px 50px">4</div> <ol class="values"> <li>background-size: contain</li> <li>background-size: cover</li> <li>background-size: cover; background-position: top</li> <li>background-size: 50px 50px</li> </ol> </section> <section> <h2>Background layers</h2> <p>You can also define multiple layers for single element.</p> <div class="multiple"></div> </section> <section> <h2>Background using linear-gradient</h2> <p>Examples using using linear-gradient and repeating-linear-gradient. Also works with transparency</p> <div style="background: linear-gradient(to right, salmon, lavender)">1</div> <div style="background: linear-gradient(to right, salmon, lavender, deepskyblue, palegreen)">2</div> <div style="background: linear-gradient(to bottom, salmon 40%, lavender 60%)">3</div> <div style="background: repeating-linear-gradient(to bottom right, salmon 25px, lavender 50px)">4</div> <div style="background: repeating-linear-gradient(45deg, salmon 25px, lavender 50px)">5</div> <div style="background: repeating-linear-gradient(to bottom, red 0, red 10px, transparent 10px, transparent 40px), repeating-linear-gradient(to right, red 0, red 10px, transparent 10px, transparent 40px)">6</div> </section> <section> <h2>Background using radial-gradient</h2> <p>Examples using using radial-gradient and repeating-radial-gradient. Also works with transparency</p> <div style="background: radial-gradient(circle, salmon, lavender)">1</div> <div style="background: radial-gradient(circle, salmon, lavender, deepskyblue, palegreen)">2</div> <div style="background: radial-gradient(ellipse, salmon 40%, lavender 60%)">3</div> <div style="background: radial-gradient(circle closest-side at 50px 50px, salmon, lavender)">4</div> <div style="background: repeating-radial-gradient(circle, salmon 25px, lavender 50px)">5</div> <div style="background: repeating-radial-gradient(salmon 25px, lavender 50px)">6</div> <ol class="values"> <li>radial-gradient(circle, salmon, lavender)</li> <li>radial-gradient(circle, salmon, lavender, deepskyblue, palegreen)</li> <li>radial-gradient(ellipse, salmon 40%, lavender 60%)</li> <li>radial-gradient(circle closest-side at 50px 50px, salmon, lavender)</li> <li>repeating-radial-gradient(circle, salmon 25px, lavender 50px)</li> <li>repeating-radial-gradient(salmon 25px, lavender 50px)</li> </ol> </section> </body> </html>