Skip to content

Instantly share code, notes, and snippets.

@leohemsted

leohemsted/letter.html

Created December 8, 2017 16:36
Show Gist options
  • Save leohemsted/c452afdd60032b33c2dd637c92d5bf07 to your computer and use it in GitHub Desktop.
Save leohemsted/c452afdd60032b33c2dd637c92d5bf07 to your computer and use it in GitHub Desktop.
Download ZIP
Letter that generates an invalid PDF in weasyprint 0.41
Raw
letter.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
Preview – GOV.UK Notify
</title>
<style media="print">
@page {
size: A4 portrait;
margin: 15mm 10mm 15mm 15mm;
}
@page :first {
margin-top: 10mm;
}
body {
font-family: 'Nimbus Sans L';
font-size: 12.5pt;
line-height: 16.0pt;
letter-spacing: 0.01em;
word-spacing: -0.04em;
margin: 0;
padding: 94mm 50mm 0 0;
}
#logo {
height: 18mm;
width: 70mm;
position: absolute;
top: 0;
left: 0;
background: url(https://github.com/alphagov/notifications-template-preview/raw/90fa217f3be0a758b2f652e3525324669bb4cede/static/images/letter-template/mmo.png);
background-size: auto 18mm;
background-repeat: no-repeat;
}
#to,
#from {
position: absolute;
}
#to {
width: 85mm;
max-height: 26.7mm;
left: 9.6mm;
bottom: 215.8mm;
overflow: hidden;
font-size: 8pt;
line-height: 8.5pt;
text-transform: uppercase;
}
#from {
bottom: 199.8mm;
right: 0mm;
width: 71.2mm;
max-height: 132pt;
font-size: 10pt;
line-height: 12pt;
}
#mdi {
font-size: 6pt;
}
#barcode {
position: absolute;
top: 61mm;
left: 9.6mm;
width: 85mm; /* not width constrained */
height: 8.1mm;
background: url(https://github.com/alphagov/notifications-template-preview/raw/90fa217f3be0a758b2f652e3525324669bb4cede/static/images/letter-template/type29.png);
background-repeat: no-repeat;
background-size: auto 110%;
}
#qrcode {
position: absolute;
top: 26.9mm;
left: -10.6mm;
width: 6.7mm;
height: 6.7mm;
background: url(https://github.com/alphagov/notifications-template-preview/raw/90fa217f3be0a758b2f652e3525324669bb4cede/static/images/letter-template/qr1.png);
background-size: 100% 100%;
}
#content {
width: 137.5mm;
}
h1 {
font-size: 20pt;
line-height: 23.4pt;
font-weight: bold;
margin: 18.16pt 0 7.68pt 0;
}
h2 {
font-size: 14pt;
line-height: 17.4pt;
font-weight: bold;
margin: 0 0 16.0pt 0;
}
h1 + h2 {
margin-top: 8.35pt;
}
p {
font-size: 12.5pt;
line-height: 16.0pt;
margin: 0 0 16.0pt 0;
}
ul,
ol {
font-size: 12.5pt;
line-height: 16.0pt;
margin: 0 0 16.0pt 0;
padding: 0 0 0 0.8em;
}
ol {
padding-left: 1.4em;
}
li {
margin: 0;
padding: 0;
}
ol ul,
ul ul {
margin: 16.0pt 0 0 0;
padding-left: 0;
list-style-type: disc;
}
ol ul {
margin-left: -0.6em;
}
.linebreak {
display: block;
width: 0.01em;
height: 0.01em;
overflow: hidden;
}
.linebreak + .linebreak,
.block-linebreak {
display: block;
overflow: hidden;
margin: 0;
width: 0.01em;
height: 16.0pt;
}
.placeholder {
display: inline;
background-color: #FFBF47;
background-image: url(https://github.com/alphagov/notifications-template-preview/raw/90fa217f3be0a758b2f652e3525324669bb4cede/static/images/letter-template/placeholder-mask-left.svg), url(https://github.com/alphagov/notifications-template-preview/raw/90fa217f3be0a758b2f652e3525324669bb4cede/static/images/letter-template/placeholder-mask-right.svg);
background-size: auto 150%, auto 150%;
background-position: 0 -0.17em, right -0.17em;
color: #000;
overflow-wrap: break-word;
word-wrap: break-word;
border-radius: 1.05em;
}
.placeholder-no-brackets {
display: inline;
background: #FFBF47;
color: #000;
overflow-wrap: break-word;
word-wrap: break-word;
padding-left: 3px;
padding-right: 3px;
border-radius: 1px;
text-transform: none;
}
.placeholder-conditional {
display: inline;
background: #FFBF47;
background-image: url(https://github.com/alphagov/notifications-template-preview/raw/90fa217f3be0a758b2f652e3525324669bb4cede/static/images/letter-template/placeholder-mask-left.svg), url(https://github.com/alphagov/notifications-template-preview/raw/90fa217f3be0a758b2f652e3525324669bb4cede/static/images/letter-template/placeholder-mask-right-conditional.svg);
background-size: auto 115%, 5mm 100%;
background-position: 0 -0.05em, right 0;
background-repeat: no-repeat, no-repeat;
color: #000;
overflow-wrap: break-word;
word-wrap: break-word;
border-radius: 1.05em;
}
</style>
</head>
<body>
<div id="logo"></div>
<div id="to">
<div id="mdi">
000_000_0000000_000000_0000_00000
</div>
<span class='placeholder-no-brackets'>address line 1</span><br><span class='placeholder-no-brackets'>address line 2</span><br><span class='placeholder-no-brackets'>address line 3</span><br><span class='placeholder-no-brackets'>address line 4</span><br><span class='placeholder-no-brackets'>address line 5</span><br><span class='placeholder-no-brackets'>address line 6</span><br><span class='placeholder-no-brackets'>postcode</span>
</div>
<div id="barcode">
</div>
<div id="qrcode">
</div>
<div id="from">
</div>
<div id="content">
<p>
8 December 2017
</p>
<h1>
Main heading
</h1>
🤔<div class='linebreak-block'>&nbsp;</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment