Measurement Methodology

This page documents how every number on this site is produced, so you can check the reasoning rather than take the ruler on trust.

The problem: a browser does not know how big your screen is

A web page can read the screen resolution (for example 1920 × 1080) and the devicePixelRatio, but no browser API reports the physical width of the display in millimeters. Without that information, "1 cm" on a web page is a guess.

Browsers resolve that guess with the CSS reference pixel: by convention, 96 CSS pixels equal one inch. On a display whose real density is not 96 pixels per inch — which includes many displays — a 96-pixel box is not one inch wide. This is why an uncalibrated online ruler is only an estimate.

Three kinds of "pixel"

The ruler needs CSS pixels per inch, which is PPI ÷ DPR. Once that number is known, every tick is drawn at an exact position: one inch equals PPI ÷ DPR CSS pixels, one millimeter equals that value divided by 25.4.

Calibration method 1: bank card

Use a bank card only when you know it follows ISO/IEC 7810 ID-1: 85.60 × 53.98 mm (3.370 × 2.125 in). Choose the card placement and either the long or short reference edge. Align the fixed circle, then move the diamond with direct drag, the slider or +/− controls; fine changes use 0.5 CSS-pixel steps. An edge-only view is available when the whole outline does not fit.

If the selected edge spans w CSS pixels and its known size is m mm:

CSS px per inch = w × 25.4 / m

For example, a long-edge match at 340 px gives 340 × 25.4 / 85.60 ≈ 100.9 CSS px per inch, so 1 mm ≈ 3.97 px. The result is saved for the current browser mapping and still needs a physical check.

Calibration method 2: screen diagonal

If you know the display's diagonal size in inches (from its specification), the ruler combines it with the dimensions that the browser reports in CSS pixels:

CSS px per inch = sqrt(screen.width² + screen.height²) / diagonal_in

A browser reporting 2560 × 1440 CSS px for a 27-inch active picture area gives sqrt(2560² + 1440²) / 27 ≈ 108.8 CSS px per inch.

screen.width and screen.height are the browser's current CSS-pixel mapping, not a promise of the panel's native device-pixel resolution. The ruler records the current DPR only so it can warn if that mapping later changes; the formula does not divide by DPR again. The diagonal you enter must describe the active picture area, not the bezel-to-bezel size. Marketing sizes are usually rounded (a "27-inch" panel may be 26.9 in), which is a small but real error source.

What invalidates a calibration

• Browser zoom. Zooming to 125 % makes every CSS pixel cover 1.25× more device pixels, so a calibrated ruler draws 25 % too large. The ruler stores the DPR at calibration time and warns when it changes; Ctrl/Cmd + 0 resets zoom.
• Pinch zoom on touch devices, detected through visualViewport.scale.
• A different display. Calibration belongs to one screen. Moving the window to another monitor requires calibrating again.
• Operating-system scaling changes (Windows 125 % → 150 %, macOS display resolution presets) change the DPR and therefore the mapping.

Physical error sources the software cannot remove

• Parallax. Looking at the object and the screen from an angle shifts the apparent alignment by roughly the panel's cover-glass thickness times the tangent of the viewing angle. View straight on.
• Cover glass, protectors and curved panels. The image sits below the surface you touch; a curved monitor also stretches distances near the edges.
• Reading resolution. A tick cannot be finer than a CSS pixel. Its physical size depends on the calibrated CSS PPI: at 96 CSS px per inch, one pixel is 0.26 mm; at 150 CSS px per inch, it is 0.17 mm. This is display resolution, not a blanket accuracy guarantee.
• Adjustment granularity. Fine controls change the reference by 0.5 CSS px. Its relative contribution is 0.5 / referenceCssPixels, so it depends on the selected edge and current mapping.

Unit conversion

The converter uses the exact definition 1 in = 25.4 mm and the metric relations 10 mm = 1 cm, 1000 mm = 1 m, 12 in = 1 ft. Pixel conversions use the estimated or saved CSS px per inch value shown for the current screen. Only the px row depends on this mapping; conversions among physical units do not. Fractional inches are rounded to the nearest 1/16 and reduced (8/16 is shown as 1/2).

Image measurement

The photo tool sets a scale from one reference distance you mark: if a known 200 mm ruler spans 800 image pixels, the scale is 4 px/mm and every other distance in the image is divided by 4. Angles are computed from the three points you click and do not depend on the scale.

That scale is only valid for objects in the same plane as the reference and facing the camera squarely. Perspective foreshortens distances that recede from the camera, and wide-angle lenses bow straight lines near the edges of the frame. An error in the reference length propagates proportionally: 2 mm off on an 85.6 mm card is about 2.3 % on every measurement. The tool reports lengths to two decimal places in the selected unit and angles to 0.1°. That is display precision, not an accuracy claim.

What we do not claim

We do not publish a single accuracy figure, because the result depends on the display, the calibration and how you hold the object. Instead, the accuracy page shows how to check your own setup in under a minute. Report anything that does not add up through the contact page.