Nobody enjoys sitting down and writing their resume, right? But we do enjoy making websites (hopefully most of the time anyway)
So.... why is it normal practice to write our resumes in tools like Microsoft Word when we've got all these CSS skills just waiting to be used!
Creating a full-page, full-bleed, totally custom PDF resume from a web-page is easy, it just depends on one piece of CSS code:
@media print {
body {
width: 8.25in;
height: 11.75in;
margin: 0 0 0 0;
}
}
This will make it so that when you print a web page within Chrome, it will print it to perfectly fit the size of an A4 piece of paper.
The only other setting you need to adjust at the print preview screen in Chrome; in 'More Settings' make sure Margin is set to None, print the page to PDF and there you have it! A custom HTML & CSS resume as a full-page digital resume.
Note: When designing your new resume, it's best to work with a custom viewport in the dev tools rather than having to go into print preview every time to see how it will look on paper - You can set it to 825 x 1175 to correspond to the paper size.
Note 2: This only works in Chrome as right now I can't see a way to do a full-bleed print to PDF in Firefox...
Final added benefits to convince you:
- All
<a>tag links in your web page will still function as working links in your final PDF - Instead of being stuck with MS Office, you can create your resume with whatever tool you're comfortable with; Sass, Tailwind, hell - even Bootstrap! (I'm definitely not saying you should, I'm just... saying that you can)
- You can have your own custom backgrounds to make your resume stand out. Go with lots of colours to funk it up, or maybe choose a textured off-white background for something a little more classy.
So there you have it! Go get creative, use those dev skills and actually enjoy writing your CV for once :-)
Top comments (3)
Nice article with the added bonus that Chrome now adds a lot of the relevant TAGs to your PDF for screen reader users, so it should be pretty accessible too!
FYI - A4 is 8.25 inch by 11.75 inch, the size you used is US-letter I believe. Also bear in mind you would also need to adjust your viewport dimensions to account for this - 825px x 1175px should work and keep things simple.
Just a heads up as it may not line up correctly otherwise.
Cheers InHuOfficial! I hadn't heard of Letter size as it's not a thing here, and it seemed to fit the A4 with those measurements, but good to be aware of these differences for when I'm tweaking it. Good point re the viewport as well - of course that will match up perfectly!
Handy to get good at this cus I'm probably gonna be making my CV like this from now on :-)
Very interesting post 😀! I had no idea we could customize print and get pdf like that. Thanks for sharing 🙌!!