I just generalized a job application I compiled last year into a single resume and worked on printing it.
I created a print style sheet to be overlaid on the resume when it is called up for a print job. That is easy enough to test using macOS's Print to PDF or Open in Preview features.
A faster way to view your print style while developing is offered by Chrome Development Tools. You can ask Chrome to render the print CSS Media in the browser with a buried option:
To view the print view:
- Open Dev Tools for the page
- Click the menu kabob on the right hand side of the Dev Tools window and select More Tools.
- From that sub menu select Rendering.
- For configuration options will appear in a panel called Rendering.
- Select the last value "Emulate CSS Media" and choose print.
Kinda buried, but a useful feature.
This is in the documentation, but it is important to remember that the page-break-before, page-break-after, and page-break-inside css guidance rules only apply to displayed block elements.
None displayed elements and empty elements will not effect page breaks.
Safari and Chrome managed to create pretty similar print output. I had to adjust spacing somewhat to get them both to print similar 2-page resumes, but there was a compromise that worked.
I tried sending the same page through firefox and the layout was wildly different. I decided to skip it for now. If it becomes a problem I can generate a PDF and put it there.