Online ruler

A web page cannot ask the screen how large its pixels are. Browsers lay pages out in CSS pixels, and the W3C's CSS Values and Units module fixes the inch at a set number of them. The same text warns that on screens these units might not match their physical measurements. Real pixel density, counted in pixels per inch, varies from screen to screen, so an uncalibrated centimetre is a guess.

A 24 inch Full HD monitor shows the size of that guess. Its 1,920 by 1,080 pixels on a 24 inch diagonal give a pixel density of 91.79, or 36.1 pixels to the centimetre. The CSS standard assumes 37.8. On that monitor a 10 cm line drawn at the standard really measures 10.5 cm, about 5% too long.

Phones and sharp laptop screens add a second layer. There the browser groups several physical pixels into each CSS pixel, and the devicePixelRatio says how many. Neither figure tells the page how many millimetres the screen spans. That is why the ruler needs calibration: one comparison with an object of known size, after which it draws real centimetres on that screen.

Every bank card, debit card and credit card is made to one format, which the ISO/IEC 7810 standard calls ID-1. ICAO's Doc 9303 gives its nominal size as 85.6 × 53.98 mm, with corners rounded to a radius of 3.18 mm. The UK photocard driving licence uses the same format, so it works just as well.

To set the scale, Calibrate opens the calibration panel, where the card is one of six methods. The card is held flat against the glass over the drawn outline, which has the card's rounded corners. On a screen too narrow for it, the outline stands upright. A slider, or the minus and plus buttons, makes the outline larger or smaller in steps of a tenth of a page pixel per centimetre.

When the card's edges meet the outline all the way round, Save the calibration stores the result. Every view then uses it: the ruler, the measuring line and the length bar. A note under the ruler gives the date and the method, and Calibrate again starts over. The match is the main limit, since the ruler can never be more exact than an eye lining up an edge.

The 1p coin measures 20.3 mm across, going by the Royal Mint's coin specifications. The coin method offers seven coins, from the 5p at 18 mm to the £2 at 28.4 mm, and starts on the £2.

The 20p and 50p have seven sides, but each side is a curve, so the coin is the same width whichever way it is measured. The Royal Mint calls the shape an equilateral curve heptagon. The ruler draws that curved outline, so the diameter can be matched in any position. A coin on a screen stays put more easily with the screen tilted back.

The twelve-sided £1 coin is not offered. The Royal Mint and the 2016 proclamation that introduced it give two different figures for its size, and neither says where across the twelve sides the figure is taken.

Bank of England polymer notes are the largest option. The £5 note is approximately 125 × 65 mm, in the Bank's own word. Each higher value is longer and taller, up to the £50 at 146 × 77 mm. A note wider than the screen is drawn upright. Because the Bank gives only approximate sizes, a card is the tighter reference of the two.

It depends on the screen: pixels per inch divided by 2.54 cm gives pixels per centimetre. An iPhone 17 has about 181.2 in each centimetre, a 24 inch desktop screen at Full HD about 36.1.

Pixel density comes from two figures in a maker's specification: the screen diagonal and the resolution. The diagonal in pixels is the square root of the width squared plus the height squared. Dividing it by the diagonal in inches gives the density. The screen size method does this sum, and a known density then sets the ruler without any object.

Apple lists the iPhone 17 at 2,622 by 1,206 pixels on a screen of 6.27 inches measured as a rectangle. The formula gives 460.3, which Apple rounds to 460 ppi. The picture is then 14.5 cm by 6.7 cm, and a single pixel is 0.055 mm wide.

Rounded diagonals change the answer. Apple sells the same phone as a 6.3 inch model, and that figure gives 458 ppi instead of 460. The field accepts diagonals from 3 to 100 inches.

Detect the resolution fills in the resolution the browser reports. Some browsers report the window rather than the whole screen, so the maker's specification is the safer figure. The reference cases check the formula against Apple's published density and two monitors.

The UK page shows both scales at once: centimetres along the top edge and inches along the bottom. Scale switches to centimetres only or inches only. On the cm ruler each centimetre is split into ten millimetre steps, with a longer mark at the half.

The inch scale has five lengths of mark. The longest stands at each whole inch, then come the half, the quarter and the eighth, and the shortest marks the sixteenths. An object 7 cm long reaches 2.76 inches, which the inch scale shows as 2 3/4, its nearest sixteenth.

The conversion is fixed by law. Schedule 1 of the Weights and Measures Act 1985 defines the inch as one thirty-sixth of a yard, which makes it exactly 25.4 mm. In schools, the Department for Education's National Curriculum has Year 5 pupils use approximate equivalences between metric measures and common imperial units such as inches.

Yes, once it has been calibrated, and a card fits on almost any phone screen for that. Full screen ruler then puts zero at the very edge of the glass and runs the scale along the long side, upright while the phone is held upright.

Turn swings the scale round for a phone or tablet lying on its side. Where the browser allows it, the ruler takes the real full screen, hiding the address bar. Safari on iPhone does not offer that for pages, so there the ruler covers the page instead, which works the same way.

For a small object, one end goes on the zero mark and the other end is read off the scale. Holding it flat against the glass, rather than above it, avoids reading the scale at an angle.

The Measure view turns the screen into a measuring line with two points that can be dragged anywhere. It gives the length in cm, mm and inches with the nearest sixteenth, plus the distance across and up and down. It also shows the area of the box between the points and the angle from the horizontal, from 0 to 180 degrees.

On a keyboard, a selected point moves one page pixel per arrow key press, or one millimetre with Shift held. A printed passport photo is a good test. GOV.UK asks for a photo 45 mm high and 35 mm wide, with the head 29 to 34 mm from crown to chin. The line checks all three on a photo laid on the glass.

Show a length works the other way round. It draws a length from 0.5 mm up to 100 cm as a bar with a ruler beneath it. The length can be typed in millimetres, centimetres or inches, and the other units are shown alongside. A bar longer than the space says so. The line measures only what lies on the screen or appears there at real size: it cannot scale an object shown in a photograph.

Print a ruler produces a sheet with two rulers, 18 cm and 7 inches long, a check square of 5 cm a side and a card outline. Both rulers fit across A4 paper, which is 21 cm wide, with room for the margins.

The printable ruler does not depend on the screen calibration, because printers keep CSS millimetres, but only at a scale of 100%, often called actual size. A print dialogue set to fit to page may shrink the sheet to fit the paper, and the ruler with it. No printer scale can be guaranteed from a web page.

The check square shows whether the sheet came out true: each side should measure 5 cm against a trusted ruler. A payment card laid on the printed outline should cover it exactly, which gives a second check without any ruler at all.

This browser's local storage keeps the saved setting, together with the page zoom it was made at, the method and the date. Forget the calibration removes it. Another browser, another device or cleared site data starts without one, and nothing measured is stored or sent anywhere.

Browser zoom is allowed for. A saved scale of 40 page pixels per centimetre at 100% zoom becomes 32 at 125%, since each page pixel then covers more of the screen. The ruler says when it has adjusted. Pinch zoom on a phone is different: the page asks for it to be undone before measuring.

Each method carries its own tolerance. ICAO allows ID-1 cards to differ from the nominal size by less than a millimetre on each side. The Bank of England describes its note sizes as approximate. Lining up an outline by eye adds its own small error, so the reading is as exact as the match behind it.