Page dpi prop is not affecting page height and width anymore

[MichiLor]

Describe the bug
By default, a A4 page with the default dpi of 72 resulted in a page size of 595px (width) times 842px (height). We used then a dpi setting of 146 in order to achieve a page size of 1207px times 1707px. This was a requirement due to design guidelines that are based on roughly this size.
This works quite well til this PR seems to have change how the dpi behaves: fix: page dpi (#2771) · diegomura/react-pdf@8e6a832 (github.com)

To Reproduce

1. Define a A4 page with a dpi of 146 with the react-pdf version 3.4.4:

<Page debug dpi={146} size="A4">
     <Text style={{ fontSize: 13 }}>This is a text</Text>
</Page>

2. Resulted in expected page size
   

3. Bump version to 3.4.5

4. Results now in a smaller pixel page size
   

Steps to reproduce the behavior including code snippet (if applies):

Expected behavior
An A4 page with a dpi of 146 should again result in a width of 1207px and a height of 1707px.

Screenshots
See above

Desktop (please complete the following information):

• OS: Windows
• Browser chrome
• React-pdf version v3.4.5

[glarivie]

Same here. Works fine without this code: 8e6a832

[nikischin]

Hi @MichiLor @glarivie!

Thank you very much for your bug report!

Unfortunately the topic is a bit more complicated here than just reverting the change. This is unfortunately due to the spec of pdf, which always expects the unit to be user points which always expects points in an PDF to be 1/72 of an inch.

Please check out more details to this here or here

The thing with PDF is, you always want to have a font set to 12pt to be the same size no matter what dpi setting you have. You can check on Adobe Indesign and create two pdfs, one with 72dpi and one with 300dpi, and in both the font will have the same size (relative to the page size) if set to 12pt (which equals 12 user unit). This was not working before the fix and was therefore super confusing. Why should the complete layout of the page change when I change the dpi setting?

However, what you experiencing is the pixel value not representing the 300dpi equivalent of that pixel value. Since the pdf is vector anyhow, this is only an issue with the unit and not the resolution. However, I also came up with that fact and therefore implemented #2773 which should fix this issue. Could you please check out my PR and let me know if this does solve your issue?

Also I don't know what unit is represented by the debug mode, but I would expect it to represent the user points and not pixels, so I would indeed expect that to be unchanged (at 595 x 842 for A4) while a "100px" x "100px" element (not to be confused with "100" x "100" [unitless=user unit] element) on the page would have different sizing on both pdfs.

I think @diegomura it would be good to merge #2773, in order not to confuse more people with this :)

Edit: Actually I found out #2773 still had some issues with pixel values. This was due to I tried to make it a non breaking change for users which did not have a implementation according to PDF spec. However, I fixed it and now it should behave as described. Please note though, that the debug mode instead displays user units and not pixels, but in my opinion this makes most sense, as in most cases users will just work with user units and have a good developer experience.

[MichiLor]

While further analyzing our issue, I found out the same thing. Independent of the dpi, a font size of 12pt should always be displayed as the same size. We decided to just adapt our design specs, which solves my issue already. 
Thanks for the help!