Online ruler

Calibrate once against any bank card and this ruler measures true on your screen. The setting is saved on your device.

How it works

An on-screen ruler is only useful if it is honest about one thing: a browser has no idea how physically large your screen is. The CSS inch is a fixed 96 pixels regardless of whether you are on a 13-inch laptop, a 27-inch monitor or a phone, so a ruler drawn straight from CSS units is wrong on almost every device: usually by 10 to 40 per cent.

This ruler solves that the way a workshop solves it: by calibrating against a known reference. Bank cards are manufactured to ISO/IEC 7810 ID-1, which fixes them at 85.60 × 53.98 mm everywhere in the world. Hold any card against the outline, adjust until the two match, and the page now knows exactly how many pixels your screen puts in a millimetre.

From that single measurement everything else follows: the centimetre and inch scales, the marker readout, and the printed output are all derived from your calibrated pixel density. The value is stored on your device, so you calibrate once and the ruler is correct every time you come back.

Nothing is uploaded, and nothing about your screen is sent anywhere: the calibration lives in your browser’s local storage and can be cleared at any time.

How to use it

1 Take any credit, debit or ID card out of your wallet.
2 Hold it against the outline on screen and drag the slider until the two match exactly.
3 Save the calibration. It is remembered on this device.
4 Switch between centimetres and inches and measure against the ruler.

Good to know

Every bank and ID card is the same size by international standard, which is what makes it a reliable reference.
Calibration is per device: a laptop and a phone need separate calibration, and each is remembered.
If you change display scaling or browser zoom, calibrate again, both change how many pixels fill an inch.
The calibration is stored locally and never leaves your device.

Browser support

Chrome 94 and later
Firefox 93 and later
Safari 16.4 and later
Edge 94 and later

These are the oldest versions with everything the tool uses. They are worked out from the tool itself, so they change when it does.

Version numbers checked on 2026-09-04.

Why an on-screen ruler has to be calibrated

A pixel is not a length. When CSS says an element is 96 pixels wide, that is a reference measurement defined against an assumed 96 pixels per inch, and almost no real display is 96 pixels per inch. A 24 inch 1080p monitor is about 92. A 27 inch 4K monitor is about 163. A modern phone is often above 400. Drawing a "one inch" line at 96 CSS pixels therefore produces a line that is one inch on nearly nothing.

The browser cannot tell you the real number. It exposes the viewport in CSS pixels and a device pixel ratio, and neither carries the physical size of the panel. Screen dimensions in millimetres are not available to a web page, deliberately: the exact display geometry is a fingerprinting signal, and browsers have been closing those channels rather than opening them. So a page that claims to draw a real ruler without asking you anything is guessing, and the guess is wrong by up to 70 percent between common displays.

The way out is to calibrate against an object whose size is fixed by international standard and which nearly everyone has. A bank card is exactly that. ISO/IEC 7810 ID-1 specifies 85.60 by 53.98 millimetres, and it governs every credit card, debit card and most national identity cards worldwide. You hold one against the screen, resize the outline until it matches, and that gives the one number the browser could not supply: how many pixels your display puts in a millimetre.

From that single ratio everything else follows, and it is worth saving, because it is a property of the display rather than of the session. The calibration is stored on your device so the ruler is correct the next time you open it, and the value never leaves the browser, which matters given that it is precisely the kind of display fingerprint the platform declines to hand out.

Two caveats, because they are the usual sources of error. Browser zoom changes the CSS pixel to physical pixel relationship, so a ruler calibrated at 100 percent zoom is wrong at 110 and you should recalibrate rather than compensate. And an external monitor is a different display: calibration follows the screen, not the computer.

Frequently asked questions

How accurate is an online ruler?

Uncalibrated, not very, the browser assumes 96 pixels per inch, which is wrong on most screens. Once you calibrate against a bank card, the ruler is accurate to roughly the width of a pixel, which is well under a millimetre on any modern display.

Why do I need to calibrate it?

A web page cannot ask your screen how physically big it is. Two laptops with the same resolution can have very different physical sizes, so the only way to draw a true centimetre is to measure against something of known size first.

Why a bank card?

Cards are made to ISO/IEC 7810 ID-1, which fixes every credit, debit and most ID cards at 85.60 by 53.98 millimetres worldwide. It is the one precisely-sized object almost everyone has to hand.

Do I have to calibrate every time?

No. The calibration is saved in your browser on that device. Repeat it only if you change your display scaling, change browser zoom, or move to a different screen.

Can I measure something longer than my screen?

Mark the object at the end of the ruler, slide the object along, and measure again, the same way you would with a short physical ruler. Switching to full screen and rotating to landscape also gains you useful length.

Is my calibration or screen information sent anywhere?

No. The calibration is a single number kept in your browser’s local storage. Nothing is transmitted, and clearing your site data removes it.

Your files are processed on your device and are not uploaded. You can verify this in your browser’s developer tools under the Network tab.