Height Comparison — Manual

What it does

Builds a side-by-side height comparison image in the browser. Set each person's name, height and color, then save or share the result. Everything runs in your browser — nothing you enter and no image is uploaded or stored anywhere.

How to use it

1. Open the Height Comparison tool.
2. Enter a name and height in the form, and press "Add" to include more people. You can pick a color too.
3. The preview image updates automatically as you type. It has two panels: "Custom order" on top and "By height" below.
4. Use "↑" / "↓" on each row to reorder, and "Remove" to delete a person.
5. "Units" switches between cm and ft/in input. Switching units discards the people you've entered rather than converting them.
6. Use "Download image" to save a PNG. "Copy link" copies a URL (?people=…) that restores the current set of people. "Share" hands the image and the URL to your device's share sheet (shown only where the Web Share API is available; where file attachments aren't supported it shares just the URL and text).

Spec

URL parameters

The current set of people is reflected in the URL; opening that URL restores the same setup. Useful for sharing and bookmarking.

Fields of each people entry:

• name: percent-encoded (any : or , in the name is escaped, so it never collides with the delimiters). The edit field caps names at 20 characters.
• height: always a number in cm (cm even in ft/in mode). Must be finite and greater than 0; an entry that fails this is dropped individually.
• color: 6-digit hex without # (e.g. 7c9eff). An invalid value falls back to the default #7c9eff.

If every people entry is invalid, the default two people (Bob 170cm / Alice 160cm) are shown — the same as opening ?people=Bob:170:7c9eff,Alice:160:ffb86b.

Input ranges

Non-numeric input, or input of 0 or less, is ignored when adding.

Units (cm / ft/in)

• The unit is fixed when the page opens and only changes via the "Units" toggle. Heights you've already entered are never auto-converted from one unit to the other while you work.
• Both the internal value and the URL are always in cm. ft/in is converted only when taking input and when displaying; the ft/in display rounds to the nearest whole inch (if rounding pushes inches to 12, it carries one foot).
• The "Units" toggle discards all entered people and starts over (behind a confirmation dialog) rather than converting them to the new unit — so a fractional cm value isn't forced into whole-number ft/in input.
• Gridlines are drawn every 5cm / 10cm in cm mode, and every 3in / 1ft in ft/in mode.

Output image

• Regardless of the number of people or their heights, the outer frame is a fixed size (880×820, exported at 2× as a 1760×1640 PNG). Content is scaled and packed to fit that fixed frame.
• Each person's name is drawn inside their body. Names containing Japanese/CJK characters are stacked one character per line; names in Latin script are drawn on a single line rotated 90° so they still read left-to-right.
• A Made with abstiro.com watermark is placed at the bottom-right.
• The download filename is height-comparison.png.

Sharing

• Copy link: copies the current URL (?people=…&unit=…, which fully restores the setup) to the clipboard. Available everywhere.
• Share: passes the PNG plus the current URL and text to navigator.share. The button is hidden on browsers without the Web Share API. Where file attachments aren't supported (e.g. desktop) it shares just the URL and text. Cancelling the share does nothing.
• Neither button sends anything to a server; the data is only handed to the target app.

Notes

• The URL is updated with history.replaceState on every edit, so it does not clutter your browser history.
• You can also save the image with a long-press or right-click.