Völkertafel

Tufte CSS: An Adaptation

Dave Liepmann

An adap­ta­tion by Chris J. Zähller

Introduction

Tufte CSS pro­vides tools to style web arti­cles using the ideas demon­strated by Edward Tufte’s books and hand­outs. Tufte’s style is known for its sim­plic­ity, exten­sive use of side­notes, tight inte­gra­tion of graph­ics with text, and care­fully cho­sen typog­ra­phy.

The orig­i­nal Tufte CSS, of which this is an adap­ta­tion, was cre­ated by Dave Liepmann and is now an Edward Tufte project. The orig­i­nal idea was cribbed from Tufte-LaTeX and R Markdown’s Tufte Handout for­mat. We give hearty thanks to all the peo­ple who have con­tributed to those projects.

This is only one pos­si­ble way to lay out a web page. While we have endeav­ored to remain true to Tufte’s spirit, we cau­tion against slav­ish imi­ta­tion. This adap­ta­tion devi­ates from the orig­i­nal Tufte CSS in sev­eral ways, and we encour­age you to alter it fur­ther to suit your own needs.

Getting Started

Because this is a cus­tom imple­men­ta­tion, we don’t have an easy way to pro­vide you, dear reader, with very use­ful source files. But if you’d like to have a look at the style sheet, you can find the uncom­pressed ver­sion at https://mercury-photo/​wp-​content/​themes/​mer­cury­make­spix/​admin/​css/​style.merged.css. You can see the links to the cus­tom fonts in the doc­u­ment <head>. And finally, since many of the font-​family rules are inlined to opti­mize per­for­mance, you can see those rules in the doc­u­ment <head> as well.

Fundamentals

Sections, Headings, and Lists

Organize your doc­u­ment with an article ele­ment inside your body tag. Inside that, use section tags around each log­i­cal group­ing of text and head­ings.

Tufte CSS uses h1 for the doc­u­ment title, p with class subtitle for the doc­u­ment sub­ti­tle, h2 for sec­tion head­ings, and h3 for low-​level head­ings. More spe­cific head­ings are not sup­ported in the orig­i­nal Tufte CSS. We pro­vide sup­port for them in this adap­ta­tion; how­ever, if you feel the urge to reach for a head­ing of level 4 or greater, con­sider redesign­ing your doc­u­ment:

[It is] notable that the Feynman lec­tures (3 vol­umes) write about all of physics in 1800 pages, using only 2 lev­els of hier­ar­chi­cal head­ings: chap­ters and A-​level heads in the text. It also uses the method­ol­ogy of sen­tences which then cumu­late sequen­tially into para­graphs, rather than the grunts of bul­let points. Undergraduate Caltech physics is very com­pli­cated mate­r­ial, but it didn’t require an elab­o­rate hier­ar­chy to orga­nize.

As a bonus, this excerpt regard­ing the use of head­ings pro­vides an exam­ple of block quotes. In Tufte CSS they are just lightly styled, seman­ti­cally cor­rect HTML using blockquote and footer ele­ments. See page 20 of The Visual Display of Quantitative Information for an exam­ple in print.

Here is what the head­ings look like:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

If you must use them, here are what lists look like. The ordered list sup­ports a sin­gle level with no nest­ing.

  • Foo
  • Bar
  • Foobar this is a very long item that wraps so I’ll just keep typ­ing yep still not long enough okay maybe we’re get­ting there
  • Barfoo
    • Fundus
      • Wundus
        • Mundus
          • Helpus
  1. Some Greenfish
  2. The Lights from my Lady Cranfeildes Chamber
  3. Two dozen of Pewter spoons
  4. One greate fireshov­ell for ye nurs­ery
  5. Ye oth­ers which were sent to be exchanged for some of a bet­ter fash­ion
  6. A new fry­ing pan
  7. A stoute length of rope
  8. Some freshe egges
  9. Sufficient twine to tie up a goose for my Lady Cranfeildes guestes
  10. Together with a note of ye prises of such Commoditie for ye rest

In his later books,Beautiful Evidence Tufte starts each sec­tion with a bit of ver­ti­cal space, a non-​indented para­graph, and the first few words of the sen­tence set in small caps.This demo also styles other ele­ments, such as abbre­vi­a­tions, with small caps, e.g., USA, AFL-​CIO, and NASA. For this we use a span with the class newthought, as demon­strated at the begin­ning of this para­graph. Vertical spac­ing is accom­plished sep­a­rately through <section> tags. Be con­sis­tent: though we do so in this para­graph for the pur­pose of demon­stra­tion, do not alter­nate use of header ele­ments and the newthought tech­nique. Pick one approach and stick to it.

Text

