23

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

Damir
  • 54,277
  • 94
  • 246
  • 365
  • 1
    For printing reasons or on the screen? – Stefan Steinegger Oct 26 '10 at 11:37
  • 1
    Note that 25cm <> 10in whereas 25.40 is closer (1cm = .3907008in rounded) – Mark Schultheiss Oct 26 '10 at 12:20
  • I'm intrigued: why would you actually want to do this? Are you trying to mimic, for example, an 'actual size' display of a real-life object? – Bobby Jack Oct 26 '10 at 12:31
  • @Mark: the other way around: 1in equals exactly 2.54cm: http://en.wikipedia.org/wiki/Inch#International_inch – Hans Kesting Oct 26 '10 at 13:05
  • @Hans Kesting - yep either way works depending on which "fixed" size you wish to match a bit more closely. – Mark Schultheiss Oct 26 '10 at 22:02
  • I don't see anything strange in this request. There are screens with extremely high resolutions in this world and there will probably be more of them in the future. Design based on pixels will be just too small for such screens and zooming in with Ctrl++ doesn't always work well. – mgol May 08 '12 at 19:07
  • 2
    @m_gol: CSS defines the pixel as an angular measurement, and not an amount of screen pixels: http://inamidst.com/stuff/notes/csspx Therefore, you definitely can base your designs on "CSS pixels". – madprog Feb 09 '16 at 12:17
  • @madprog Agreed. I didn't know better 3.5 years ago. :-) – mgol Feb 10 '16 at 13:16

6 Answers6

22

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
  • 5,067
  • 1
  • 35
  • 39
  • 6
    Just gave this a try - the result is not even close to the number given. Also, **unit** not **suffix**. – Yi Jiang Oct 26 '10 at 11:51
  • 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 Oct 26 '10 at 11:54
  • 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 Oct 26 '10 at 11:58
  • +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 Oct 26 '10 at 12:04
  • @YiJiang what system did you test it on? What kind of monitor? – Pekka Oct 26 '10 at 12:13
  • 3
    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 Oct 26 '10 at 12:15
  • @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 Oct 26 '10 at 12:18
13

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
  • 442,112
  • 142
  • 972
  • 1,088
  • I disagree. On most systems the monitor size can be correctly detected by the operating system, and absolute CSS values can be used. – Tomas Oct 26 '10 at 11:48
  • 1
    @Tomas I have no trust that the browsers translate `cm` values correctly, even if they could. But fair point, I'll test it – Pekka Oct 26 '10 at 11:54
  • 1
    @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 left the building Oct 26 '10 at 11:55
  • @Piskvor in theory, Tomas is right. The *web browser* might in fact be able to detect a Plug&Play monitor's approximate size, at least on Windows, and translate a `cm` size into the correct pixel dimensions. I just don't think any browser vendor has taken the trouble to implement this – Pekka Oct 26 '10 at 11:56
  • @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 Oct 26 '10 at 12:04
  • @Pekka: Interesting. What browser would that be, IE8? BTW could you check what your DPI setting is on that monitor? – Piskvor left the building Oct 26 '10 at 12:08
  • @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 Oct 26 '10 at 12:10
  • 4
    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 left the building Oct 26 '10 at 12:14
  • 1
    @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 left the building Oct 26 '10 at 12:24
  • 1
    That 21cm jsfiddle example is about 2cm more than A4 on my screen. Firefox 3.6, Windows XP. – Bobby Jack Oct 26 '10 at 12:29
  • I made this answer Community Wiki because @Tomas came up with the `cm` idea. – Pekka Oct 26 '10 at 12:31
  • "Not an inch on a screen, which is totally arbitrary based on resolution.." http://css-tricks.com/css-font-size/ 1 in on screen is always 96 pixels. :*( so if your screen resolution or dpi is different your inc will be different in actuality. Inch is just different way of saying cm and all limits apply to that as well. – Muhammad Umer Aug 16 '13 at 12:49
  • @MuhammadUmer that's correct. However, it appears that some devices actually provide their size information to the Operating System, which then can correctly calculate cm or inch values. – Pekka Aug 16 '13 at 12:50
  • http://fiddle.jshell.net/dBNqf/1/show/ at least here, on a 13-macbook pro the size on screen is smaller than it should be. – Vitim.us May 19 '14 at 19:04
  • 1
    @ZachSaucier how can the browser determine anything when it doesn't know the size of the output device? – Pekka Feb 12 '16 at 14:21
  • I suppose I was thinking of it in terms of element sizing, not for media query purposes – Zach Saucier Feb 12 '16 at 14:23
4

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
  • 41
  • 1
  • Great explanation about technical background! You are right: it works in Ubuntu Linux 10.04 (Intel graphics card) with an 1920x1200 24" external display only by accident - just having luck with the hardcoded 96 dpi. Size with the internal Notebook display (high density) is totally wrong - the rectangle from the A4 example is shown as too small. – geekQ Apr 05 '11 at 16:16
2

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
  • 134,786
  • 31
  • 255
  • 325
  • 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 Oct 26 '10 at 11:40
  • @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 Oct 26 '10 at 11:44
  • @Spudley Relax. I wasn't criticizing Chris's answer, just adding a side note – Pekka Oct 26 '10 at 11:46
  • @Pekka -- hehe. sorry; didn't mean to sound critical of you; I was just adding to what you said. :) – Spudley Oct 26 '10 at 11:49
  • @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 Oct 26 '10 at 11:54
1

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
  • 166,037
  • 39
  • 233
  • 307
-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.

Bobby Jack
  • 15,689
  • 15
  • 65
  • 97