How to use an on-screen ruler in real inches and centimetres

A browser reports sizes in CSS pixels, not physical units. The number of pixels per inch differs on every screen, and the operating system also scales the picture. An uncalibrated ruler therefore guesses, and it can be off by a large margin. Calibrating against an object of known size removes the guess.

The screen ruler uses any standard bank or credit card, which is 85.6 × 54 mm, as the reference.

• Take a bank, credit or ID-1 sized card.
• Hold it flat against the screen, aligned with the on-screen card.
• Drag the slider until the on-screen card matches the width of the real one.
• The ruler now shows centimetres and inches for your screen, and the setting is saved on this device.

Place the object against the screen along the ruler edge, with one end at zero, and read the value at the other end. Look straight at the scale to avoid parallax, which makes the reading shift when you view it from an angle. Measure small items such as a screw, a ring, a coin or a ticket this way. For anything longer than your screen, use a physical tape measure.

A few habits make a calibration more reliable.

• Recalibrate if you change the browser zoom, the display scaling or the monitor.
• Use a card without a thick case, and make sure it lies flat.
• Take the reading in the same orientation you calibrated in.
• Remember the ruler is a convenient estimate, not a metrology tool. For precision work, use a calibrated physical ruler or caliper.

The calibration also lets the tool estimate your screen size in inches. That is a handy way to check whether a monitor or laptop really matches its advertised size. If you are checking the display, follow up with the dead pixel test.