12

Is it possible to draw an element, say a div, to a width in inches and have a reasonable likelihood that the element will in fact, be that width (in inches), especially when moving to other devices?

Or is the answer to this, simply, no, and you'll end up with scale like 1in = 96px

Edit: Try using CSS inches on an element and then hold up a ruler to the element and see my dilemma

Edit: In 2014, do I really have to have my users hold up a ruler to the screen to get the ratio I need?

Edit to reopen:

I am creating an app where one of the elements MUST be (per requirements of the application) a fixed width in inches across different devices - limited to tablets and desktops (screen no less than 1024 x 768). I have seen answers suggesting you need to have your users physically measure and calibrate this area to give you a ratio that can be used with px. Is this really the only way to do this? Having your users hold a ruler up the screen?

Edit: Why do I need to do this, some people have asked? I am taking a product which does exist in the physical world and virtualizing it - this product requires human interaction and scaling the sizes does not work, it must remain at a fixed width across devices.

user602525
  • 3,126
  • 4
  • 25
  • 40
  • No. 1 inch @ 1024*768 `!=` 1 inch @ 800*600. If you're actually sat there with a ruler to the screen, you'll see what I mean. – BenM Jan 06 '14 at 17:47
  • 4
    how would css know how far my projector is from the screen, or how high i cranked the zoom knob? – dandavis Jan 06 '14 at 17:54
  • Physical dimensions are typically only used for CSS related to print layouts. – Mike Brant Jan 06 '14 at 17:56
  • 2
    @dandavis which is exactly why this is a novice web dev question. print it if you really must get actual dimensions. – tenub Jan 06 '14 at 17:57
  • 1
    @tenub I thought this was the age of the web app – user602525 Jan 06 '14 at 17:58
  • 1
    @randomuser if this is the age of the web app then physical units shouldn't even matter. after all, an inch is just one standardized way to measure something, same as a pixel. – tenub Jan 06 '14 at 18:06
  • 1
    @tenub should my users have to interact with my app using a ruler to get to the ratio I need? If the answer is yes, they do not have any other choice, then fine. I just want to know that is the answer. – user602525 Jan 06 '14 at 18:07
  • @randomuser you shouldn't have a requirement in a physical unit of measurement. either your client just doesn't understand this and you should describe to them nicely why, or this is a personal project and you can just scrap the requirement altogether. – tenub Jan 06 '14 at 18:15
  • 1
    @tenub I added an edit - I am literally trying to take something that does exist in the physical world as a product and virtualize it. The font size and width of this element must truly by the dimensions of the physical for it to work correctly - it can't scale. – user602525 Jan 06 '14 at 18:17
  • if you NEED control, you have to have control: you can determine it for known devices with integrated screens, like an ipad mini for example... – dandavis Jan 06 '14 at 18:27
  • @randomuser if your app is just using a model of a product or something then literally the only thing you actually need to retain are the proportions of your model (or whatever it is you're creating). i can see no reason that it MUST be some exact length (for instance) on the user's screen if you're just creating a model of a product. – tenub Jan 06 '14 at 18:28
  • 1
    @tenub I can't divulge the necessity for the fixed with (without scale) since this is for a product I am working on with a team for a company. But I can say with absolute certainty, that it must be a fixed length that doesn't change between the devices it is used on. We are tasked with finding a way to eliminate user intervention in calibrating the ratio. Looking at it on an ipad should be the same as a 27inch screen. – user602525 Jan 06 '14 at 18:32
  • @randomuser then you will have to abandon the project because there is no guaranteed way to have an element be the exact same physical dimension across every device. refer to dandavis's comment for an example reason as to why. – tenub Jan 06 '14 at 18:41
  • @tenub might as well just abandon the will to live while you are at it. the idea that you can't do such a simple thing is ridiculous beyond all expression. – Michael Feb 08 '18 at 05:01

3 Answers3

4

Yes, it's possible--measurements like in, cm, and mm are accepted. The conversion from the length to a number of pixels is handled by the system. The W3C doesn't recommend them for use on screens, though, since the machine in question has to support the conversion.

Note that if the anchor unit is the pixel unit, the physical units might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels.

Note that this definition of the pixel unit and the physical units differs from previous versions of CSS. In particular, in previous versions of CSS the pixel unit and the physical units were not related by a fixed ratio: the physical units were always tied to their physical measurements while the pixel unit would vary to most closely match the reference pixel. (This change was made because too much existing content relies on the assumption of 96dpi, and breaking that assumption breaks the content.)

(Source: http://www.w3.org/TR/CSS21/syndata.html#length-units)

Community
  • 1
  • 1
Milo P
  • 1,377
  • 2
  • 31
  • 40
2

Using inches in CSS is possible (literally 1in) but isn't always accurate, since the browser, operating system, and monitor all have to work out perfectly to do it. The accuracy always depends, but on my monitor it is usually about half an inch off. Perhaps my answer here may help you. There's no 100% accurate failsafe method, but then again, that's because it isn't exactly the most useful thing to have in your CSS. Dealing in pixels normally works just as well.

Community
  • 1
  • 1
hkk
  • 2,069
  • 1
  • 23
  • 48
2

You can use in but result still depends on the correct reading of the monitor size by the operating system. There are problems with pixel density of screen which is hard to calculate exact.

Check this link http://www.w3.org/TR/CSS21/syndata.html#length-units

gorgi93
  • 2,457
  • 8
  • 30
  • 53