Fraction · 0nlyType

Example

18 of 24done

Rest2 of 5

Pointed2 of 5

Two figures12 of 40

None yet0 of 5

Vinculum2 of 5

Vinculum, pointed12 of 40

Vinculum, all done5 of 5

Readout1 of 3

Readout, pointed12 of 40

Alone18

Alone, grouped12 480

Usage

This example also uses Button.

npx shadcn@latest add https://thedirectors.agency/ui/r/button.json

fraction-example.tsx

"use client"import * as React from "react"import { Button } from "@/components/ui/button"import { Fraction } from "@/components/ui/fraction"/** Words written, grouped by a thin space as a printer groups them: 3 466. */const words = (n: number) => String(1000 + n * 137).replace(/\B(?=(\d{3})+$)/g, "\u202f")export default function Example() {const [done, setDone] = React.useState(18)return (<div className="flex flex-wrap items-end gap-x-8 gap-y-5"><p className="flex items-baseline gap-3" aria-live="polite"><Fraction count={done} total={24} /><span className="ot-p">done</span></p><p className="flex items-baseline gap-3" aria-hidden="true"><Fraction variant="vinculum" count={done} total={24} /><span className="ot-p">done</span></p><p className="flex items-baseline gap-3" aria-hidden="true"><Fraction variant="readout" count={done} total={24} /></p><p className="flex items-baseline gap-3" aria-hidden="true"><Fraction count={words(done)} /><span className="ot-p">words</span></p><p className="flex gap-5"><Button disabled={done === 0} onClick={() => setDone(done - 1)}>Undo one</Button><Button disabled={done === 24} onClick={() => setDone(done + 1)}>Do one</Button></p></div>)}

Contract

Underneath: native. Its CSS lives in base.css, so every item may use it.
2 of 5. A display fraction, read aloud as "2 of 5".
The part that's yours stands large in the italic, up on the left; what it counts toward sits small, light and a little wide, down on the right, on the same baseline, so the words after it ("done") read on one line with both. Between them the solidus is a pen stroke: a leaning hairline that thins out at both ends and dips just under the line. Pointing inks the stroke and the total.
<Fraction count total> turns a changed number over the way the count went (up as it grows, down as it shrinks), figure by figure like a counter's wheels: only the figures that changed turn, the units first and the carry one --ot-arpeggio behind (19 to 20 turns both, 12 to 13 only the 3). A number that gains or loses a figure, or changes shape, or a word, turns over whole. Each figure is a .ot-fraction-figure; the number is read aloud whole. The stroke ticks once, like a pen. Without motion the number simply changes.
The figures read left to right in every direction: the fraction is its own isolated left-to-right run (direction: ltr; unicode-bidi: isolate), so in a right-to-left page it still reads "18/24", never "42/81"; only the words around it change sides.
Alone: total is optional. Without one the stroke and the total go, and the count stands by itself, a rolling figure of yours at the same size in the italic (a streak, a score, words written); a figure that isn't the person's is a stat. Numbers grouped or pointed (3 466, 0.75) turn figure by figure as whole numbers do, the marks between them staying put; the readout does too.
variant (data-variant; none for the default, solidus): vinculum or readout. Only the solidus ticks. Without a total there is nothing to relate, and every variant is the count alone.
vinculum: the built-up fraction, as a printer sets one. The count stands over a level bar and the total under it, centred; the bar is a gauge, inked from its start for the share done (--share, set by the component from count over total) and a rule for the rest, from the right in a right-to-left page. As the count moves the ink eases along the bar (--ot-andante), while the figures turn on their wheels. A total of nothing leaves the bar a rule.
readout: after SPECTRA, where Ikeda prints 1/3 beside 0.13. The share as a decimal to two places (0.75), in the voice, pp, pencil, hung at the top after the total (.ot-fraction-readout, aria-hidden: the fraction already says it). It turns over with the count; pointing takes it to graphite with the total.

Props

Props of Fraction
Prop	Type	Default	What it does
`count`	`ReactNode`		The part that's yours, in italic.
`total`	`ReactNode`		What it counts toward. Optional: left out, the stroke and the total go and the count stands alone as a rolling figure of yours, turning over figure by figure as it changes (a streak, a score). A figure that isn't the person's, a metric or a total, is a stat. Numbers grouped or pointed (1 284, 0.75) turn figure by figure too, the marks between staying put.
`variant`	`"solidus" \| "vinculum" \| "readout"`	`"solidus"`	How the two numbers relate. solidus: side by side on a leaning pen stroke. vinculum: the built-up fraction, the count stacked over a level bar and the total under it; the bar is a gauge that inks the share done from its start and eases along as the count moves. readout: after Ikeda's 1/3 beside 0.13, the share hung small after the total as a decimal (0.75), which turns over with the count. In every variant the figures read left to right, in a right-to-left page too.

Craft

Where its move comes from

Where its move comes from
Component	Reference	Move
Fraction	20(25); a display fraction	Yours large in italic, the total small, a pen stroke between; or yours alone, turning over
Vinculum fraction	The printer's built-up fraction; the dot calendar's gone and to come	The count over a bar that is also a gauge of the share
Readout fraction	SPECTRA's 1/3 beside 0.13	The share hung small after the total as a decimal

How it moves

How it moves
Component	Articulation	What moves
Fraction	Spiccato	A changed number turns over the way the count went, only the figures that changed, the carry one step behind; the stroke ticks once and settles
Vinculum fraction	Breath	The ink eases along the bar to the new share while the figures turn
Readout fraction	Roll	The decimal turns over with the count