Preparing for my job search, I really wanted to somehow reuse the content from my about 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 before, I knew it could be a solution.
I started by creating a simple header file 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
$ 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– to prevent specific lines from breaking across pages (e.g. keeping the job title and company lines together)
atag styling – suppressing underlines and visual differences since they make less sense when printed on paper
.print-onlyclasses – 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 or web page. When viewing as a PDF, it has the added benefits of remaining interactive with embedded links.