Typography
Citation
A small numbered mark in a sentence that points at its source.
On this page
A citation is a small numbered mark at the end of a claim that points at where the claim came from. It is a link, drawn as a chip-toned pill a little smaller than the text and raised a little above the baseline. Under the pointer, and while its source is showing, it fills with ink.
Citation
<div class="max-w(480) mx-auto text-sm fg-text-body leading-md"> <p class="m(0)">Corners are drawn as squircles where the browser has <code class="code">corner-shape</code> <button type="button" class="citation" popovertarget="source-1" aria-label="Source 1">1</button> <span class="popover" id="source-1" popover> <span class="flex flex-col gap-xs"> <span class="fg-text-strong font-medium">CSS Borders and Box Decorations Module Level 4</span> <span class="fg-text-muted text-xs">W3C Working Draft · w3.org</span> </span> </span>and as circles elsewhere, with the radius scaled so both look equally round. <a class="citation" href="#ref-2" aria-label="Source 2">2</a> <a class="citation" href="#ref-3" aria-label="Source 3">3</a> </p> <ol class="mt-md pl-md text-xs fg-text-muted"> <li>CSS Borders and Box Decorations Module Level 4</li> <li id="ref-2">Master UI theme guide, “Continuous corners”</li> <li id="ref-3">Figma, “Desperately seeking squircles”</li> </ol></div>The first mark opens its source in a popover; the others jump to the list.
#Where it points
There are two honest targets for a citation, and both need no script:
- A list of sources, usually at the foot of the answer or the article. The mark is an
<a>whosehrefis the entry's id. - A popover with the source's title and where it is from. The mark is a
<button>withpopovertarget, written directly before its popover, and it stays filled while the popover is open. Inside a paragraph the popover is a<span>, since a paragraph cannot hold a<div>.
Write the mark with no space before it. It is an inline element, so it wraps with the word it follows and never starts a line by itself.
#Accessibility
- A bare number is not a name. Give each mark an
aria-labelsuch as "Source 2", or the source's title. - Keep the sources reachable without the marks: a list a reader can scan is more use than twelve popovers.
- The mark is small. Its number is set at the control weight in tabular figures, and its target grows with the text it sits in.
#Classes
| Class | Description |
|---|---|
citation | The mark: an <a> whose href is the source's id, or a <button> with popovertarget written directly before its popover. Give it an aria-label such as "Source 2" |
#Related
- MentionA person, a team or a thing named inside a sentence.
- PopoverA floating sheet anchored to the button that opens it.
- QuoteWords that belong to someone else, set apart from yours.