Skip to content

Instantly share code, notes, and snippets.

@yellow5

yellow5/00_info.md

Last active June 10, 2016 03:09
Show Gist options
  • Save yellow5/fedf4379d8bc5718c9f2377d6bfd96e0 to your computer and use it in GitHub Desktop.
Save yellow5/fedf4379d8bc5718c9f2377d6bfd96e0 to your computer and use it in GitHub Desktop.
Download ZIP
Assets for wkhtmltopdf margin + link debugging.
Raw
00_info.md

The goal of these assets is to show what happens to a working link in the footer of a generated PDF based on the presence of margins.

Stack:

  • wkhtmltopdf v0.12.3
  • debian jessie 64-bit
  • page.html + page_footer.html assets

The execution examples should provide two results for comparison. The result generated without margins contains a link in the footer that works as expected. The result generated with the margins exposes the issue described in this issue (1), the link element roughly 0.5" above the linked text.

(1) wkhtmltopdf/wkhtmltopdf#1692

Raw
01_generation_examples.sh
$ uname -a
Linux vagrant-jessie64 3.16.0-4-amd64 #1 SMP Debian 3.16.7-ckt25-2 (2016-04-08) x86_64 GNU/Linux
$ wkhtmltopdf --version
wkhtmltopdf 0.12.3 (with patched qt)
# Generation without any margins.
$ wkhtmltopdf -q --footer-html file:////path/to/page_footer.html file:////path/to/page.html /path/to/generated_without_margins.pdf
# Generation with margins.
$ wkhtmltopdf -q --margin-top 12.7 --margin-bottom 12.7 --margin-left 12.7 --margin-right 12.7 --footer-html file:////path/to/page_footer.html file:////path/to/page.html /path/to/generated_with_margins.pdf
Raw
page.html
<!DOCTYPE html>
<html>
<head>
<title>MyApp | Star Wars</title>
<meta name='description' content='A long time ago, in a galaxy far, far away...'>
<meta property='og:title' content='MyApp | Star Wars' />
<meta property='og:description' content='A long time ago, in a galaxy far, far away...' />
<meta charset='utf-8' />
<style type='text/css'>/* Colors */
.white {
color: #FFFFFF;
}
.ocean-green {
color: #3FB985;
}
.transformed {
text-transform: uppercase;
}
.flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.flip-y {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
[class^='container'].no-padding {
padding-left: 0;
padding-right: 0;
}
[class^='container'].min-padding {
padding-left: 15px;
padding-right: 15px;
}
.p-t {
padding-top: 20px;
}
.p-r {
padding-right: 20px;
}
.p-l {
padding-left: 20px;
}
.p-b {
padding-bottom: 20px;
}
.p-x {
padding-left: 20px;
padding-right: 20px;
}
.p-y {
padding-top: 20px;
padding-bottom: 20px;
}
.p-t-2 {
padding-top: 40px;
}
.p-r-2 {
padding-right: 40px;
}
.p-l-2 {
padding-left: 40px;
}
.p-b-2 {
padding-bottom: 40px;
}
.p-x-2 {
padding-left: 40px;
padding-right: 40px;
}
.p-y-2 {
padding-top: 40px;
padding-bottom: 40px;
}
.p-t-3 {
padding-top: 60px;
}
.p-r-3 {
padding-right: 60px;
}
.p-l-3 {
padding-left: 60px;
}
.p-b-3 {
padding-bottom: 60px;
}
.p-x-3 {
padding-left: 60px;
padding-right: 60px;
}
.p-y-3 {
padding-top: 60px;
padding-bottom: 60px;
}
.p-t-0 {
padding-top: 0;
}
.p-r-0 {
padding-right: 0;
}
.p-l-0 {
padding-left: 0;
}
.p-b-0 {
padding-bottom: 0;
}
.p-x-0 {
padding-left: 0;
padding-right: 0;
}
.p-y-0 {
padding-top: 0;
padding-bottom: 0;
}
.m-t-half {
margin-top: 10px;
}
.m-r-half {
margin-right: 10px;
}
.m-l-half {
margin-left: 10px;
}
.m-b-half {
margin-bottom: 10px;
}
.m-x-half {
margin-left: 10px;
margin-right: 10px;
}
.m-y-half {
margin-top: 10px;
margin-bottom: 10px;
}
.m-t {
margin-top: 20px;
}
.m-r {
margin-right: 20px;
}
.m-l {
margin-left: 20px;
}
.m-b {
margin-bottom: 20px;
}
.m-x {
margin-left: 20px;
margin-right: 20px;
}
.m-y {
margin-top: 20px;
margin-bottom: 20px;
}
.m-t-2 {
margin-top: 40px;
}
.m-r-2 {
margin-right: 40px;
}
.m-l-2 {
margin-left: 40px;
}
.m-b-2 {
margin-bottom: 40px;
}
.m-x-2 {
margin-left: 40px;
margin-right: 40px;
}
.m-y-2 {
margin-top: 40px;
margin-bottom: 40px;
}
.m-t-3 {
margin-top: 60px;
}
.m-r-3 {
margin-right: 60px;
}
.m-l-3 {
margin-left: 60px;
}
.m-b-3 {
margin-bottom: 60px;
}
.m-x-3 {
margin-left: 60px;
margin-right: 60px;
}
.m-y-3 {
margin-top: 60px;
margin-bottom: 60px;
}
.m-t-0 {
margin-top: 0;
}
.m-r-0 {
margin-right: 0;
}
.m-l-0 {
margin-left: 0;
}
.m-b-0 {
margin-bottom: 0;
}
.m-x-0 {
margin-left: 0;
margin-right: 0;
}
.m-y-0 {
margin-top: 0;
margin-bottom: 0;
}
.page-break {
display: block;
clear: both;
page-break-after: always;
}
footer {
padding: 10px;
}
footer > .container-fluid > .p-y-3 {
padding: 0;
}
footer p {
text-align: center;
font-size: 12px;
}
.hidden-print {
display: none;
}
.visible-print {
display: block;
}
.print-p-x-0 {
padding-left: 0;
padding-right: 0;
}
.print-m-y-0 {
margin-top: 0;
margin-bottom: 0;
}
</style>
</head>
<body class="things things-show">
<main>
<div class="thing">
<h1>Star Wars</h1>
<hr />
<h2>George Lucas <small><em>from</em> Star Wars</small></h2>
<div class="m-t-2">
<h3><b>Master Yoda</b><br></h3>“Do or do not, there is no try.” And here's a link to <a target="_blank" rel="nofollow" href="https://en.wikipedia.org/wiki/Yoda">Yoda's wiki page</a>.<h3><br></h3><h3><br></h3><h3><br></h3><h3>Master Kenobi</h3><div>I will become more powerful than you can possibly imagine!&nbsp;</div>
</div>
<div class="page-break"></div>
<h3>Questions</h3>
<div class="m-t-2">
<ol><li><b>Why?</b></li><li><b>Did you answer the <i>first</i> question?</b></li></ol>
</div>
</div>
</main>
</body>
</html>
Raw
page_footer.html
<!DOCTYPE html>
<html>
<head>
<title>MyApp</title>
<meta name='description' content='MyApp'>
<meta property='og:title' content='MyApp' />
<meta property='og:description' content='MyApp' />
<meta charset='utf-8' />
<style type='text/css'>/* Colors */
.white {
color: #FFFFFF;
}
.ocean-green {
color: #3FB985;
}
.transformed {
text-transform: uppercase;
}
.flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.flip-y {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
[class^='container'].no-padding {
padding-left: 0;
padding-right: 0;
}
[class^='container'].min-padding {
padding-left: 15px;
padding-right: 15px;
}
.p-t {
padding-top: 20px;
}
.p-r {
padding-right: 20px;
}
.p-l {
padding-left: 20px;
}
.p-b {
padding-bottom: 20px;
}
.p-x {
padding-left: 20px;
padding-right: 20px;
}
.p-y {
padding-top: 20px;
padding-bottom: 20px;
}
.p-t-2 {
padding-top: 40px;
}
.p-r-2 {
padding-right: 40px;
}
.p-l-2 {
padding-left: 40px;
}
.p-b-2 {
padding-bottom: 40px;
}
.p-x-2 {
padding-left: 40px;
padding-right: 40px;
}
.p-y-2 {
padding-top: 40px;
padding-bottom: 40px;
}
.p-t-3 {
padding-top: 60px;
}
.p-r-3 {
padding-right: 60px;
}
.p-l-3 {
padding-left: 60px;
}
.p-b-3 {
padding-bottom: 60px;
}
.p-x-3 {
padding-left: 60px;
padding-right: 60px;
}
.p-y-3 {
padding-top: 60px;
padding-bottom: 60px;
}
.p-t-0 {
padding-top: 0;
}
.p-r-0 {
padding-right: 0;
}
.p-l-0 {
padding-left: 0;
}
.p-b-0 {
padding-bottom: 0;
}
.p-x-0 {
padding-left: 0;
padding-right: 0;
}
.p-y-0 {
padding-top: 0;
padding-bottom: 0;
}
.m-t-half {
margin-top: 10px;
}
.m-r-half {
margin-right: 10px;
}
.m-l-half {
margin-left: 10px;
}
.m-b-half {
margin-bottom: 10px;
}
.m-x-half {
margin-left: 10px;
margin-right: 10px;
}
.m-y-half {
margin-top: 10px;
margin-bottom: 10px;
}
.m-t {
margin-top: 20px;
}
.m-r {
margin-right: 20px;
}
.m-l {
margin-left: 20px;
}
.m-b {
margin-bottom: 20px;
}
.m-x {
margin-left: 20px;
margin-right: 20px;
}
.m-y {
margin-top: 20px;
margin-bottom: 20px;
}
.m-t-2 {
margin-top: 40px;
}
.m-r-2 {
margin-right: 40px;
}
.m-l-2 {
margin-left: 40px;
}
.m-b-2 {
margin-bottom: 40px;
}
.m-x-2 {
margin-left: 40px;
margin-right: 40px;
}
.m-y-2 {
margin-top: 40px;
margin-bottom: 40px;
}
.m-t-3 {
margin-top: 60px;
}
.m-r-3 {
margin-right: 60px;
}
.m-l-3 {
margin-left: 60px;
}
.m-b-3 {
margin-bottom: 60px;
}
.m-x-3 {
margin-left: 60px;
margin-right: 60px;
}
.m-y-3 {
margin-top: 60px;
margin-bottom: 60px;
}
.m-t-0 {
margin-top: 0;
}
.m-r-0 {
margin-right: 0;
}
.m-l-0 {
margin-left: 0;
}
.m-b-0 {
margin-bottom: 0;
}
.m-x-0 {
margin-left: 0;
margin-right: 0;
}
.m-y-0 {
margin-top: 0;
margin-bottom: 0;
}
.page-break {
display: block;
clear: both;
page-break-after: always;
}
footer {
padding: 10px;
}
footer > .container-fluid > .p-y-3 {
padding: 0;
}
footer p {
text-align: center;
font-size: 12px;
}
.hidden-print {
display: none;
}
.visible-print {
display: block;
}
.print-p-x-0 {
padding-left: 0;
padding-right: 0;
}
.print-m-y-0 {
margin-top: 0;
margin-bottom: 0;
}
</style>
</head>
<body class="things things-show">
<main>
<footer>
<p>Copyright &copy; 2016 <a href="https://github.com/">Github.com</a>. All Rights Reserved.</p>
</footer>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment