The Problem: Display Pixel Density

Every display has a different pixel density. The web long assumed 96 pixels per inch (PPI) — a standard set in 1996 when most monitors were 1024×768 at 15 inches. That assumption is now wildly outdated.

27" 4K monitor: ~163 PPI
15" MacBook Pro: ~220 PPI
27" iMac 5K: ~218 PPI
iPhone 15: ~460 PPI
Samsung Galaxy S24: ~589 PPI

An uncalibrated online ruler assumes 96 PPI. On a 460 PPI phone, that's a 380% error — a 1-inch measurement displays as 2.6 inches. Most online "rulers" are completely useless.

The Solution: One-Time Calibration

Real Online Ruler measures your screen's actual pixel density once, then stores that value in your browser. After calibration, every measurement is rendered at true physical size.

The tool provides three calibration methods:

1. Auto Detect

Your browser can report your monitor's diagonal size and screen resolution. The tool calculates PPI from this data automatically. This works on most desktop browsers and is the fastest option.

Accuracy: ±5% on desktop. Mobile browsers often don't expose this data, so auto-detect may fall back to default values.

2. Screen Diagonal

You enter your monitor's diagonal size (e.g., "27 inches") and the tool reads your screen resolution. It calculates PPI exactly: PPI = √(width² + height²) / diagonal

Accuracy: ±1% if you know your monitor's true size. Most monitor specs are within ±0.1 inches.

3. Credit Card Reference

An ISO/IEC 7810 ID-1 credit card has a standardized length of 3.370 inches (85.6 mm). You place a card against your screen and align the ruler's markings with the card's edges. The tool calculates your screen's PPI from the pixel distance between those marks.

Accuracy: ±2% — limited only by how precisely you can align the card and read the ruler.

Measurement Units

The ruler displays dual-scale: centimetres on the top edge, inches on the bottom edge. Both scales update simultaneously from the same calibrated PPI value.

Centimetres: 1 cm = 10 mm. Marked in 1 cm increments with 5 mm subdivisions.
Inches: 1 inch = 2.54 cm. Marked in 1-inch increments with 1/8-inch subdivisions.

Both are mathematically equivalent — 1 inch is always 2.54 cm on any calibrated screen.

The Protractor Tool

The protractor measures angles in screen space. Angles don't require calibration (360° is the same on any screen), but calibration helps you position the protractor accurately on your screen.

The tool displays a 180° semicircle with 1° increments and 5° subdivisions. Rotate it to align with any two lines or edges on your screen.

Accuracy Limits

After calibration, measurement accuracy is limited by:

Physical pixel size: Your display can only show colours at pixel boundaries, not sub-pixel accuracy. This limits precision to ±1 pixel, or roughly ±0.1 mm on a 200 PPI display.
Browser rendering: Different browsers may render text and lines slightly differently due to subpixel rendering and anti-aliasing. The difference is typically <1 pixel.
Calibration precision: The credit card method is limited by how accurately you can align the card. Auto-detect depends on your browser reporting accurate display information.
Screen curve: Curved displays measure differently at edges vs. center due to physical curvature. Use the center of your screen for best accuracy.

Real-world accuracy: For most use cases (design mockups, part measurements, reference checks), expect ±1–2% error after calibration. Always verify critical measurements with a physical ruler.

Data Storage

Your calibration is stored in your browser's localStorage under the key ruler-ppi. This data:

Never leaves your device
Is not transmitted to any server
Persists across browser sessions (survives closing the tab or browser)
Is cleared only if you manually clear localStorage or uninstall the browser
Is device-specific (a different computer or phone will have its own calibration)

Keyboard Shortcuts

For power users:

C — Open calibration dialog
D — Toggle dark mode
R — Switch to ruler
P — Switch to protractor

Browser Compatibility

Real Online Ruler requires:

JavaScript enabled
localStorage support
CSS Grid and Flexbox support
SVG rendering support

Supported on: Chrome/Edge 60+, Firefox 55+, Safari 12+, Opera 47+, and any modern mobile browser.

Why We Built This

Every online ruler we found either didn't calibrate, or had convoluted UX that few people used. Most assumed 96 PPI, which is useless on modern screens. We built Real Online Ruler to be the simplest, most accurate browser ruler available — no account required, free forever, and genuinely pixel-accurate after a 30-second calibration.