Screen ruler · distances on the screen, not against it

A screen ruler for things that are on the screen

This is the other measuring job. The ruler on the front page measures physical objects held against the glass, and it needs a calibration before it can say anything in millimetres. This page measures the distance between two marks you place on the screen — an image, a gap, a control, a rendered design — and that distance is a layout quantity the browser laid out itself, so the pixel figure is exact and no calibration is involved in it at all. Drag either end of the line below, or move it a pixel at a time with the arrow keys.

Length240 CSS px Device px240 · dpr 1 assumed Millimetres63.50 mm assumed Inches2.500 in assumed Axisacross the screen Scaleuncalibrated — 96 CSS ppi assumed

UNCALIBRATED — assumed 96 CSS ppi

The pixel figures are exact: they are the layout distance between the two marks, in the unit the browser lays everything out in. The millimetre and inch figures are that same distance divided by the CSS specification's fixed 96 pixels per inch, which is a definition rather than a measurement of your screen.

Window: not measured yet

Which way the line runs Across the screen Down the screen

Millimetres and inches here are the CSS assumption of 96 pixels per inch, not a measurement of this display, and this page does not read the calibration the ruler stores. For millimetres that are actual size, calibrate on the ruler page.

JavaScript is switched off, so the line cannot be moved and nothing on this page has read your display. The numbers above describe the line exactly as it is served — 240 CSS pixels long, drawn from 40 to 280 across the window — with the device-pixel ratio taken as 1 because none has been reported. They are arithmetic on a served length, not a measurement of anything you can see.

Check the line against a length the page already knows

A measuring tool that cannot be checked is a measuring tool you have to take on trust. These three bars are drawn at exact CSS-pixel widths, so laying the line over one is a test with a right answer: with the two marks on the two ends of the 240-pixel bar, the readout must read 240 CSS px. Your eye is what lines the marks up, so expect a pixel or two either way; what the check catches is a readout that is out by more than that, which would mean the marks are not where they appear to be and nothing else on this page should be believed.

96 CSS px — one CSS inch, by definition rather than by measurement
100 CSS px
240 CSS px — the length the line is served at

The comb along the line is one mark every 10 CSS pixels. Zoomed a long way out those marks land closer together than three device pixels and stop reading as marks at all, so the comb is dropped and a note says why — the same legibility floor the ruler applies to its millimetre graduations. The length in the readout is unaffected either way, because it is a distance rather than a count of marks.

What a pixel means here, and what it does not

px on this page means CSS pixel. It is the unit the browser lays everything out in and the unit your developer tools report: the number in width: 240px, the number getBoundingClientRect() returns, the number a media query compares. The CSS specification fixes 96 of them to an inch, which is why the millimetre column can be computed at all — and also why that column is an assumption rather than a measurement.

What a CSS pixel is not:

Not a pixel of your panel. On a display with a device pixel ratio of 2, one CSS pixel is drawn with two device pixels on each axis. The device-pixel figure in the readout is that arithmetic — the CSS length times the ratio your browser reports — and not a count of pixels anyone lit.
Not fixed against zoom. Browser page zoom changes how many device pixels a CSS pixel is drawn with, and on Chrome, Edge and Firefox it moves the reported ratio with it. A CSS pixel is a layout unit, not a length.
Not the pixel of a screenshot. Screen captures are taken in device pixels, so a 240 CSS px element is 480 pixels wide in a screenshot on a ratio-2 display and 240 on a ratio-1 one. Measuring the screenshot and measuring the screen give different numbers, and both can be right.
Not an image's own pixels. An image displayed 240 CSS pixels wide may hold 240, 480 or 1,024 pixels of source data. This page measures the space it occupies on screen, which is the question about layout, not the question about the file.
Not a millimetre until something has measured your screen. That measurement is what the calibration is for, and it earns a stated error band; the figure here earns none because it assumes rather than measures.

What this can and cannot reach

The line is fixed to the browser window and can be laid over anything drawn inside it, including everything on this page. It cannot reach outside that window: a web page cannot see another tab, another application, or your desktop, and this one does not try. There is no screen capture here, no file to choose, no camera and no clipboard read — the site has no way to take in content of any kind, which is a design property rather than a setting.

So the honest scope is this. For a distance inside a browser window the readout is exact in CSS pixels. For something on the rest of your screen, the tool that applies is a physical one held against the glass, and the page for that is the calibrated ruler — which measures the object rather than the screen, and prints the band it earns.

What is measured, how it is kept, and what it cannot tell you

What is measured. One quantity: the distance between the two marks, along the axis the line runs, in CSS pixels. It is exact by construction — both marks are positioned by this page, in the same coordinate system the browser lays the rest of the window out in, so the figure is a layout distance rather than an estimate of one. Two figures are derived from it and are labelled as derived: the device-pixel count, which is the length multiplied by the ratio the browser reports, and the millimetre and inch figures, which divide by the CSS specification's fixed 96 pixels per inch.

How it is kept. It is not kept. This page writes nothing to your browser's storage, reads no calibration from it, sets no cookie and sends nothing anywhere; move the line, reload, and it is back where it started. The one thing carried between visits is whatever you put in the address bar, because the line's axis and length can be set from the URL — and an axis or a length that is not one this page can draw is refused by name and printed, rather than quietly replaced with a default.

What it cannot tell you. It cannot tell you how large anything is in millimetres on your actual glass; only a calibration against an object of known size can do that, and no ruler in a browser can detect a swap to a different monitor of the same resolution even after one. It cannot see outside the browser window. And it cannot tell you an image's own resolution — an element 240 CSS pixels wide may be drawn from far more source pixels than that, or far fewer.

Questions

What exactly does px mean on this page?

A CSS pixel: the unit the browser lays out in, the one your developer tools report in the box model, and the one the CSS specification fixes at 96 to an inch. The length in the readout is the distance between the two marks in that unit, and it is exact because this page positions both marks itself rather than estimating where they landed.

Why are the millimetres marked assumed?

Because nothing on this page has measured your screen. The millimetre figure is the CSS pixel length divided by 3.7795 pixels per millimetre, which is the specification's definition of an inch as 96 pixels, and that definition is right only on a display that happens to be 96 pixels per inch. Matching a bank card on the ruler page replaces the assumption with a measurement of your own display and prints the error band it earns.

Can this measure something outside the browser window?

No. A web page cannot see another tab, another application or the desktop, so the line can only be laid over what is drawn inside this window. There is no screen capture, no file input, no camera and no clipboard read anywhere on this site. For something physical, hold it against the glass and use the calibrated ruler instead.

Is a CSS pixel the same as a pixel in a screenshot?

Usually not. Screen captures are taken in device pixels, and on a display with a device pixel ratio of 2 an element 240 CSS pixels wide is 480 pixels wide in the capture. The readout prints both figures side by side for that reason, and the device-pixel one is arithmetic on the ratio your browser reports rather than a count of pixels anyone lit.

Does this page store or send anything?

It stores nothing and sends nothing. There is no browser storage written, no cookie, no analytics on any page of this site, and the content security policy served with it allows the page to talk to no origin at all, so the restriction is enforced by the browser rather than described in a paragraph. This page also does not read the calibration the ruler saves, which is why its millimetre column says assumed even after you have calibrated.