Dealing with printable websites has a lot of use cases: Whether you want to generate invoices or eBooks, HTML is so much easier and more extendable than dealing with PDF or Office files. However, there are all kinds of caveats even for experienced web developers. Paper size, print margins, borders and many more. Having to open the Print Preview dialog is painful and not state-of-the art. There must be a better solution, right?

CSS Medium Emulation

The Chrome Developer Tools come to the rescue! Their emulation feature is widely known to deal with all kinds of mobile devices, from tablets to smartphones. Many don’t know that there’s a feature that can easily be overseen: The Chrome Developer tools allow you to emulate the css medium.

And here’s how you enable them: Enable CSS Print Emulation Preview

Step by Step

  • Open the Developer Tools (cmd + alt + i)
  • Enable the “Emulation” by click the Smartphone icon
  • If you don’t see the lower part, toggle it with Esc
  • Switch to “Emulation” tab
  • Chose “Media” from the side navigation
  • Check “CSS Media” and select “print

Setting the screen dimensions

Depending on where you are in the world, you probably print either on A4 or US-Letter. You can set the screen dimensions to the corresponding paper sizes. Those are:

  • 210mm x 297mm for A4
  • 216mm x 279mm for US-Letter

If you need another format, I found papersizes.org providing the best reference.

Conclusion

Debugging the print view is very easy and nice.