gizmobench

Online Ruler

Every ruler drawn on a screen has to answer one question before it can be right: how large is a pixel on this display? No browser will say, so the usual answer is the CSS convention of 96 pixels to the inch, which is a rule about page layout rather than a fact about your screen. A 13.6-inch laptop reporting 1512 pixels across fits about 131 of them into a real inch, so its CSS inch is roughly three quarters of one, while a 24-inch monitor at 1920 fits about 92 and its CSS inch runs slightly long. This ruler refuses to pretend it knows. It is marked uncalibrated until you lay a bank card, an A4 sheet or a Letter sheet against the rule and match the marker to its edge, and only then does it call anything a length. It prints the scale it worked out, so you can check the rule against a real one, and it clears the calibration when the page zoom, the display or the window width changes, saying what it saw change.

Hold a bank, credit or ID card against the rule and match the marker to its right edge.ISO/IEC 7810 ID-1, 85.60 mm wide, the size of every bank and credit card

Not calibratedA zoom or a screen change clears it
Units
Calibrate against
Selected
0 px, not a length yet

Not calibrated yet, so these marks are not a measurement. Lay a bank card or a sheet of paper against the rule, match the marker to its edge, and the marks become real inches and centimetres.

Click or drag anywhere on the rule to move the edge. With the marker focused, the arrow keys move it one pixel at a time and shift with an arrow moves ten, so you can land on an exact figure. Nothing you do here leaves your browser: the calibration is kept on this device only.

  • An object of a known width, matcheda bank card is 85.60 mm under ISO/IEC 7810 ID-1
    sets the scale for every mark on the rule
  • Nothing matched yetno reference given
    marked uncalibrated, and no length is shown
  • The page zoom changesthe reference no longer holds
    the calibration is cleared and the rule asks again
Exact to the reference you calibrate it against, and marked uncalibrated until you do. A browser cannot ask your display how large it is, so an uncalibrated screen ruler is a guess, and a page zoom or a screen change clears the calibration because the reference no longer holds. The marks you see before calibrating are drawn at the CSS scale of 96 pixels to the inch, which is a rule about page layout rather than a measurement of your display. A 13.6-inch laptop reporting 1512 pixels across fits about 131 of them into a real inch, so its CSS inch is roughly three quarters of one; a 24-inch monitor at 1920 fits about 92, so its CSS inch runs slightly long instead. The error has no fixed size and not even a fixed direction, which is why nothing here is called a length until you have matched the rule against a card or a sheet of paper. Once you have, hold a real rule against the screen: the two should agree.

Common questions

How can a ruler on a screen be accurate?
By being told, once, how large a pixel is on your display. Nothing in a browser reports the physical size of a screen: a page is handed a pixel count and never a width in millimetres, which is why an uncalibrated on-screen ruler is a guess. This one asks you to match the rule against an object whose true width is a published standard, works the pixels per millimetre out of that single division, and prints the figure so you can check it. From then on the marks are exact to the object you matched, which for a bank card means 85.60 mm across.
What can I use to calibrate it?
Three things most people have within reach. A bank, credit or ID card is 85.60 mm wide under ISO/IEC 7810 ID-1. An A4 sheet is 210 mm along its short edge. A US Letter sheet is 8.5 inches, which is 215.9 mm exactly. Hold one against the rule, drag the marker to its far edge, and press Use this measurement. If you would rather use something else whose length you know, choose Type a length and enter it: decimals and mixed fractions such as 3 1/2 are both accepted.
Why did my calibration disappear?
Because the page zoom, the display or the window width changed since you set it. Zoom is the one that really matters: it rescales every pixel on the page, so a rule calibrated at 100 per cent is wrong at 110. A move to a second screen does the same. A resized window does not actually change the size of a pixel, but from inside a page a resize and a Safari zoom look like the same event, so that clears the calibration too rather than leave you a rule that is quietly the wrong size. The page says which of the two changes it saw, and matching a card again takes a few seconds.
Can I measure in centimetres as well as inches?
Yes. The Units switch redraws the rule in centimetres, with a mark at every millimetre, a longer one every five and a numbered one every centimetre. Inches are drawn in quarters and are also read out as a fraction to the nearest sixteenth, so 2.94 inches shows as 2 15/16. The calibration itself does not change with the unit: it is held as pixels per millimetre, and both scales come off that one number.
Does it work on a phone?
Yes, and a phone is the easiest case, because a card lies flat against the glass. Drag the marker to the card's edge with a finger, and the marker is a wider target on narrow screens so it is easy to catch. Turning the phone changes the viewport width and clears the calibration, so calibrate in the orientation you are going to measure in.
Why does it show pixels before I calibrate?
Because a pixel count is the only true thing it has at that point. The marks are drawn at the CSS scale of 96 pixels to the inch so that there is something on screen to drag, but that scale is a layout convention rather than a measurement of your display, so the readout says how many pixels you have selected and never how many inches. Calibrate, and the same selection becomes a length.
Is anything I measure sent anywhere?
No. The scale is worked out in your own browser and kept on this device under a single storage key. Nothing about it is uploaded and there is no account. If storage is blocked, the ruler still works for as long as the page is open and simply forgets the calibration when you leave, and the Start over button above the tool clears it deliberately.
How precise is the measurement?
As precise as the match you made, and no more. The scale is a single division, the object's true width by the pixels you dragged across it, so an error in the drag carries straight into every later reading. Two pixels off the edge of a bank card is about half a per cent, which is a third of a millimetre over 60 mm. Matching the short edge of an A4 or Letter sheet instead spreads the same two pixels over two and a half times the distance and cuts the error to about a quarter of a per cent. When a drag will not sit still, the measuring edge moves one pixel at a time with the arrow keys and ten pixels with shift.

Exact to the reference you calibrate it against, and marked uncalibrated until you do. A browser cannot ask your display how large it is, so an uncalibrated screen ruler is a guess, and a page zoom or a screen change clears the calibration because the reference no longer holds.