On-screen Pixel Ruler
Render a horizontal CSS-based ruler with labels from 0 to 200 in steps of 10.
How to use
- Use the on-page ticks as a visual comparison against CSS-sized interface elements.
Capabilities and scope
The basic runner creates 21 tick elements whose labels are index×10, styled as a visual ruler component.
How it works
Twenty-one equal-structure ticks labeled 0,10,20...200 are rendered by CSS layout.
Example
You can place the 0-to-100 portion visually beside an element to compare approximate CSS size.
Useful for
- Visually compare rough CSS distances or spacing in the browser UI
Before you use it
- It is not a physical mm/cm ruler; browser zoom, DPR, and CSS layout change physical length, so it is not calibrated measurement.
Frequently asked questions
Does the 200 label mean 200 physical pixels?
No. It is a visual CSS-layout ruler and is not calibrated to physical pixels or millimeters.