Screen Ruler

An on-screen pixel ruler and protractor calibrated to your display DPI; measure lengths and angles directly in the browser, entirely client-side.

1. Calibrate Your Display

Your browser reports 96 CSS pixels per inch, but the real density of your screen may differ. Calibrate for accurate physical measurements; hold a standard bank/credit card (85.60 mm wide) against the bar below and drag the slider until the on-screen bar matches its width.

Adjust card width

Or enter DPI/PPI directly

PPI

Calibrated density: 96 PPI (37.8 px/cm)

2. Measure

Orientation

Units

Length —

Drag the ruler to reposition; drag the darker end grip to resize.

Measured angle 0.0°

Drag the protractor body to move it; drag either arm endpoint to set the angle between the two arms.

How It Works

Why calibration matters

Web browsers assume a reference density of 96 CSS pixels per inch. On most real displays the true pixel density (PPI/DPI) is different — a 27" 4K monitor is around 163 PPI, a typical laptop 130–220 PPI, and phones often exceed 400 PPI. Without calibration, a "centimeter" drawn on screen is not a real centimeter. By matching the on-screen bar to a known physical object (a bank card is exactly 85.60 mm wide per the ISO/IEC 7810 ID-1 standard), the tool learns your true pixel density and can convert screen pixels to real-world millimeters, centimeters and inches.

The math

PPI = card width in pixels ÷ 3.370 in (85.60 mm ÷ 25.4).
px → mm: mm = px ÷ PPI × 25.4
px → cm: cm = mm ÷ 10
px → in: in = px ÷ PPI

The protractor

The protractor measures the angle between two draggable arms sharing a common vertex. Each arm's direction is computed with Math.atan2(dy, dx); the reported angle is the absolute difference between the two directions, normalized to the 0–360° range. It is independent of DPI since angles are dimensionless.

Privacy

Everything runs locally in your browser using the Canvas and SVG APIs; no image, measurement or calibration value is ever uploaded. Your calibration is stored only in this browser via localStorage.

Tip: Browser zoom and OS display scaling change the effective pixel size. Keep your browser at 100% zoom and re-calibrate if you change monitors or scaling.

Embed This Util

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML:

Copy snippet Adjust the height to taste.

Related Utils

Aspect Ratio Calculator CSS Border Radius Font Size Reference Placeholder Images

Feedback

Help us improve this page by providing feedback, and include your name/email if you want us to reach back. Thank you in advance.

Share with