Footnote & caption
The small print of the Cahier: Caption names a figure (fig. 2 — …), FootnoteRef is the number in the text, Footnotes the notes at the foot, each with its way back.
import { Caption, FootnoteRef, Footnotes } from "@krizaka/ui/footnote";Web only — React, from @krizaka/ui/footnote. Beta: its API may still change in a minor version.
- Mobile · n/a. Reading-page typography; an app says it in its own words. → Txt
Why it is here. Used by Yomizaka, krizaka.com.
When to use
- A figure, a plate or a screenshot that needs its number and one line of caption.
- A sentence whose source (an article of law, a run id, a measure) belongs in a note rather than in the text.
When not to use
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { Caption, FootnoteRef, Footnotes } from "@krizaka/ui/footnote";Examples
A figure and its notes
A caption under a figure, two references in a sentence, the notes at the foot.
Props
Caption
A caption in the typewriter face: the figure's number, a dash, what it shows.
| Prop | Type | Default | Description |
|---|---|---|---|
as | "figcaption" | "p" | figcaption | figcaption inside a <figure>, p elsewhere. |
figure | ReactNode | — | The figure's number, typed before the text: fig. 2. |
FootnoteRef
The superscript number in the text, linked to its note (and the note's link back lands here).
| Prop | Type | Default | Description |
|---|---|---|---|
nrequired | number | — | The note's number. |
Footnotes
The notes at the foot of a page: a short rule, numbered notes in small print, each with its way back to the text.
| Prop | Type | Default | Description |
|---|---|---|---|
notesrequired | readonly ReactNode[] | — | The notes, in order: the first is note 1. |
backLabel | string | Back to the text | The label of the way back to the text. |
label | string | Notes | The heading of the notes, for assistive technology (visually a rule). |
Accessibility
- Each reference is a link named « Note n » to its note; each note links back to its reference.
- The notes are an
asidenamed bylabel(« Notes »), an ordered list.
Best practices
- A caption says what the figure shows, after its number; never « Image of ».
- Notes cite sources and proofs (an article, a run id); the text stays readable without them.
- Use one
prefixper set of notes when a page has several.
Related components
Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub