Set HTML page to PDF size for dynamically converting to PDF using headless-chrome

HTML & CSS
1

I have a HTML webpage which I would like to convert to PDF dynamically using chrome headless in python. It should be a single page PDF.

body
{
    background-color: lightgray;
    padding:0;
    margin:0;
    font-family: Inter;
    color: #353E57;
    -webkit-font-smoothing:antialiased;
}
.container
{
    background-color: white;
    width:842px;
    /*height: 595px;*/
    margin: 0 auto;
    padding: 45px;
}

But when viewing this in chrome’s print, the last section overflows to the second page.
How can I fit the content in a single page PDF ?

This is the page :

CleanShot 2026-07-29 at 12.52.41
CleanShot 2026-07-29 at 12.52.41900×1170 24.4 KB

This is how it is in print view in Chrome :

CleanShot 2026-07-29 at 12.54.58
CleanShot 2026-07-29 at 12.54.58976×964 23.7 KB

2

If you dont want to do it with fiddling, you’d have to determine Chrome’s PPI setting for printing, and define the page correctly to match it, I would imagine.

You’re trying to take a digital dimension (pixels) and convert it into a physical dimension (inches/mm, depending on your country of origin). Pixels dont have a defined physical size - I can make a 80" TV with 1 pixel, or i can make an 80" TV with 33,177,600 pixels. It’s the same physical dimension, but my Pixels Per Inch (PPI) is drastically different.

If you drop down the “More Settings” in the printing section, you’ve got options for scaling and margin, I’d play around with those a bit. It’s possible the margins are causing your clipping, but if not, scaling the thing down from 100% may “solve” the issue.

1 Like
3

I haven’t had chance to read through this yet, but it maybe worth a look.

https://www.sitepoint.com/css-printer-friendly-pages/

If you do a search on here for ‘css print’, you will also find a few threads that have been posted over the years on this topic.

1 Like