HTML/CSS Resume for Print

Commands

Start a node server to serve the site. This uses nodemon to watch over changes in the ./src folder

npm run start

Compile the site for production.

npm run build

Then just print to pdf in your favourite browser !

I wanted to make my Resume for print using only HTML and CSS

• I'm a web dev, so this makes more sense than using a word processor, an already made template or even Latex
• This should be somehow feasible using @media print at-rule
• I decided to take one day for this and investigate a bit !

Key Findings

• Without special UA or polyfills :
  • Broswers do understand @page { margin } and element {break-after} and break-before props. Its possible to remove the default header/footer by setting @page {margin:0}.
  • It's possible to add a header/footer to the pages by hacking around (look at the link in the Interesting Resources section)
  • However, browser consistently fail at generated components. It's not possible to have Page Numbers for instance work properly. It's not possible either to generate section titles.
• At the moment of writing, broswer support is not good enough to make print edition viable. Either a special UA or a polyfill is required.

Interesting Resources

• One of the most complete articles, A Guide To The State Of Print Stylesheets In 2018 by Rachel Andrews [article]
• Priting for the web by Michael Perrin [article]. But this does not work in browsers without polyfills. This is more likelyto be compatible with special UAs
• Making header/footer for print in vanilla HTML/CSS [demo]|[article]

Libraries/resources

• Choosen solution => PagedJS : a free browser polyfill for the standard CSS print API. Downside : creates a shitton of classes and stuffs that complexify simple code
• Prince. Requires purchasing an (expensive) license but is likely to be the UA with the most complete API.
• wkhtmltopdf : free, avilable as cli, also has a npm wrapper. Downsides : doesn't use standard CSS api for page dimensions
• WeasyPrint : free, looks like it strives on implementing the standard CSS api for print.

In the end ...

• To make the experience intereactive, I decided to go for pagedjs even tough this adds quite a layer of code to polyfill the browsers.
• Try it out ! Click print and look at the result :)
• No need to compile the pdf from the html.... Tested in chrome and firefox !

Bonus

You can try an interactive version of my resume by entering npx adrianv.sh in your terminal.