Demo
Want to see what typeset.sh can do? Here are some test cases. Feel free to use any sample code 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 €</td>
<td class="price">19,16 €</td>
<td class="price">240,00 €</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 €</td>
<td class="price">15,59 €</td>
<td class="price">85,90 €</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 €</td>
<td class="price">15,59 €</td>
<td class="price">85,90 €</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 €</td>
<td class="price">15,59 €</td>
<td class="price">85,90 €</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 €</td>
<td class="price">15,59 €</td>
<td class="price">85,90 €</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 €</td>
<td class="price">15,59 €</td>
<td class="price">85,90 €</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 €</td>
<td class="price">15,59 €</td>
<td class="price">85,90 €</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 €</td>
<td class="price">15,59 €</td>
<td class="price">85,90 €</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 €</td>
<td class="price">15,59 €</td>
<td class="price">85,90 €</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 €</td>
<td class="price">15,59 €</td>
<td class="price">85,90 €</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 €</td>
<td class="price">15,59 €</td>
<td class="price">85,90 €</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 €</td>
<td class="price">15,59 €</td>
<td class="price">85,90 €</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 €</td>
<td class="price">15,59 €</td>
<td class="price">85,90 €</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 €</td>
<td class="price">15,59 €</td>
<td class="price">85,90 €</td>
</tr>
</tbody>
</table>
<table class="totals">
<tr>
<th>Subtotal</th>
<td>290,90 €</td>
</tr>
<tr>
<th>Tax</th>
<td>34,23 €</td>
</tr>
<tr>
<th>Discount</th>
<td>10,00 €</td>
</tr>
<tr class="grand">
<th>Grand total</th>
<td>340,00 €</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;
hyphens: auto;
hyphenate-limit-lines: 2;
}
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>
Ticket
A simple concert ticket using flex and absolute layouts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="WCAG" content="2.1">
<title>EVENT TICKET</title>
<style>
@page {
size: 340mm 130mm;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
main.ticket {
display: flex;
height: 100%;
width: 100%;
}
section.stub {
background: url('https://typeset.sh/images/demo/concert.jpg') center/cover;
height: 100%;
width: 100%;
position: relative;
}
section.stub .inner {
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 6mm;
bottom: 6mm;
left: 6mm;
right: 6mm;
padding: 10mm 10mm 10mm 30mm;
}
section.stub .title {
color:white;
font-size: 3em;
font-weight: 900;
letter-spacing: 1mm;
position: absolute;
top:0;
left:0;
transform-origin: 0 0;
transform: rotate(-90deg) translateX(-100%);
padding: 5mm;
}
section.stub .description {
color:#d3d7da;
margin: 0 0 5mm 0;
}
section.stub .when {
color: white;
font-weight: bold;
font-size: 1.5em;
margin: 2mm 0;
}
section.stub .where {
color:#d3d7da;
font-weight: 200;
font-size: 1.5em;
margin: -2mm 0 5mm;
}
section.stub .ticket_id {
color: #767b7e;
font-size: 0.7em;
position: absolute;
right: 5mm;
bottom: 1mm;
}
section.stub qr-code {
width: 20mm;
color: white;
position: absolute;
right: 5mm;
bottom: 5mm;
}
section.counterfoil {
height: 100%;
width: 100mm;
padding: 10mm;
}
section.counterfoil .title {
text-align: center;
font-weight: bold;
font-size: 2em;
}
section.counterfoil .when {
margin: 2mm 0;
}
section.counterfoil .where {
margin: 2mm 0;
}
section.counterfoil .pos {
background: none;
color: black;
font-size: 0.8em;
padding: 0;
margin: 5mm 0;
width: auto;
column-gap: normal;
justify-content: space-between;
}
section.counterfoil .pos .value {
color: black;
}
section.counterfoil .ticket_id {
font-size: 0.9em;
text-align: center;
}
section.counterfoil qr-code {
width: 40mm;
margin: 5mm auto 0;
}
.pos {
color:#d3d7da;
display: flex;
column-gap: 10mm;
background: rgba(0, 0, 0, 0.5);
padding: 5mm;
border-radius: 2mm;
width: max-content;
}
.pos div .label {
font-size: 0.8em;
text-align: center;
text-transform: uppercase;
}
.pos div .value {
font-size: 3.5em;
font-weight: 900;
color: #d712d7;
}
</style>
</head>
<body>
<main class="ticket">
<section class="stub">
<div class="inner">
<div class="title">EVENT TICKET</div>
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis ipsum rhoncus, tincidunt magna id, pellentesque ex. Vivamus efficitur nec libero ut volutpat.</div>
<div class="when">7:30pm Friday, February 25th 2022</div>
<div class="where">Meyerson Symphony Center</div>
<div class="pos">
<div class="gate">
<div class="label">Gate</div>
<div class="value">03</div>
</div>
<div class="row">
<div class="label">Row</div>
<div class="value">17</div>
</div>
<div class="seat">
<div class="label">Seat</div>
<div class="value">53</div>
</div>
</div>
<div class="ticket_id">CODE-578545-EM-584</div>
<qr-code>CODE-578545-EM-584</qr-code>
</div>
</section>
<section class="counterfoil">
<div class="title">EVENT TICKET</div>
<div class="pos">
<div class="gate">
<div class="label">Gate</div>
<div class="value">03</div>
</div>
<div class="row">
<div class="label">Row</div>
<div class="value">17</div>
</div>
<div class="seat">
<div class="label">Seat</div>
<div class="value">53</div>
</div>
</div>
<div class="when">7:30pm Friday, February 25th 2022</div>
<div class="where">Meyerson Symphony Center</div>
<qr-code>CODE-578545-EM-584</qr-code>
<div class="ticket_id">CODE-578545-EM-584</div>
</section>
</main>
</body>
</html>
Hyphenation and column span
Hyphenation and column span example.
<!DOCTYPE html>
<html lang="la">
<head>
<meta charset="UTF-8">
<title>Hyphenate Example</title>
<style>
@page {
size: A4;
margin: 10mm;
}
h1 {
font-size: 25pt;
break-after: avoid;
column-span: all;
text-align: center;
}
h2 {
font-size: 20pt;
font-weight: bold;
break-after: avoid;
column-span: all;
text-align: center;
}
section {
column-count: 3;
}
p {
margin: 0 0 0.5em;
font-size: 12pt;
text-align: justify;
hyphens: auto;
hyphenate-limit-lines: 2;
}
.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;
}
p::first-line {
font-weight: bold;
}
p::first-letter {
float:left;
font-size: 20pt;
line-height:22pt;
border-radius: 2pt;
background: lightgrey;
padding:2pt 4pt;
margin-right: 2pt;
}
</style>
</head>
<body>
<section >
<h1>Hyphenate Example</h1>
<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>
</section>
</body>
</html>
QR-Codes
Simple qr code example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QR Code</title>
<style>
@page {
size: 10cm 10cm;
margin: 10mm;
background: black;
}
body {
text-align: center;
color: white;
}
#qr {
display: inline-block;
width: 3cm;
color: dimgrey;
}
</style>
</head>
<body>
<h1>QR Code</h1>
<p>Generating a simple qr-code.</p>
<qr-code id="qr"
icon-src="https://typeset.sh/images/favicon-96x96.png"
icon-size="7"
alt="QRCode to typeset.sh">https://typeset.sh/en/php/extensions/qr-code/</qr-code>
<p>test me</p>
</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>
TOC
Example of a table of content page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table of content</title>
<style>
@page {
size: A5;
margin: 20mm;
@bottom-right {
content: 'Page: ' counter(page) ' of ' counter(pages);
font-size: 0.7em;
}
}
@page cover {
size: 148mm 55mm;
background: red;
counter-reset: page -1 pages -1;
@bottom-right {
content: none;
}
}
#cover {
page: cover;
text-align: center;
color: white;
font-weight: bold;
font-size: 3em;
}
h2 {
break-inside: avoid;
break-after: avoid;
}
p {
text-align: justify;
}
.pages {
content: counter(pages)
}
#toc {
padding: 0 0 0 15mm;
break-after: page;
}
#toc ol {
padding: 0;
}
#toc > li > a {
font-weight: bold;
}
#toc li {
margin: 2mm 0;
padding: 0;
}
#toc li::marker {
content: counters(list-item, '.') '. ';
}
#toc a {
text-decoration: none;
}
#toc a::after {
content: leader(' .')
'\205F('
target-counter(attr(href url), page)
')';
}
</style>
</head>
<body>
<div id="cover">COVER</div>
<h1>Table of content example</h1>
<p>A simple table of content example.</p>
<ol id="toc">
<li><a href="#topic1">Lorem ipsum dolor sit amet</a></li>
<li><a href="#topic2">Stet clita kasd gubergren</a>
<ol>
<li><a href="#topic2.1">Lorem ipsum dolor sit amet</a></li>
<li><a href="#topic2.2">Stet clita kasd gubergren</a></li>
</ol>
</li>
<li><a href="#topic3">At accusam aliquyam diam</a>
</li>
<li><a href="#topic4">Class aptent taciti sociosqu ad litora</a></li>
<li><a href="#topic5">Pellentesque sit amet tortor fringilla</a></li>
</ol>
<h2 id="topic1">Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac tempor orci, in pharetra leo.
Aliquam rhoncus vulputate turpis. Vestibulum sed eros eu dolor pellentesque suscipit. Sed vitae elit dui.
Sed finibus eleifend rhoncus. Curabitur aliquam interdum elit, ut dignissim lorem facilisis eu. In hac habitasse
platea dictumst. Quisque at dui ante. Suspendisse et tortor aliquam enim tristique viverra vitae et risus. </p>
<h2 id="topic2"> Stet clita kasd gubergren</h2>
<p>Nam at ligula lacinia, pretium ante eget, euismod neque. Curabitur vitae lectus nisl. Nullam finibus quam
justo, ac interdum arcu congue a. Proin finibus imperdiet semper. Aliquam ac lacus quis sem accumsan gravida vel a
diam. Pellentesque sed ex mollis, sagittis massa quis, tempus libero.</p>
<h3 id="topic2.1">Proin finibus imperdiet semper</h3>
<p> Etiam venenatis elit eget quam consectetur
tincidunt. Aenean sed justo faucibus, vulputate lorem eget, malesuada nulla. Nullam interdum, ante eget elementum
pulvinar, nulla nunc sodales tellus, sit amet porta odio orci a ex. Morbi ullamcorper urna non lectus faucibus
fringilla nec a eros. Duis euismod congue lacus in luctus. Sed elementum vitae diam sed consectetur. Praesent id
varius nisi. Aenean placerat tristique ex. </p>
<h3 id="topic2.2">Class aptent taciti sociosqu</h3>
<p> Etiam venenatis elit eget quam consectetur
tincidunt. Aenean sed justo faucibus, vulputate lorem eget, malesuada nulla. Nullam interdum, ante eget elementum
pulvinar, nulla nunc sodales tellus, sit amet porta odio orci a ex. Morbi ullamcorper urna non lectus faucibus
fringilla nec a eros. Duis euismod congue lacus in luctus. Sed elementum vitae diam sed consectetur. Praesent id
varius nisi. Aenean placerat tristique ex. </p>
<h2 id="topic3">At accusam aliquyam diam diam dolore dolores</h2>
<p>Curabitur egestas mauris non fringilla maximus. Integer eleifend consequat nisl et porta. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed eget ipsum in lorem consectetur
vehicula. Integer porta felis a malesuada lobortis. Quisque vulputate ligula non enim rutrum tempor. Suspendisse
eget sapien lectus. Aenean non mattis felis. Aliquam eget iaculis augue, et placerat magna. Donec vestibulum lectus
ut laoreet condimentum. </p>
<h2 id="topic4">Class aptent taciti sociosqu ad litora</h2>
<p>Nam auctor malesuada blandit. Nam tincidunt, massa at sodales interdum, elit justo iaculis libero, quis varius
sem nibh id purus. Duis rhoncus volutpat laoreet. Suspendisse imperdiet erat eget purus lacinia, id finibus magna
scelerisque. Morbi malesuada convallis vestibulum. Etiam rutrum eget mi eu venenatis. Donec eget egestas ligula,
id feugiat dui. Praesent a magna vel justo molestie bibendum in quis ligula. Etiam sodales nunc et libero aliquam
faucibus sit amet non eros. Vivamus pellentesque neque id molestie fringilla. Integer gravida ultricies efficitur.
Integer in nibh sit amet turpis fermentum gravida. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Morbi elementum volutpat sem, vel fermentum ligula molestie gravida. </p>
<h2 id="topic5">Pellentesque sit amet tortor fringilla</h2>
<p>Aliquam erat volutpat. In varius nibh sit amet tempor auctor. Quisque massa ipsum, ornare at augue vel, bibendum
condimentum purus. Sed fringilla consectetur velit, eget dapibus mi gravida id. Ut eget tincidunt lacus.
Quisque leo velit, aliquam in orci a, dignissim molestie ex. Nunc vulputate est sit amet lacus sagittis, sit
amet condimentum nunc blandit. Donec varius lacus laoreet, posuere purus eu, mollis risus. Pellentesque
facilisis nibh nec feugiat blandit. Nunc a lacus at purus porttitor aliquet vel ac nisi. Nullam sit amet nisl at
quam molestie ornare. Pellentesque sit amet tortor fringilla, facilisis nisl vitae, porta est. </p>
</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>
You can also use another pdf file as a page background and print over it, plus you can also specify the exact page you want to use as background by using test.pdf#2 or use #page placeholder test.pdf#page which will use the current page number or (modular of it) to fetch the correct background page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PDF Background</title>
<style>
@page {
size: 200pt 200pt;
background: url('https://typeset.sh/samples/assets/test.pdf#page') no-repeat;
margin: 10pt;
}
html {
font-size: 10pt;
}
div {
break-after: page;
}
</style>
</head>
<body>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</body>
</html>
