Tufte CSS features
1 April 2026
This post demonstrates the Tufte CSS conventions. All of it is plain HTML in a Markdown file.
Sidenotes
One of the most distinctive features of Tufte’s style is the extensive use of sidenotes.This is a sidenote. It shows up in the margin on wide screens. A sidenote is like a footnote, except the reader does not have to jump to the bottom of the page.
Margin notes
A margin note is a sidenote without the reference number. Use the circled plus symbol as the toggle.
This is a margin note. There is no number preceding it.
On wide screens this text appears in the margin; on narrow screens you toggle it open.
New thought
In his later books, Tufte starts each section with a bit of vertical space, a non-indented paragraph, and the first few words of the sentence set in small caps.
Blockquotes
Clutter and confusion are failures of design, not attributes of information.
Epigraph
The English language . . . becomes ugly and inaccurate because our thoughts are foolish, but the slovenliness of our language makes it easier for us to have foolish thoughts.
For a successful technology, reality must take precedence over public relations, for Nature cannot be fooled.
Code
Inline code uses the code element. Extended code samples live in a
pre block:
<label for="sn-example" class="margin-toggle sidenote-number"></label>
<input type="checkbox" id="sn-example" class="margin-toggle">
<span class="sidenote">This is a sidenote.</span>Fullwidth figure
This figure spans almost the full width of the screen.
Figures
A regular figure stays within the main column:
A figure in the margin, wrapped in a margin note:
F.J. Cole, “The History of Albrecht Dürer’s Rhinoceros in Zooological Literature”, Science, Medicine, and History, 1953.
A full-width figure spans almost the entire screen:
