Measure anything
Drag across a thing and a dimension line gives its size, read from the browser’s own layout.
Ag
Drag from one edge to another. The line snaps to what it finds and writes the distance in its own gap.
Tag
Drag to measure between any two points. Point at a thing, or Tab to it, for its width and height. The last six lines stay.
How it works
Every number is read from the browser’s own layout at the moment you ask, in CSS pixels. Resize the window and measure again: the figures change, because the things did.
The ends of a line snap to the nearest edge on each axis, and a line that is nearly level or nearly plumb becomes exactly that.
- Input
- Drag, hover, or Tab through the specimen
- Drawn with
- An SVG laid over real elements
- Work
- One attribute write per pointer move
- Reduced motion
- The same; nothing here is animated
Made for the fun of it. The paid work gets the same pen.