Component
CodepointReceipt
It transforms each actual character into a ledger line with its glyph, Unicode code point and a proportional bar. The original sentence returns intact, so the conversion is observable and reversible rather than decorative.
Possible use
It could let a reviewer audit the exact characters in a handoff label, or let a presenter turn an agenda phrase into a machine-legible artifact for one slide. Both uses expose data that is technically true and practically unhelpful.
Reasonable alternative
A reasonable local alternative is rendering the label and using a local string utility only when code points are actually relevant. A receipt component makes implementation detail compete with reading.
01 / Preview
Try it yourself.
Please keep this sentence readable
The sentence is still readable.
- 1
- Start with a sentence that is easy to read.
- 2
- Issue a receipt for every actual character code.
- 3
- Restore the sentence when implementation detail has had enough.
02 / Usage
Put it somewhere.
import { CodepointReceipt } from "gra-ui";
import "gra-ui/styles.css";
export function ItemizedNotice() {
return <CodepointReceipt label="Please keep this sentence readable" />;
}03 / API
Small surface area.
labelstringThe text itemized into a visible Unicode receipt.