How can I setup an emulated device in Google Chrome to look like an A4 page?

Question

I have a website using Bootstrap 4. I am trying to modify the CSS so that I get it looking how I want when I print the page to a PDF.

I have found the Rendering option to enable Emulate CSS media type. Enabling this means that the rules I see in the browser are the same ones that are applied during printing.

I want to setup an Emulated Device in Chrome so that it has the same size as various physical pages such as A4.

I am using a MacBook Pro 15" 2019 and so it should have a device pixel ratio of 2.

An A4 page is 210mm x 297mm.

What should the device width and height be set to?

Indefeasible

Answer 1

Browser (CSS) pixels are assuming 96 DPI, i.e. the are around 96 pixels in one inch. Knowing size in inches for A4 paper and this parameter, we can calculate needed screen size in pixels. In your case for A4 paper it will be 794 x 1123 for portrait orientation.

This calculator might be helpful: https://www.a4-size.com/a4-size-in-pixels/?size=a4&unit=px&ppi=96

Toile

Answer 2

Had similar problem when i needed to generate pdf using react. This setup worked for me. I'm supprised this is not included by default.

Quentin