# Online Ruler

> Turn your screen into a real ruler: calibrate once against a credit card or a coin, then measure in true millimetres and inches with a draggable line.

- URL: https://bytescope.dev/en/online-ruler/
- Locale: en · Also: [ja](https://bytescope.dev/ja/online-ruler.md) · [zh-Hant](https://bytescope.dev/zh-Hant/online-ruler.md)
- Runs: Everything runs locally in your browser — nothing is uploaded.
- Requires: Any modern browser (Chrome, Edge, Firefox, Safari), desktop and mobile.
- Updated: 2026-09-08

## What it does

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.

## Limits

Does not know your screen's physical size without calibration against a card or coin; measurements are only as accurate as that step.

## FAQ

### 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

- [Printer Test Page](https://bytescope.dev/en/print-test-page.md) — Print a test sheet with colour patches, black ink coverage, an alignment grid and hairline targets.