Real SizerCSS pixel ruler · page layout distances
Measure page layout with a CSS pixel ruler
Drag either end of the line below to measure a distance inside this page: across an image, a gap, a control or a rendered design. The arrow keys move a focused end one CSS pixel at a time. The CSS-pixel length is exact because the browser positioned both marks. This layout tool does not use your saved physical calibration, so its millimeter and inch figures rest on the CSS specification's assumption of 96 pixels per inch. For actual-size physical units, go back to the calibrated ruler.
CSS PIXEL MODE: saved physical calibration not used
The pixel figures are exact: they are the layout distance between the two marks, in the unit the browser lays everything out in. Millimeters and inches use a fixed 96 pixels per inch from the CSS specification, a definition that does not depend on your screen.
Window: not measured yet
Millimeters and inches here use the CSS assumption of 96 pixels per inch, and this page does not read the calibration the ruler stores. For millimeters that are actual size, calibrate on the ruler page.
Check the line against a known length
The three bars below are drawn at exact CSS-pixel widths, so you can test the line against them. Put the two marks on the two ends of the 240-pixel bar and the readout must say 240 CSS px, within the pixel or two your eye adds when it lines the marks up. A bigger difference means the marks are not where they appear to be, and then no other figure on this page can be trusted.
- 96 CSS px, one CSS inch by definition
- 100 CSS px
- 240 CSS px, the length the line starts at
The comb along the line has one mark every 10 CSS pixels. Zoomed far out, those marks land closer together than three device pixels and blur into a band, so the page drops the comb and a note says why. The ruler uses the same legibility floor for its millimeter graduations. The length in the readout is the distance between the two ends, so dropping the comb does not change it.
What a CSS pixel is
On this page, px 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. That fixed ratio is how the millimeter column is computed, and it is why that column is marked assumed.
Where a CSS pixel differs from what you might expect:
- Your panel's own pixels are device pixels. On a display with a device pixel ratio of 2, one CSS pixel is drawn with two device pixels on each axis, and the readout's device-pixel figure applies that ratio to the CSS length.
- Browser page zoom changes how many device pixels draw one CSS pixel, and on Chrome, Edge and Firefox it changes the reported ratio too. A CSS pixel is a unit of layout, so its size on the glass moves with zoom.
- A screenshot counts device pixels: 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.
- An image displayed 240 CSS pixels wide may hold 240, 480 or 1,024 pixels of source data. This page measures the space the image takes up in the layout; the file's own pixel count is a separate number.
- A CSS pixel becomes a real millimeter figure only after something has measured your screen. That is what the calibration does, and it comes with a stated error band. The millimeter figure here has no band because it is assumed.
What the line can 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, because a web page cannot see another tab, another application or your desktop. The site has no screen capture, no file picker, no camera and no clipboard read, so it has no way to take in content of any kind.
For a distance inside a browser window, the readout is exact in CSS pixels. To measure a physical object, use the printable ruler or another physical ruler, and keep anything hard or abrasive away from the display. The separate calibrated on-screen ruler uses only a clean, smooth-edged card held just above the display without touching it, and prints the error band that match 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. This page positions both marks in the same coordinate system the browser uses for the rest of the window, so the figure is an exact layout distance. Two figures are derived from it and labelled as derived: the device-pixel count, which is the length multiplied by the ratio the browser reports, and the millimeter 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 and reload, and it is back where it started. The only thing carried between visits is what you put in the address bar, because the URL can set the line's axis and length. If the URL asks for an axis or a length this page cannot draw, the page refuses it by name and prints a note saying so.
What it cannot tell you. It cannot tell you how large anything is in millimeters on your actual screen. 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 a calibration.