Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accounting for different DPI (ie 72 vs 96) #54

Open
kalnode opened this issue Nov 23, 2023 · 0 comments
Open

Accounting for different DPI (ie 72 vs 96) #54

kalnode opened this issue Nov 23, 2023 · 0 comments

Comments

@kalnode
Copy link

kalnode commented Nov 23, 2023

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;
    }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant