Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save notionparallax/dfd37e51e9dee308ee39193ed765a636 to your computer and use it in GitHub Desktop.
Save notionparallax/dfd37e51e9dee308ee39193ed765a636 to your computer and use it in GitHub Desktop.
Playwright printing issue support
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>fp_Ben-Doherty</title>
<link href="../css/magazine.css" rel="stylesheet" type="text/css" />
</head>
<body>
<style type="text/css">
@page{size: 319.83594508009156mm 235.36mm;}
body {
margin: 0;
}
svg{
width: 319.83594508009156mm;
height: 235.36mm;
}
tspan,
text,
.big-underline {
fill: #ffffff;
}
.spine-text {
font-family: "Raleway";
font-size: 8px;
}
.main-title {
font-family: "Raleway Dots", cursive;
font-size: 66px;
fill: black;
}
.front-page-subtitles {
font-family: "Raleway", "Noto Serif JP", serif;
font-size: 10px;
fill: black;
}
.page-outline {
display: none;
fill: none;
stroke: #ffffff;
stroke-miterlimit: 10;
}
.back-page-para {
font-family: "Noto Serif JP", serif;
font-size: 9px;
color: white;
}
.back-page-title {
font-family: "Cinzel Decorative";
font-size: 19px;
}
.shade {
opacity: 0.5;
}
.thin {
visibility: hidden;
}
#some-print-marks rect {
fill: black;
stroke: black;
}
</style>
<?xml version="1.0" encoding="utf-8"?>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 906.5967538040178 667.1439381895648"
style="enable-background: new 0 0 906.5967538040178 667.1439381895648;"
xml:space="preserve"
>
<g id="Image">
<image
style="overflow:visible;"
width="3000"
height="2184"
xlink:href="E363179E.jpg"
transform="matrix(0.3686 0 0 0.3686 -145.0787 0)"
>
</g>
<g id="spine"
transform="matrix(1 0 0 1 4.737972540045766 0)"
class="fat"
data-width="9.475945080091533"
>
<rect x="441.5" y="505" class="shade" width="9.475945080091533" height="161"/>
<rect x="441.5" y="84" class="shade" width="9.475945080091533" height="59"/>
<rect x="441.5" y="294" class="shade" width="9.475945080091533" height="59"/>
<text
transform="matrix(6.123234e-17 1 -1 6.123234e-17 443.6045 88.5837)"
class="spine-text"
>Walden Pond</text>
<text
transform="matrix(6.123234e-17 1 -1 6.123234e-17 443.6045 506.9742)"
class="spine-text"
>Ben Doherty</text>
<text
transform="matrix(6.123234e-17 1 -1 6.123234e-17 443.6045 304.9892)"
class="spine-text"
>5th Edition</text>
</g>
<g id="frontCover" transform="translate(9.475945080091533 0)" >
<rect
x="467.5"
y="88.6"
class="big-underline"
width="400"
height="0.8"
/>
<text class="main-title" transform="translate(464.1484 67.9751)">
Walden Pond
</text>
<g transform="translate(467 103)">
<text class="front-page-subtitles">
Monday 22 June 2020
</text>
<text
transform="translate(400 0)"
class="front-page-subtitles"
text-anchor="end"
>
Ben Doherty
</text>
<g transform="translate(200 0)">
<text class="front-page-subtitles">5</text>
<text class="front-page-subtitles"
transform="matrix(0.583 0 0 0.583 4.5 -6)"
>th</text>
<text class="front-page-subtitles"
transform="matrix(1 0 0 1 12 0)">Edition</text>
</g>
</g>
<rect
x="450.5"
y="9.4"
class="page-outline"
width="434.1"
height="648"
/>
</g>
<g id="backCover">
<rect x="7.5" y="9.4" class="page-outline" width="434.1" height="648" />
<rect class="shade" x="52.4" y="464" width="350" height="100"/>
<foreignobject
transform="translate(58 507)"
width="340"
height="250">
<body xmlns="http://www.w3.org/1999/xhtml">
<p class="back-page-para">
You&apos;re holding an edition of Walden Pond; it is the only one like
this. It comes out once a month, and is made specially for
Ben Doherty. If that&apos;s not you, and you&apos;d like your
own, go to https://waldenpond.press and subscribe.
</p>
</body>
</foreignobject>
<text
transform="translate(58 488)"
class="back-page-title"
>
What is Walden Pond?
</text>
</g>
<g id="some-print-marks">
<rect width="0.1" height="1.5" y="0" x="8.503704174748021"/>
<rect width="0.1" height="1.5" y="662.8920861021908" x="8.503704174748021"/>
<rect width="0.1" height="1.5" y="0" x="898.0930496292698"/>
<rect width="0.1" height="1.5" y="662.8920861021908" x="898.0930496292698"/>
<rect width="0.1" height="1.5" y="0" x="441.5"/>
<rect width="0.1" height="1.5" y="0" x="450.97594508009155"/>
<rect width="0.1" height="1.5" y="658.6402340148168" x="450.97594508009155"/>
<rect width="0.1" height="1.5" y="658.6402340148168" x="450.97594508009155"/>
<rect width="1.5" height="0.1" y="8.503704174748021" x="0"/>
<rect width="1.5" height="0.1" y="658.6402340148168" x="0"/>
<rect width="1.5" height="0.1" y="8.503704174748021" x="902.3449017166438" />
<rect width="1.5" height="0.1" y="658.6402340148168" x="902.3449017166438" />
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment