Health & Life Runs locally Ready to use Built-in examples No tracking

Online Ruler

Turn your screen into a calibrated ruler: align a bank card (85.6 mm, ISO size) to set pixels-per-millimetre, then read real sizes off the mm scale or convert a pixel length to mm, cm and inches at once - fully local.

Measuring something small — an earbud tip, a screw diameter, a stamp — with no ruler to hand is quickest done by holding it against the screen. The difficulty is that pixel density differs on every display, so a default scale is usually wrong; this tool uses a bank card as a reference object, and one slider drag completes the calibration so the scale becomes a trustworthy real size.

The logic of the calibration is simple: the short edge of a bank card is 85.6 mm by international standard, so the calibration value is adjusted until that distance on screen lines up with the card exactly, after which every mark is true to size. A pixel length — say one measured in a screenshot — can also be entered directly for conversion, giving millimetres, centimetres and inches at once, which covers sewing, 3D printing and comparing sizes when shopping abroad.

—
—

How to use

  1. Hold a bank card against the screen and align the 85.6 mm mark.
  2. Drag the calibration slider until the scale matches the card.
  3. Read real sizes off the millimetre scale.
  4. Or enter a pixel length to convert it to mm, cm and inches.

How it works

Why calibration is needed

The physical length of on-screen tick marks depends on pixel density (PPI), so the same page's millimeter length is completely different on a phone and a monitor; calibration measures "how many pixels equal 1 mm on your screen," and all readings rely on that conversion.

How to calibrate without a bank card

Most transit cards, credit cards and ID cards (85.6 mm wide) follow the ISO 7810 ID-1 spec, and any one can calibrate; without a physical card, you can display this tool's 85.6 mm reference segment on another screen to align.

How long an object you can measure

The ruler renders a 20 cm range by default, enough for small items like earphones, keys and stamps; longer objects can be measured in segments and summed, or converted directly with the pixel-length input box, unlimited by render width.

Do I need to recalibrate after switching screens

Yes. After changing monitors, adjusting system scaling or browser zoom, pixel density changes and the old calibration is distorted — just drag the calibration slider again, a matter of seconds.

Code example

JavaScript Screen millimetres (calibrate first, then measure) 

// the browser only exposes CSS pixels: 1in is always 96px, but how many CSS pixels a real
// inch takes depends on the device — so calibrate px/mm with a known object first
// (a bank card is 85.6mm wide by ISO standard)
const PX_PER_MM_DEFAULT = 96 / 25.4;          // ~ 3.7795, the CSS spec assumption

function calibrate(knownMm, measuredPx) {
  return measuredPx / knownMm;                // user drags the card onto the ticks
}

function drawTicks(canvas, pxPerMm) {
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let mm = 0; mm * pxPerMm <= canvas.width; mm++) {
    const x = mm * pxPerMm;
    const len = mm % 10 === 0 ? 18 : (mm % 5 === 0 ? 11 : 6);   // major / half / minor
    ctx.beginPath();
    ctx.moveTo(x, 0);
    ctx.lineTo(x, len);
    ctx.stroke();
  }
}

CSS A rough ruler with no JavaScript at all (CSS units) 

/* CSS mm/in are converted at 96 CSS px per inch, so they need a correct system DPI */
.ruler {
  height: 40px;
  background-image: repeating-linear-gradient(
    to right,
    #333 0 1px, transparent 1px 1mm      /* one minor tick per millimetre */
  );
}
.ruler .tick-10 {
  background-image: repeating-linear-gradient(
    to right,
    #111 0 2px, transparent 2px 10mm     /* one major tick per centimetre */
  );
}

FAQ

Is the online ruler accurate?

After calibration, precision depends on screen pixel density and how carefully you align, within half a millimeter on ordinary screens; for crucial dimensions of valuable items, use a physical ruler — this tool suits quick estimates.

What's the principle of card calibration?

The ISO 7810 card's 85.6 mm short side is a globally uniform physical size; align it to the on-screen scale and the "pixels-to-millimeters" calibration is done, far more reliable than eyeballing.

Can it be used on a phone?

Yes, phone screens calibrate and measure too; note that some mobile browsers' pinch-zoom gestures change pixel mapping, so after calibrating don't zoom the page, or recalibrate.

Is measurement data uploaded?

No. Calibration, rendering and conversion all run in the browser, with no upload step and no access to your camera or gallery.

What if I can't remember the calibration value?

On the same device without changing screen scaling the value is basically unchanged, so note the number and enter it next time; after a browser refresh it returns to the default 3.78 — just drag again.

Why is the default calibration 3.78?

It's the theoretical value at 96 dpi (the traditional Windows logical resolution), i.e. 96 pixels / 25.4 mm; it's only a starting point, and real screens nearly always need calibration correction.

Can it measure curved or uneven objects?

The screen ruler measures the flat projection against the screen; for curved objects (soft tapes, cables), straighten and measure in segments, or use the pixel-length input for conversion.