How can I display a 5mm grid at the proper scale in a web browser?

Question

I'm creating a web application for displaying ECGs, which are conventionally drawn at fixed scales (10 mm/mV and 25 mm/s) on a 5mm square grid. It's important to use the correct size, because readers compare what they see on-screen with other ECGs that may exist only on paper.

The most recommended solution is to use CSS to style a div such that it has absolute dimensions of (say) 1" by 1", and to use JavaScript to obtain its height and width (see, for example, How to detect the screen DPI using PHP or JavaScript). Obviously, this can work only if the browser knows (or can discover) the answer and can be tricked into revealing it. I tested this method on Linux, Mac OS X, and Windows, using Chrome, Firefox, MSIE, Opera, Safari, and the Android browser on devices ranging from a smart phone (217 dpi) to 19" (108 dpi), 20", and 30" (101 dpi) monitors, and in all cases the reported resolution was 96 dpi. My conclusion is that this approach is less accurate than a broken watch, unless you happen to have a 96 dpi monitor, and I'm looking for something better.

I'm thinking of just displaying a resizable rectangle and asking the user to adjust it to a known size. Has anyone already done this (and if so, how), or does anyone have an alternative suggestion (such as looking up the screen size in a database of monitors)?

I have read related discussions here and elsewhere that quickly turn to the reasons why the absolute size of graphics doesn't matter, only the amount of detail. I understand why this is often true, but it is not so in this case.

Answer 1

Sadly, out of my own experience on a client project, what you suggest is the only reliable option.

The only truly reliable way to do this is to ask the user to calibrate the size against an object of fixed size (a ruler for example). We've tried several other solutions but nothing else worked all of the time.

I made users only do it once when they registered so it was not too big of a hassle (the system had a relatively low number of users who used it a lot of times).

As for how, I had a resizeable div which the user had to calibrate to 1cm, I've made the user calibrate two different divs this way and validated that the difference in size between them was not bigger than x (where x is some accepted value of tolerance). Calibration was done with keyboard keys or dragging the div corner although keyboard keys usually provide better result a lot of people are not that good with a mouse and we got complaints, allowing keyboard input (increase/decrease size) solved most of the complaints. Adding a text box where you specify an amount of pixels (and see the result) might also work.