layout dimensions in mm


This might be simple but I haven’t been able to do it so far:

I have a fixed size panel that uses most of the browser size and inside it I want to show a vertical layout representing a paper sheet. Using a combobox, I choose the size of the paper, so if I choose an A4 paper, the vertical layout should be 216mm x 279mm, and if the size of the paper (height or width) is bigger than the panel, I can use the scrolls to move around the page…

My problem is that I can’t replicate the size of the paper. I should be able to put the actual paper in front of the screen and both sizes should match. If this has something to do with de dpi of my screen, I really don’t know how to do it, since the screen resolution is set to the recommended settings (100% - 1360 x 768)…

Is this possible to do??

It is more complicated than what you think as pixels don’t have the same size on different screens.
A smart phone may be able to have 960x640 pixels on a 3.5 inch screen (iPhone 4S for the demo) while a desktop monitor may have 800 per 600 pixels on a 15 inch screen.
So basically you can’t really define something on screen and have it display in real world without probing the graphic card and screen drivers.

So you will have to do rough conversion between mm and pixel to make it satisfying on several computers and consider it’s the best you can do.

Thank you Mathias for your answer…

Any conversion that I might try will need to transform the mm from the paper to pixels using the screen dpi…is there a way to obtain the dpi from the screen?? (programatically, of course…)



Not in a web browser as far as I know.
And it would work well only if graphic driver writers are reporting good values… which they are sadly well known for not doing.

I’d try and rely on pure CSS mm/cm units for this, and hope that the browser can convert the values correctly. So just use


and hope for the best (I just tested using my screen, and it’s not even close) :slight_smile: