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 uniquement — React, depuis @krizaka/ui/footnote. Bêta : son API peut encore changer à une version mineure.
- Mobile · n/a. Reading-page typography; an app says it in its own words. → Txt
Pourquoi il est là. Used by Yomizaka, krizaka.com.
Quand l’utiliser
- 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.
Quand ne pas l’utiliser
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { Caption, FootnoteRef, Footnotes } from "@krizaka/ui/footnote";Exemples
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 | Défaut | 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 | Défaut | Description |
|---|---|---|---|
nrequis | 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 | Défaut | Description |
|---|---|---|---|
notesrequis | 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). |
Accessibilité
- 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.
Bonnes pratiques
- 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.
Composants liés
Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub