How to use ChabuLab Rulers

What does each instrument do?

Ruler

A straight ruler with centimetres and millimetres on one edge and inches on the other. Drag it to move it, turn it with the brass handle, switch it between horizontal and vertical, flip it, and change its length. Move along its edge to see the exact reading at the guide line.

Protractor

A half-circle or full-circle protractor with two arms. Put the centre on a corner, drag the arms along its sides and read the angle; type an angle to set the arms exactly. It reads true angles before you calibrate.

How do I calibrate the ruler?

Calibrate once per screen; the result is saved on this device. Open calibration from the status chip next to the reading or the Calibrate button, then pick a method.

With a card (most accurate)

1. Choose Card. Any bank card, national ID card or card-style driver's licence works: they are all 85.60 × 53.98 mm.
2. Hold the card flat against the screen, its corner in the outline's corner.
3. Drag the outline's edge until it meets the card's edge exactly. For the last bit, use the − and + buttons or the arrow keys: 0.1 mm per step, 1 mm with Shift.
4. Check the height when asked. If the card's short side is off by more than 1 %, the ruler asks you to try again: that catches screens whose pixels aren't square.
5. Done: the chip now says Calibrated and shows the margin, for example ±0.3 mm per 10 cm.

With your own ruler

Hold a real ruler to the screen and stretch the on-screen 10 cm (or 5 in) until it matches the real one. Longer is better: an error of half a millimetre over 10 cm is 0.5 %, over 5 cm it's 1 %.

From your screen size (an estimate)

No card or ruler at hand? Pick your screen's diagonal, for example 14" or 27", and the ruler combines it with the resolution your browser reports. Makers round their diagonals, so this stays marked as an estimate.

On a known phone or tablet

On many popular phones and tablets the ruler recognises the model from its screen and uses the maker's published pixel density, labelled "Estimated from your device model". Calibrating with a card makes it exact.

How do I check the accuracy?

Right after calibrating, hold the card to the second outline the ruler draws: if it fits, you're done; if not, choose Not quite and fine-tune. Later, measure something you know, such as a real ruler's 10 cm: it should read 10 cm within about half a millimetre, before and after you zoom the page.

Why doesn't browser zoom break it?

When you zoom a page, the browser changes how many of your screen's real (device) pixels make one CSS pixel; it reports that number as the device pixel ratio. The ruler stores your calibration in device pixels per millimetre, which zoom never changes, and divides by the current ratio every time it changes. So at 50 %, 100 % or 200 % zoom, 1 cm stays 1 cm.

Pinch zoom on a phone or touchpad works the same way, through the visual viewport's scale. Ticks are placed in millimetres and then snapped to whole device pixels for sharpness, which moves each one by at most half a device pixel, about 0.05 mm on a high-density screen.

How do I use it on a phone?

• Tap Lock before you lay anything on the screen. A locked ruler or protractor ignores touches, so a coin or a screw resting on it can't drag it away.
• Turn the phone sideways for long objects and for calibrating: a card fits across most phones only in landscape.
• Where the browser allows it, the screen stays on while you measure, and full screen hides everything but the tool. On iPhone, Safari has no full screen for web pages: turn the phone sideways and scroll a little so the address bar shrinks.

Keyboard shortcuts

Click or tab to an instrument first; the keys act on the selected one.

Why calibrate?

Every screen is a different size, and browsers don't tell websites how big yours is. Web pages measure in CSS pixels, and the CSS standard defines one CSS inch as exactly 96 CSS pixels, on every screen. That inch is a promise about layout, not about length: how long it really is depends on how densely your screen packs its pixels.

Here is the same 100 CSS pixels on three example screens. Holding a card to the screen once measures the real length for your screen, and the ruler remembers it on this device.

Example screens, drawn to scale relative to each other. Length = 100 × device pixels per CSS pixel ÷ pixels per inch × 25.4 mm.

Some things never need it: angles on the protractor are true on any screen.

Reference sizes

Last checked 2026-10-24.