Note · 0nlyType

Example

The voice is , and the expression is .

The italic is Bodoni Moda (Parma, 1798), and it speaks for you; the upright is Archivo (Omnibus-Type), and it speaks for us.

Every colour clears WCAG AA on its paper, and the specimen prints to PDF as it stands.

Every page needs more. Space does the decoration.

Rest

Pointed at

OssiaArchivo (Omnibus-Type)

Ossia, pointed atArchivo (Omnibus-Type)

ExpandPDF

Expand, pointed atPDF

Revisemore

Revise, pointed atmore

Revise, pressedmore

Revise, right to leftأكثر

Expand, openPDF

Install

Run it in a project that has the shadcn CLI set up. It brings the 0nlyType base along.

npmpnpmyarnbun

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

Usage

note-example.tsx

import { Note } from "@/components/ui/note"export default function Example() {return (<div className="grid justify-items-start" style={{ gap: "var(--ot-space-6)" }}><p className="ot-mp" style={{ maxWidth: "36ch", paddingBottom: "9rem", margin: 0 }}>The voice is{" "}<Note note="A grotesque from Omnibus-Type, variable in width and weight. It says everything the interface says.">Archivo</Note>, and the expression is{" "}<Note note="Owen Earl's revival of the types Giambattista Bodoni cut in Parma around 1798. Optical sizes keep its hairlines alive from 6 to 96 points.">Bodoni Moda</Note>.</p><p className="ot-mp" style={{ maxWidth: "36ch", margin: 0 }}>The italic is <Note variant="ossia" note="Parma, 1798">Bodoni Moda</Note>, and it speaks for you; the upright is{" "}<Note variant="ossia" note="Omnibus-Type">Archivo</Note>, and it speaks for us.</p><p className="ot-mp" style={{ maxWidth: "36ch", margin: 0 }}>Every colour clears <Note variant="expand" note="Web Content Accessibility Guidelines">WCAG</Note> AA on its paper, and thespecimen prints to <Note variant="expand" note="Portable Document Format">PDF</Note> as it stands.</p><p className="ot-mp" style={{ maxWidth: "36ch", margin: 0 }}>Every page needs <Note variant="revise" note="less">more</Note>. Space does the <Note variant="revise" note="layout">decoration</Note>.</p></div>)}

Contract

Underneath: native, on hover and focus.
Anatomy: <button class="ot-note" aria-describedby="id">Term<span class="ot-note-text" id="id" aria-hidden="true">Note</span></button>.
A dotted underline. On hover or focus, the highlighter marks the term, a dot anchors the leader line, the line draws down, and the ink pill holding the note spreads from the line's tip (clip-path: circle()). Leaving plays the same four steps in reverse order.
Keyboard: focus shows it, and Escape dismisses it.
variant (data-variant, none for leader): leader, ossia, expand or revise.
ossia: the score's ossia, a small bar printed over the staff, and the interlinear gloss. The note is always there: a few words at pp in pencil in the line space above the term, starting where the term starts and free to run past its end. The term's line opens to hold it (the term is an inline block with the note's height above it), and the term is in ink so the two read as a pair. Pointing inks the note. It is plain text in the page, read as "term (note)" (the parentheses are for screen readers only). Nothing to focus.
expand: an abbreviation that opens into its words. The term's letters are found in the note in order (the start of a word, or a capital inside one: HyperText), and pressing it moves them apart while each word grows out of its initial (inline size to auto, moderato, exhale); a word with no initial ("and") grows whole. The initials stay in ink and the rest arrives in graphite, so the abbreviation stays readable inside its long form; the dotted line goes. It is a span with role="button", aria-expanded and dir="auto", because a native button can't break across lines and the words must; the visible letters are aria-hidden, the name is the abbreviation and the description the note. Enter or Space toggles, Escape closes. If the letters can't be found, it falls back to leader.
revise: the editor's correction, after the Basquiat sheet's struck headline and the typed corrections of the Weingart letter (a caret swap, done by hand). children is the word in the text and note the word that replaces it (a word or a short phrase; it doesn't break). At rest the word is dotted like the others. Pointing sketches a hairline strike in pencil, as the checkbox does. Pressing strikes it in ink at --ot-stroke, the pen running a little past the word (0.1em, short of the word before), and the struck word steps back to pencil; then the replacement is written in after it in the italic, its box opening from the start (inline size to auto, moderato, exhale) so the sentence makes room as a pen moves. Pressing again, or Escape, lifts both. It is a span with role="button" and aria-expanded, so a struck phrase can wrap; the drawn words are aria-hidden and a .ot-sr reads the term, or once pressed <del> the term and <ins> the replacement. The space before the replacement is a real one, so where it wraps the space falls away at the break. Right to left the strike draws from the right. Forced colours: a plain line-through.

Props

Props of Note
Prop	Type	Default	What it does
`children`	`ReactNode`		The term being annotated. It is a button, so the keyboard reaches it.
`note`	`ReactNode`		The note itself: a sentence or two of phrasing content. Linked to the term with aria-describedby. Point at the term or focus it and it appears; Escape puts it away.
`variant`	`"leader" \| "ossia" \| "expand" \| "revise"`	`"leader"`	leader: the leader line and the ink pill. ossia: the note (a few words) is always there, small in pencil, in the line space above the term; the term's line opens to hold it, and pointing inks it. It is plain text, read as "term (note)". expand: for an abbreviation. children and note are strings; pressing it (Enter or Space) moves its letters apart and each word grows out of its initial, a letter matching the start of a word or a capital inside one (HyperText). Pressing again, or Escape, closes it. It is a span with role="button" and aria-expanded, since a button can't break across lines. If the letters can't be found in order, it falls back to leader. revise: the editor's correction. children is the word or phrase in the text, note is what replaces it (a word or a short phrase; it doesn't break). Pointing sketches a strike in pencil; pressing (Enter or Space) strikes it in ink and writes the replacement in after it, in the italic. Pressing again, or Escape, lifts both. A span with role="button" and aria-expanded; a screen reader hears the change as a deletion and an insertion.

Craft

Where its move comes from

Where its move comes from
Component	Reference	Move
Marginalia	Weingart letter	Highlighter, anchor dot, leader line
Ossia note	The score's ossia; the interlinear gloss	The note set small over the word, always there
Expand note	The abbreviation and its long form	The letters move apart and the words grow out of them
Revise note	Basquiat's struck headline; the Weingart letter's typed page	The word struck through in ink, and the right one written in after it in the italic

How it moves

How it moves
Component	Articulation	What moves
Marginalia	Ink spread	Mark, anchor, line, note; reversed on leaving
Ossia note	Ink	Pointing inks the note, allegro
Expand note	Unfurl	Pressed, the words grow out of their initials, moderato, exhale; pressed again, they close
Revise note	Pencil, then ink, then written	Pointing sketches the strike in pencil; pressed, the pen strikes it in ink and the replacement is written in from the start; pressed again, both lift