Although paper hand­outs obvi­ously have a pure white back­ground, the web is bet­ter served by the use of slightly off-​white and off-​black col­ors. This adap­ta­tion of Tufte CSS uses rgb(255, 251, 245) and rgb(38, 38, 38) because they are nearly indis­tin­guish­able from their ‘pure’ cousins, but dial down the harsh con­trast. Apart from the drop­caps, we stick to the greyscale for text, reserv­ing color for spe­cific, care­ful use in fig­ures and images. Color in code blocks is han­dled via the Google Code Prettify library.

In print, Tufte has used the pro­pri­etary Monotype BemboSee Tufte’s com­ment in the Tufte book fonts thread. font. A sim­i­lar effect is achieved in dig­i­tal for­mats with the now open-​source ETBook, which Tufte CSS sup­plies with a @font-face ref­er­ence to a .ttf file. In this adap­ta­tion, we employ the excel­lent Merriweather type­face from Sorkin Type, with head­ings set in Playfair Display.

Also notice how Tufte CSS includes sep­a­rate font files for bold (strong) and italic (empha­sis), instead of rely­ing on the browser to mechan­i­cally trans­form the text. This is typo­graphic best prac­tice.

If you pre­fer sans-​serifs, use the sans class. In this adap­ta­tion, we’ve opted for Merriweather Sans instead of Tufte’s pre­ferred sans-​serif, Gill Sans.

Links in Tufte CSS match the body text in color and change color on hover, focus, and acti­va­tion. Here is a dummy exam­ple that goes nowhere. These links are under­lined, since this is the most widely rec­og­nized indi­ca­tor of click­able text.Blue text, while also a widely rec­og­niz­able clickable-​text indi­ca­tor, is crass and dis­tract­ing, not to men­tion inac­ces­si­ble to users with some forms of color-​blindness. Luckily, it is also ren­dered unnec­es­sary by the use of under­lin­ing. However, because most browsers’ default under­lin­ing does not clear descen­ders and is so thick and dis­tract­ing, the under­line effect is instead achieved using the CSS text-decoration-skip prop­erty. A fall­back uti­liz­ing CSS trick­ery involv­ing back­ground gra­di­ents instead of stan­dard text-decoration is pro­vided for browsers that do not sup­port text-decoration-skip. Credit goes to Adam Schwartz for that tech­nique.

As always, these design choices are merely one approach that Tufte CSS pro­vides by default. Other approaches could also be made to work. The goal is to make sen­tences read­able with­out inter­fer­ence from links, as well as to make links imme­di­ately iden­ti­fi­able even by casual web users.

Epigraphs

The English lan­guage … becomes ugly and inac­cu­rate because our thoughts are fool­ish, but the sloven­li­ness of our lan­guage makes it eas­ier for us to have fool­ish thoughts.

George Orwell, Politics and the English Language

For a suc­cess­ful tech­nol­ogy, real­ity must take prece­dence over pub­lic rela­tions, for Nature can­not be fooled.

Richard P. Feynman, What Do You Care What Other People Think?

I do not paint things, I paint only the dif­fer­ences between things.

Henri Matisse, Henri Matisse Dessins: thèmes et vari­a­tions (Paris, 1943), 37

If you’d like to intro­duce your page or a sec­tion of your page with some quotes, use epigraphs. Modeled after chap­ter epigraphs in Tufte’s books (par­tic­u­larly Beautiful Evidence), these are blockquote ele­ments with a bit of spe­cial­ized styling. Quoted text is ital­i­cized. The source goes in a footer ele­ment inside the blockquote. We have pro­vided three exam­ples in the epi­graph of this sec­tion, demon­strat­ing shorter and longer quotes, with and with­out a para­graph tag, and show­ing how mul­ti­ple quotes within an epi­graph fit together with the use of a wrap­per class.

Sidenotes: Footnotes and Marginal Notes

One of the most dis­tinc­tive fea­tures of Tufte’s style is his exten­sive use of side­notes.This is a side­note. Sidenotes are like foot­notes, except they don’t force the reader to jump their eye to the bot­tom of the page, but instead dis­play off to the side in the mar­gin. Perhaps you have noticed their use in this doc­u­ment already. You are very astute.

Sidenotes are a great exam­ple of the web not being like print. On suf­fi­ciently large view­ports, Tufte CSS uses the mar­gin for side­notes, mar­gin notes, and small fig­ures. On smaller view­ports, ele­ments that would go in the mar­gin are hid­den until the user tog­gles them into view. The goal is to present related but not nec­es­sary infor­ma­tion such as asides or cita­tions as close as pos­si­ble to the text that ref­er­ences them. At the same time, this sec­ondary infor­ma­tion should stay out of the way of the eye, not inter­fer­ing with the pro­gres­sion of ideas in the main text.

Sidenotes con­sist of two ele­ments: a super­script ref­er­ence num­ber that goes inline with the text, and a side­note with con­tent. To add the for­mer, just put a label and dummy check­box into the text where you want the ref­er­ence to go, like so:

<label for="sn-demo"
       class="margin-toggle sidenote-number" alt="note">
</label>
<input type="checkbox"
       id="sn-demo"
       class="margin-toggle" aria-role="note" />

You must man­u­ally assign a ref­er­ence id to each side or mar­gin note, replac­ing “sn-​demo” in the for and the id attribute val­ues with an appro­pri­ate descrip­tor. It is use­ful to use pre­fixes like sn- for side­notes and mn- for mar­gin notes.

Immediately adja­cent to that side­note ref­er­ence in the main text goes the side­note con­tent itself, in a span with class sidenote. This tag is also inserted directly in the mid­dle of the body text, but is either pushed into the mar­gin or hid­den by default. Make sure to posi­tion your side­notes cor­rectly by keep­ing the sidenote-​number label close to the side­note itself.

If you want a side­note with­out footnote-​style num­ber­ings, then you want a mar­gin note.This is a mar­gin note. Notice there isn’t a num­ber pre­ced­ing the note. On large screens, a mar­gin note is just a side­note that omits the ref­er­ence num­ber. This lessens the dis­tract­ing effect tak­ing away from the flow of the main text, but can increase the cog­ni­tive load of match­ing a mar­gin note to its ref­er­ent text. However, on small screens, a mar­gin note is like a side­note except its viewability-​toggle is a sym­bol rather than a ref­er­ence num­ber. The <label> ele­ment wraps the sym­bol. This doc­u­ment uses the FontAwesome sticky note glyph (<span class="fa-layers fa-fw mn-"><i class="far fa-sticky-note aria-role="hidden"></i><i class="fas fa-sticky-note aria-role="hidden"></i></span>), but it’s up to you.

Margin notes are cre­ated just like side­notes, but with the marginnote class for the con­tent and the margin-toggle class for the label and dummy check­box. For instance, here is the codeFor WordPress, I’ve cre­ated a short­code that uses the syn­tax [mn- id="mn-my-unique-id"]My margin note text goes here.[/mn-] Similarly, use [sn- id="sn-my-unique-id"]My side note text goes here.[/sn-] to gen­er­ate a side­note. for the mar­gin note used in the pre­vi­ous para­graph:

<label for="mn-demo" class="margin-toggle" alt="note">
  <span class="fa-layers fa-fw mn-">
    <i class="fas fa-sticky-note" aria-role="hidden"></i>
    <i class="far fa-sticky-note" aria-role="hidden"></i>
  </span>
</label>
<input type="checkbox" id="mn-demo" class="margin-toggle" aria-role="note" />
<span class="marginnote">
  This is a margin note. Notice there isn’t a number preceding the note.
</span>

Figures in the mar­gin are cre­ated as mar­gin notes, as demon­strated in the next sec­tion.

Tables

Tabular data are pre­sented with right-​aligned num­bers, left-​aligned text, and min­i­mal grid lines. Table labels are mar­gin notes placed inside a <p> tag that wraps the <table>.

Table 1: First Row of MTcars

Make + Modelmpgcyldisphpdratwt
A respon­sive table based on Edward Tufte’s design prin­ci­ples.
Mazda RX421.061601103.902.62
Mazda RX4 Waggon21.061601103.902.88
Datsun 71022.84108933.852.32
Hornet 4 Drive21.462581103.083.21
Hornet Sportabout18.783601753.153.44
Valiant18.162251052.763.46

Please under­stand: this is not the One True Table. Such a style does not exist. One must craft each data table with cus­tom care to the nar­ra­tive one is telling with that spe­cific data. So take this not as “the table style to use”, but rather as “a table style to start from.” From here, use prin­ci­ples to guide you: avoid chartjunk, opti­mize the data-​ink ratio (within rea­son, as Tufte says), and mobi­lize every graph­i­cal ele­ment, per­haps sev­eral times over, to show the data.Page 139, The Visual Display of Quantitative Information, Edward Tufte 2001.

Figures

Tufte empha­sizes tight inte­gra­tion of graph­ics with text. Data, graphs, and fig­ures are kept with the text that dis­cusses them. In print, this means they are not rel­e­gated to a sep­a­rate page. On the web, that means read­abil­ity of graph­ics and their accom­pa­ny­ing text with­out extra clicks, tab-​switching, or scrolling.

Figures should try to use the figure ele­ment, which by default are con­strained to the main col­umn. Don’t wrap fig­ures in a para­graph tag. Any label or mar­gin note goes in a reg­u­lar mar­gin note inside the fig­ure. For exam­ple, most of the time one should intro­duce a fig­ure directly into the main flow of dis­cus­sion, like so:

