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'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 !
- Without special UA or polyfills :
- Broswers do understand
@page { margin }
andelement {break-after}
andbreak-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.
- Broswers do understand
- 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.
- 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]
- 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.
- 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 !
You can try an interactive version of my resume by entering npx adrianv.sh
in your terminal.