PDF creation pixel sizes causes layout to change

Hi,

When creating PDFs from a responsive web page, lets say the page has a css rule to show a narrower version below 1024 pixels screen width and we supply width: "1024px" to pdf function. The rule should not apply on this case however it does and the layout changes in generated pdf.

Only when the width parameter is 4/3 of the actual width of viewport, then the pdf has exact same layout of given viewport width. This seems to be something related to an inches / points confusion somewhere (96 pixels per inch, 72 pixels per point. 96/72 = 4/3)

So, when I provide 1365px as pdf width I get the exact representation of the page at 1024px viewport width. Anything below 1365px, page acts like the viewport is below 1024px and applies the appropriate responsive css rules.

I’m not sure if this is an upstream bug or something else though. Margins are set to 0 btw.

Any ideas?

[erasmuswill]

I had the same issue, I fixed it by doing this:

   const convertPixelToInches = (value, dpi) => {
      let inches = value/ dpi;
      return `${inches}in`; // Calculate inches value and round it up.
    }
    const pageWidth = convertPixelToInches(req.body.evidenceWidth, 72);
    const pageHeight = convertPixelToInches(realPageHeight < req.body.evidenceHeight ? req.body.evidenceHeight : realPageHeight, 96);

And passing the values as width and height. @aslushnikov @rossj The only thing I’d like to understand now is why the dpi for the width and height need to be different for the width an height, where, if I return them from headless Chromium are 96 for height and width.

What is req.body.evidenceWidth , req.body.evidenceHeight and realPageHeight , supposed to be?

@jbprat really curious about this too

[ghost]

I had the same issue, I fixed it by doing this:

   const convertPixelToInches = (value, dpi) => {
      let inches = value/ dpi;
      return `${inches}in`; // Calculate inches value and round it up.
    }
    const pageWidth = convertPixelToInches(req.body.evidenceWidth, 72);
    const pageHeight = convertPixelToInches(realPageHeight < req.body.evidenceHeight ? req.body.evidenceHeight : realPageHeight, 96);

And passing the values as width and height.

@aslushnikov @rossj The only thing I’d like to understand now is why the dpi for the width and height need to be different for the width an height, where, if I return them from headless Chromium are 96 for height and width.

What is req.body.evidenceWidth , req.body.evidenceHeight and realPageHeight , supposed to be?