ByteScope

Online Ruler

A ruler on your screen that is actually the right size — calibrate with a credit card, then trust the millimetres.

Your files never leave your browser — all processing is local.

Not calibrated — assuming the CSS default of 96 dpi

1. Calibrate this screen

Hold the object flat against the screen and drag the right-hand edge of the outline until the two match exactly. Everything below then reads in real millimetres.

Standard width
85.60 mm
Implied screen DPI
96 dpi
Pixels per mm
3.780 px/mm
Reference outline at the current calibration

2. The ruler

Millimetres along the top edge, inches along the bottom. On a narrow screen the rule scrolls sideways.

Readout unit
From zero to the line0.0 mm
01020304050607080901001101201301401500in1in2in3in4in5in

Drag the measuring line, or give it focus and use the arrow keys: 1 mm per press, 0.1 mm with Shift held.

What this ruler cannot know

Every number here rests on your calibration drag and nothing else. A page has no way to ask how large your pixels are, so if the outline did not match the real object, the whole scale is off by the same proportion — and it will still look like a perfectly good ruler.

Browser zoom and OS display scaling rescale the CSS pixel, which invalidates a saved calibration. Calibrate at the zoom level you are going to measure at, and calibrate again whenever you change it.

An external monitor is a different screen with a different pixel pitch and needs its own calibration. The page cannot tell that the window was dragged to another display, so nothing will warn you — recalibrate after moving it.

About this tool

A CSS pixel is a fiction: the browser assumes 96 of them to the inch no matter which panel you actually own, so an uncalibrated on-screen ruler is wrong on almost every monitor. This one starts by admitting it. Hold a credit card — ISO/IEC 7810 ID-1, 85.6 mm wide, the same in every country — or a coin against the screen and drag the outline until it matches the real object. From that moment the millimetre and inch scales are true for this screen, and a draggable measuring line reads out a real length.

Why the card is the default

The calibration is only as good as your drag, and the length of the reference decides what a one-pixel slip costs: one pixel out of a coin's roughly 24 mm is a far bigger relative error than one pixel out of a card's 85.6 mm, which is why the card comes first. No card handy? The page also offers a US quarter, a 2 euro coin, a UK one-pound coin, a 500 yen coin, a NT$10 coin, and the short edge of an A4 sheet — the longest reference of all, if there is printer paper nearby. The result is remembered in this browser with localStorage and never sent anywhere.

What breaks the calibration

Browser zoom changes everything — calibrate at the zoom level you will measure at, and recalibrate if you change it. An external monitor is a different screen with a different pixel pitch and needs its own calibration; the page cannot detect that the window moved, so dragging it across without recalibrating silently produces wrong numbers. And the ruler measures the plane of the glass: anything you cannot lay flat against the screen — a curved surface, an object thick enough for parallax to creep in — is outside what it can honestly claim to measure.

Frequently asked questions

Why does an on-screen ruler show the wrong size by default?

Because the browser has no idea how big your pixels are. CSS defines 96 pixels to the inch and every website receives that number whether you own a 14-inch laptop or a 32-inch 4K panel — the real pixel density is never exposed to the page. Matching the scale against an object of known size (a payment card is 85.6 mm everywhere in the world) is the only way to make it true, which is why this ruler asks for a calibration before it claims anything.

Does browser zoom break the calibration?

Yes. Zoom rescales every CSS pixel, so a ruler calibrated at 100% is wrong at 110% by exactly that factor. Calibrate at the zoom level you intend to measure at, and recalibrate whenever you change zoom or the OS display scaling. The stored value belongs to one screen at one zoom level, nothing more.

I don't have a credit card with me — what else can I use?

Any card in the ISO/IEC 7810 ID-1 shape: a debit card, a transit card, most loyalty and gym cards — 85.6 mm wide is the point, not the bank. Otherwise pick one of the offered coins (US quarter, 2 euro, UK one pound, 500 yen, NT$10) or the short edge of an A4 sheet. Prefer the longest reference you have: on a small coin, a one-pixel drag error costs far more accuracy.

Is my calibration uploaded or tracked?

No. The calibration is a single number — how many real millimetres one CSS pixel covers on your screen — kept in this browser's localStorage so you don't redo it on the next visit. It never leaves your device, and clearing the site's data removes it.

How accurate is the ruler after calibrating?

As accurate as your drag against the reference. Matched carefully against a card, staying within half a millimetre over the card's length is realistic, and the error grows proportionally with distance. It will not replace calipers — the drag, your eyesight and the screen's glass all add up — but for checking a screw, a print size or a frame it is honest and repeatable, as long as the zoom level and the monitor stay the same as when you calibrated.

Related tools