Printing web pages

I just generalized a job application I compiled last year into a single resume and worked on printing it.

debugging print.css

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.

page breaks

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.

<div class="page-breaker"></div>


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.