Accounting for different DPI (ie 72 vs 96)

[kalnode]

I've been using this library relatively successfully however I'm noticing a visual mismatch between my original designer's concept (a Figma project) and what I'm seeing in the browser for rendered HTML (using this library).

Maybe I'm overlooking something; can someone point it out?

---

Designer concept ("A4"):

Manually sized A4 container in a Figma project, dimensions are: 595x842 pixels and is correct for A4-in-72dpi, the classic printing resolution.

HTML in-browser ("A4"):

Using this library with class "A4", rendered HTML dimensions in-browser are: 210x296mm which is 794x1123 pixels and is correct for A4-in-96dpi, the typical screen resolution.

---

DESIRE: For these pixel dimensions to match; using the same "A4-in-x-dpi".

Please see https://www.papersizes.org/a-sizes-in-pixels.htm

When looking at this libraries' CSS, I think I just see size numbers based on 96dpi, am I wrong? https://github.com/cognitom/paper-css/blob/master/paper.css

Maybe I'm missing something; or does everyone not care about DPI and is ok with 96dpi-based values in the in-browser preview that this library provides?

My understanding is that this library may help us achieve a better visual sync across all implementations: concept design, executed design (HTML), print preview and final printed product. If one of those steps is 72dpi, and another is 96dpi... doesn't that break things? I'm not interested in having the in-browser view look pretty in the users' screen... I'm interested in it looking accurate so what is printed matches everywhere else. Yes, I'm assuming a user will print in 72dpi.

QUESTION: When I specify class "A4" with this library, where/how do I ask for particular DPI, like 72, 96, 300 etc. ??? Do I have to make those CSS rules myself? Isn't the point of a library to provide this for you?

---

As a starting point, this customization satisfies my direct need; I made a class DPI-72:

@media screen {
    body.A4.DPI-72 .sheet {
        width: 595px;
        height: 842px;
    }
}