4

Is there a way to tell/set, how many millimeters an element has, which works across various devices?

For example, I would like to create a white window which is 100 x 100 mm, with a black 10 x 10 mm square in the middle, which would have those dimensions on desktop, tablet, print, ...

I don't mind to use very latest browser but it has to use HTML/JS/CSS.

PS: Related: is there a way to tell, how many millimeters the screen has?

Edit

In other words, the problem is that using CSS units like pt, mm, cm, ... does not work as browser vendors decided to hardcode 96 DPI into the agents, according to here. Is there anything one can do to get real, physical, dimensions on web?

hkk
  • 2,069
  • 1
  • 23
  • 48
Ecir Hana
  • 10,864
  • 13
  • 67
  • 117
  • Because this was a two second Google search: http://www.w3.org/Style/Examples/007/units.en.html – Tieson T. Aug 28 '13 at 09:26
  • Yes, I know about it but according to http://robert.ocallahan.org/2010/08/css-units-changes-landed_20.html this should not work. – Ecir Hana Aug 28 '13 at 09:27
  • @TiesonT. except it doesn't work. So why the downvote? – Ecir Hana Aug 28 '13 at 09:33
  • If someone disagrees with the downvote, I'm sure they'll upvote, but as-is, there's nothing to show what you've read to try and answer this on your own, or what you've tried that doesn't work. If you can show either, I'd be happy to retract my down-vote. – Tieson T. Aug 28 '13 at 09:38
  • @TiesonT. you were right, it could have looked I did not my work - see the edit. – Ecir Hana Aug 28 '13 at 09:46

2 Answers2

3

Not really.

In theory you can set lengths using mm units, but this requires that the browser accurately handles the DPI of the display … and browsers tend to assume a fixed value instead of getting the real one.

If that worked, you could then get the width in that unit by creating an off-screen element of known physical dimensions, reading the pixel dimensions using JavaScript and using that ratio to convert the pixel dimensions of any other element to mm.

In practice, if you need accurate measurements you are pretty much limited to drawing something on screen and asking the user to measure it with a ruler to get your ratio.

Alternatively, if you can identify the specific device in use (which the User Agent String may tell you for some devices) and you keep a database of the physical sizes of those devices (so this is limited to a subset of phones and tablets and won't work if they are connected to an external display) you could use that to determine the dimensions.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • There seem to be [some OS / Hardware combinations](http://stackoverflow.com/questions/4023192/div-width-in-cm-inch/4023219#4023219) these days that can indeed interpret and render physical sizes in CSS reliably (because the hardware can report its dimensions to the OS, and the OS can report them to the browser, I presume). It's not reliable, though. – Pekka Dec 26 '13 at 00:03
0

cm and mm can be used as CSS units , For more information please have a look at http://www.w3.org/TR/css3-values/#lengths

16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm

Im not sure how well they work in high screen density devices..

Prasanna Aarthi
  • 3,439
  • 4
  • 26
  • 48