From Edward Tufte, Visual Display of Quantitative Information, page 92. Exports and Imports to and from Denmark & Norway from 1700 to 1780
This is the default style for a fig­cap­tion. See the exam­ple below for a “full width” cap­tion.

Image of a Rhinoceros Image of a Rhinoceros, F.J. Cole, “The History of Albrecht Dürer’s Rhinoceros in Zooological Literature,” Science, Medicine, and History: Essays on the Evolution of Scientific Thought and Medical Practice (London, 1953), ed. E. Ashworth Underwood, 337  –  356. From page 71 of Edward Tufte’s Visual Explanations. But tight inte­gra­tion of graph­ics with text is cen­tral to Tufte’s work even when those graph­ics are ancil­lary to the main body of a text. In many of those cases, a mar­gin fig­ure may be most appro­pri­ate. To place fig­ures in the mar­gin, just wrap an image (or what­ever) in a mar­gin note inside a p tag, as seen to the right of this para­graph.

If you need a full-​width fig­ure, give it the fullwidth class. Make sure that’s inside an article, and it will take up (almost) the full width of the screen. This approach is demon­strated below using Edward Tufte’s English trans­la­tion of the Napoleon’s March data visu­al­iza­tion. From Beautiful Evidence, pages 122  –  124.

Figurative map of the successive losses of the French Army in the Russian campaign, 1812-1813
This is a fig­cap­tion. It is the child of a fig­ure with class “full­width”, that is, figure.fullwidth figcaption

Code

Technical jar­gon, pro­gram­ming lan­guage terms, and code sam­ples are denoted with the code class, as I’ve been using in this doc­u­ment to denote HTML. Code needs to be mono­space for for­mat­ting pur­poses and to aid in code analy­sis, but it must main­tain its read­abil­ity. To those ends, this imple­men­ta­tion of Tufte CSS shifts grace­fully along the mono­space spec­trum from the open-​source Cousine to the ele­gant but rare Consolas all the way to good old reli­able Courier.

Extended code exam­ples should use a pre tag with class code. This adds con­trol over inden­ta­tion and over­flow as well:

;; Some code examples in Clojure. This is a comment.

;; applying a function to every item in the collection
(map tufte-css blog-posts)
;;;; if unfamiliar, see http://www.lispcast.com/annotated-map

;; side-effecty loop (unformatted, causing text overflow) - from https://clojuredocs.org/clojure.core/doseq
(doseq [[[a b] [c d]] (map list (sorted-map :1 1 :2 2) (sorted-map :3 3 :4 4))] (prn (* b d)))

;; that same side-effecty loop, formatted
(doseq [[[a b] [c d]] (map list
                           (sorted-map :1 1 :2 2)
                           (sorted-map :3 3 :4 4))]
  (prn (* b d)))

;; If this proselytizing has worked, check out:
;; http://howistart.org/posts/clojure/1

ImageQuilts

This demo omits ImageQuilts, since this site does not use them. See the ET forum announce­ment thread for more on quilts.

Definition Lists

Here is an exam­ple of how you might style a def­i­n­i­tion list. Styles are applied to <dl> ele­ments with the class glossary.

Thieves’ Cant

Some slang devoted to var­i­ous birds and fowl.Thieves Cant, The Website of Pascal Bonenfant

Biddy, Chick-​a-​biddy
A chicken
A young wench (fig­u­ra­tive)
Bubbly jock
A turkey cock
Cackler
A hen
Cackling cheats
Fowl
Chickens
Cocks
Hens
Capon
A cas­trated cock
A eunuch (fig­u­ra­tive)
Carriers
Pigeons

A less styl­ish, but per­haps more prac­ti­cal def­i­n­i­tion list looks like this (it is the default for this site):

More Cant

Some slang devoted to var­i­ous items of cloth­ing.ibid.

Farting Crackers
Farting-​Crackers
Hams
Breeches
Mish Topper
A coat or pet­ti­coat
Famble Cheats
Gold rings
Gloves
Jervis’s Uppper Benjamin
a box, or coachman’s great coat
Belcher
A red silk hand­ker­chief, inter­mixed with yel­low and a lit­tle black
Rum Clout
A fine silk, cam­bric, or hol­land hand­ker­chief
Penthouse Nab
A broad brimmed hat

Epilogue

Many thanks go to Edward Tufte for lead­ing the way with his work. It is only through his kind and care­ful edit­ing that this project accom­plishes what it does. All errors of imple­men­ta­tion are of course mine.

— Chris J. Zähller

About Chris J. Zähller

International Man of Mystery. Cocktail Nerd. Occasionally designs websites. Sometimes snaps a picture or two.

↑ Back to Top
Do NOT follow this link or you will be banned from the site! underlying-calculable