Div width in cm (inch)

Question

I need to put in my site div which is exactly 25cm width ( 10 inch) in every display. How I can do it ?

Answer 1

I believe the layout engine would need to know three things to make this possible:

1. Screen resolution
2. DPI
3. Physical monitor size

As far as I'm aware, it doesn't know all three.

Answer 2

You can simply use the cm unit in CSS:

#mydiv { width: 25cm; }

Note that, as others pointed out, the result still depends on the correct reading of the monitor size by the operating system.

See the spec for more information.

Answer 3

You will need to get hold of the resolution of the display and the dot pitch of the monitor to be able to calculate this.

Given these two values you'll be able to calculate the number of pixels you need.

However, you can't get hold of this information from a web site.

Answer 4

How I can do it ?

You can't. Update: apparently, you can on many modern systems: Check out @Tomas's answer. It seems not to be always entirely reliable, though.

Old answer: You can't. Monitors display different numbers of pixels. The pixel size varies wildly from monitor to monitor.

There are ways to interpolate the pixel size if you know the monitor size. This information is sometimes available to the operating system; however, it is impossible for a web site to get hold of this information.

The only way to go would be to have the user do a calibration. For example, ask the user to hold an A4 piece of paper to the monitor, and use a draggable ruler to determine the area it covers. Using that information, you can then calculate how many pixels you will need to show 25 centimeters.

Update: @Tomas claims in his answer that using CSS cm values works on screen.

This is in fact true on my Windows 7 and 23" Plug&Play TFT Monitor (1920x1080 Pixels): 21cm translates perfectly to the short side of a A4 sheet of paper in Chrome 7, IE6(!), IE7, Firefox 3.6.

It doesn't seem to be entirely reliable, though: @Yi Jiang can't get it to work on a TFT using Ubuntu Linux; also, older Monitors may not send through their size information so it'll be impossible for the OS to determine a correct size.

Here's a simple JSFiddle for testing.

Answer 5

Given that you state it's a <div> in a site, we know you're in a web browser environment.

Sadly for you, the web browser doesn't have any way to find out the screen's DPI. You can find out what the screen resolution is, so you'll know whether the user has 1024x760 or whatever, but you'll never know whether those 1024x768 pixels are being displayed on an iPhone sized screen or a billboard, or anything in between.

Sorry about that.

Answer 6

You can't. A program can only get the true physical dimensions of a screen by interrogating EDID as values returned by the Windows API are not reliable. A program can get the true values for resolution (e.g.1280 x 1024) and screen dpi, but browsers can't do any of this by themselves.

There is a constant confusion between the "physical dpi" of a screen and "screen dpi". The physical dpi, more properly called pixels per inch, is obtained by dividing the maximum pixel width of the screen by the physical (ruler) width in inches. The pixels per inch are fixed by the manufacturing process. The screen dpi is a number that the user can set via the Control Panel and it's only purpose is to convert a value in inches into a number of pixels. The user settable screen dpi value has no direct relationship whatever with the physical dpi (pixels per inch) and is just a number with a default value of 96. There is nothing magic about 96, or 120

Number of screen pixels = number of inches x screen dpi
It's as simple as that.

The reason 21 cm on a 23 inch monitor at 1920 x 1080 "translates" to the width of an A4 sheet (21 cm) is because with a 23 inch diagonal the screen width is 20.05 inches and at 1920 pixels across the pixel density is 95.76 pixels per inch.
With screen dpi default value of 96 then for one inch: pixels = 1 x 96 = 96 pixels
The pixel density of the 23 inch screen is 95.76 pixels per inch which matches the number of pixels you get, when specifying a length of one inch, with the default screen dpi value of 96.

If screen dpi is changed in the Control Panel, or the monitor video resolution is changed, then 21 cm would not match the width of a sheet of A4.