From ffef41433c937a2e18912cf7be4eaed020c697f4 Mon Sep 17 00:00:00 2001 From: Danny Berger Date: Mon, 18 Mar 2013 13:52:10 -0600 Subject: [PATCH] wkhtmltopdf headers post --- ...-15-using-html-headers-with-wkhtmltopdf.md | 47 +++++++++++++++++++ include/content/header-simple.html | 29 ++++++++++++ 2 files changed, 76 insertions(+) create mode 100644 blog/_posts/2013-03-15-using-html-headers-with-wkhtmltopdf.md create mode 100644 include/content/header-simple.html diff --git a/blog/_posts/2013-03-15-using-html-headers-with-wkhtmltopdf.md b/blog/_posts/2013-03-15-using-html-headers-with-wkhtmltopdf.md new file mode 100644 index 0000000..dc88b50 --- /dev/null +++ b/blog/_posts/2013-03-15-using-html-headers-with-wkhtmltopdf.md @@ -0,0 +1,47 @@ +--- +title: Using HTML Headers with wkhtmltopdf +layout: post +tags: headers wkhtmltopdf +description: Experimenting with dynamic HTML headers for PDFs. +--- + +Preparing for my job search, I really wanted to somehow reuse the content from my [about][2] page for my +résumé instead of trying to also maintain the information in a Word/Google Drive file. Mac OS X has the +convenient capability to convert any print to a PDF which is helpful in creating a general print-specific stylesheet for +browsers, but it still had a few drawbacks. One of those drawbacks is headers - I expect to see them on even the +simplest professional documents. Having used [`wkhtmltopdf`][1] before, I knew it could be a solution. + +I started by creating a simple [header file][3] to include my name, my website, document name, and page information. I +also created a new CSS class which would take care of hiding headers and footers since they just take up extra space and +are being replaced. By using a few extra arguments, `wkhtmltopdf` does a brilliant job at creating a professional +document: + + wkhtmltopdf \ + --print-media-type \ + --run-script 'document.body.className+=" alt-printarticle";' \ + --margin-left 8mm --margin-right 8mm --margin-top 20mm \ + --header-spacing 3 \ + --header-html 'http://localhost:4000/include/content/header-simple.html?doctitle=r%26%23233%3Bsum%26%23233%3B' \ + --title 'resume' \ + 'http://localhost:4000/about.html' \ + resume.pdf + +Once that was working, I applied a few other tricks to make the printout a bit nicer: + + * [`page-break-inside`][5] – to prevent specific lines from breaking across pages (e.g. keeping the job title and + company lines together) + * `a` tag styling – suppressing underlines and visual differences since they make less sense when printed on + paper + * `.screen-only` and `.print-only` classes – to show slightly different content when printing (e.g. showing + company website addresses instead of a generically linked "website" that looks simpler on browser screens) + +Finally, after a bit of experimenting, learning, and styling, I can now present a consistent résumé (and cover +letters, references, …) whether it's through [PDF file][4] or [web page][2]. When viewing as a PDF, it has the +added benefits of remaining interactive with embedded links. + + + [1]: https://code.google.com/p/wkhtmltopdf/ + [2]: /about.html + [3]: /include/content/header-simple.html + [4]: http://static.dpb587.me/about.pdf + [5]: https://developer.mozilla.org/en-US/docs/CSS/page-break-inside diff --git a/include/content/header-simple.html b/include/content/header-simple.html new file mode 100644 index 0000000..0e4c4a8 --- /dev/null +++ b/include/content/header-simple.html @@ -0,0 +1,29 @@ + + + + + + +
+
DPB
+
{doctitle}
page {page} of {topage}
+

Danny Berger
http://dpb587.me

+
+ +