yellow5/00_info.md

## 00_info.md

      
    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

  
## 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

## 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>

## 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>
	$ 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
	<!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! </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>