I need to put in my site div which is exactly 25cm width ( 10 inch) in every display. How I can do it ?
+5
A:
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.
Pekka
2010-10-26 11:36:44
I disagree. On most systems the monitor size can be correctly detected by the operating system, and absolute CSS values can be used.
Tomas
2010-10-26 11:48:30
@Tomas I have no trust that the browsers translate `cm` values correctly, even if they could. But fair point, I'll test it
Pekka
2010-10-26 11:54:49
@Tomas: "the monitor size can be detected" ... in pixels, which don't have a direct mapping to physical width units. A 17" screen can display 640x480 as well as 1024x768; how do you get the physical size when running code in a webpage? (hint: you don't)
Piskvor
2010-10-26 11:55:18
Pekka
2010-10-26 11:56:19
@Piskvor @Tomas I did a simple test; surprisingly, this works extremely well on the one monitor I can test it on right now. See my update. Anybody still got a CRT monitor to test on?
Pekka
2010-10-26 12:04:07
@Pekka: Interesting. What browser would that be, IE8? BTW could you check what your DPI setting is on that monitor?
Piskvor
2010-10-26 12:08:18
@Piskvor IE6, 7, 8, FF3, Chrome 7. I can't find a DPI setting in Windows 7 - I'm guessing it's calculating it automatically somehow
Pekka
2010-10-26 12:10:45
Is it the "Piskvor Is Wrong Day" today? @Tomas: I apologize - my data were outdated and you are correct. Newer monitors report their DPI via EDID: http://en.wikipedia.org/wiki/Extended_display_identification_data - and the OSes use it. Tested @Pekka's snippet in Opera 10.70 on Ubuntu 10.04 and It Works.
Piskvor
2010-10-26 12:14:27
@Pekka: Works in Firefox 3.6, Chromium 6, Opera 10.70 on Ubuntu 10.04 (Linux kernel 2.6.32) with nVidia graphics card and two older generic LCDs. Each of the displays reports 86 DPI to the card (` grep DPI /var/log/Xorg.0.log `), and the browsers all render your A4 page in correct size. (Doesn't work in VMs under VirtualBox - the screen size is appx. 1.5 cm larger than the physical A4; not sure if it will run correctly in native WinXP)
Piskvor
2010-10-26 12:24:21
That 21cm jsfiddle example is about 2cm more than A4 on my screen. Firefox 3.6, Windows XP.
Bobby Jack
2010-10-26 12:29:43
I made this answer Community Wiki because @Tomas came up with the `cm` idea.
Pekka
2010-10-26 12:31:19
+2
A:
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.
ChrisF
2010-10-26 11:37:32
You can't get hold of the information from within a web site, at any rate. In a Windows program, it might be possible (Windows 7 seems to know how large my screen is).
Pekka
2010-10-26 11:40:17
@Pekka: Yes, a desktop app would be able to get that data, since it can communicate directly with the monitor and graphics card. But the browser can't, and that's what the question asked.
Spudley
2010-10-26 11:44:59
@Spudley Relax. I wasn't criticizing Chris's answer, just adding a side note
Pekka
2010-10-26 11:46:40
@Pekka -- hehe. sorry; didn't mean to sound critical of you; I was just adding to what you said. :)
Spudley
2010-10-26 11:49:04
@Spudley yeah :) This is an interesting topic, and @Tomas claims this can be done using `cm` CSS values. I don't believe that the browsers do this correctly... I shall do some tests
Pekka
2010-10-26 11:54:25
A:
I believe the layout engine would need to know three things to make this possible:
- Screen resolution
- DPI
- Physical monitor size
As far as I'm aware, it doesn't know all three.
Bobby Jack
2010-10-26 11:38:37
DPI is dots per inch. 1/DPI is inches per dot. That alone is enough to calculate. So he needs either 2., or 1. and 3.
Alin Purcaru
2010-10-26 11:48:14
Unfortunately, both the known values need to be *correct*, whereas most users leave the DPI at the default of 96 (which may be correct - or not). Voila GIGO: bogus DPI in, bogus physical dimensions out.
Piskvor
2010-10-26 12:05:24
Aaaand I was wrong - newer monitors do report their DPI to the OS, and browsers indeed do pick up on it. http://en.wikipedia.org/wiki/Extended_display_identification_data
Piskvor
2010-10-26 12:15:22
I can change my DPI without changing my screen resolution. Or is that what's referred to by "correct"?
Bobby Jack
2010-10-26 12:26:20
A:
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.
Spudley
2010-10-26 11:43:43
+3
A:
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.
Tomas
2010-10-26 11:44:20
Just gave this a try - the result is not even close to the number given. Also, **unit** not **suffix**.
Yi Jiang
2010-10-26 11:51:39
Well it works on my 3yo asus laptop to the mm. I don't have any statistics ready but I guess laptops will generally have more chance of success.
Tomas
2010-10-26 11:54:09
I still don't think browsers will render this correctly, but it's worth a try. But you'll need to test it with a variety of platform/monitor combinations before you can be confident it's working accurately.
Spudley
2010-10-26 11:58:46
+1 this works perfectly on my Desktop machine. JSFiddle [here](http://jsfiddle.net/8cUfM/) - it would be especially interesting to know whether it works with older systems and CRT monitors
Pekka
2010-10-26 12:04:52
This works, but the rendering engine will have the final say in the precision of the result. Some browsers are better than others, some printer drivers are better etc. Note that 25cm <> 10in whereas 25.40 is closer (1cm = .3907008in rounded)
Mark Schultheiss
2010-10-26 12:15:54
@Pekka 19 inch LCD monitor, 1440x900, Ubuntu Linux running Firefox 3.6. The measured length is 1.5cm longer than the specified length at 21cm.
Yi Jiang
2010-10-26 12:18:06
A:
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.
Richard
2010-10-27 10:08:18