On-screen Ruler - Measure in cm and Inches

What does this on-screen ruler do?

It turns your display into a ruler you can hold objects against. The catch with any screen ruler is that a browser only knows CSS pixels, not how large they are on the glass, so the tool asks you to calibrate once and then draws every tick from that single calibrated value: how many CSS pixels make one millimetre.

Two draggable cursors (A and B) mark the ends of what you are measuring, and the readout shows the distance in millimetres, centimetres, inches and the nearest 1/16 inch at the same time.

Calibrating

• Bank card or ID card (recommended). Every credit card, debit card and national ID follows ISO/IEC 7810 ID-1, so it is 85.60 mm wide by 53.98 mm high with a tolerance of ±0.13 mm. Hold it flat on the screen and drag the slider until the on-screen outline matches the physical card. The long edge is more accurate because more pixels span the reference; the short edge fits narrower screens. After that, alignment precision — not the reference — sets the error, so a slip of half a millimetre is roughly 0.6%.
• Screen diagonal. If you know the diagonal of the active picture area in inches, the tool computes √(width² + height²) ÷ diagonal from the CSS-pixel screen size. Marketing sizes are rounded and describe the panel, not the bezel, so treat this as the rougher method.

Reading the scale

• The ruler shows centimetres above the centre line and inches below it, or a single scale if you prefer.
• Drag cursor A and cursor B by their handles, or click anywhere on the scale to drop the nearest cursor at that point. Arrow keys nudge the focused cursor; hold Shift for 10-pixel steps.
• Drag the small triangle to move the zero point when the object starts at the screen edge, or turn the ruler vertical for taller items.
• The measurement can be copied as a text report or downloaded as JSON.

Accuracy and limits

A calibrated screen ruler is typically good to about ±0.5 mm near the calibrated edge. Two things invalidate a calibration, and the tool warns about both instead of silently correcting: browser zoom (which changes how much glass one CSS pixel covers) and moving the window to a display with a different pixel density. A DPR change is ambiguous — it can be zoom or a different monitor — so only a physical check settles it. Uncalibrated readings fall back to the CSS reference pixel of 96 PPI and can be off by 10% or more. For sub-millimetre work, use a real ruler or a caliper.

Privacy

Everything runs in your browser. Calibration is stored locally in your own browser storage, nothing about your device or screen is uploaded, and the ruler keeps working offline once the page has loaded.

FAQ

Why is the ruler wrong out of the box?

Because no browser reports the physical size of a display. CSS defines 96 pixels as one inch, which was true on 1996 monitors; on a phone or a Retina laptop the same 96 CSS pixels cover much less than an inch. Calibrating once fixes it.

Why does it warn after I zoom the page?

Zooming changes the size of a CSS pixel, so a scale calibrated at 100% is 25% too large at 125% zoom. Press Ctrl/Cmd + 0 to return to 100%, or calibrate again.

Which calibration method is best?

The card: the reference is physical and exact to ±0.13 mm, so the remaining error is how well you line up the edges. The diagonal method is a good second choice when you know the panel's real diagonal, but rounded marketing sizes and OS scaling reduce its accuracy.

Can I measure with two rulers?

Yes. Hold a physical ruler against the screen and compare — the long edge of a bank card should read 8.56 cm / 3.370 in, and the short edge 5.398 cm / 2.125 in. If the gap grows over a longer span, your calibration value is off by a percentage rather than by a fixed amount.