How to use the online ruler

1. Calibrate for actual size

Every display has its own pixel density. Until you set PPI, ticks are only an estimate (96 CSS pixels per inch). Open Calibrate and pick one method.

• Auto-detect device — matches CSS width, height, and pixel ratio to factory PPI for phones, tablets, and laptops.
• Screen diagonal — type the advertised inches. PPI = √(screenWidth² + screenHeight²) ÷ diagonal.
• Credit card — ISO ID-1 cards are 85.60 × 53.98 mm. Match the blue rectangle, then save. Arrow keys nudge one pixel.

2. Place rulers on the edges you need

Toggle Top, Right, Bottom, and Left independently. A phone usually wants the long edge. A designer checking layout often turns all four on. Click a ruler to drop a dashed guide; Esc clears guides and the last drag-span.

3. Read inches, cm, or mm

Use the unit pills or keys 1 / 2 / 3. Dual-scale prints the other system on the inner side of the stick. Drag on the stage to measure a rectangle; the HUD shows width × height and copies all three units.

Accuracy notes

• Do not pinch-zoom. Reset browser zoom to 100% if the warning chip appears.
• Re-calibrate when you move the window to another monitor.
• OS display scaling is already reflected in CSS pixels; enter the physical diagonal, not a “scaled” size.
• This is not a camera measuring app. For objects larger than the screen, use a tape.