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 typography.

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/mercurymakespix/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-fam¬≠ily 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 headings.

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 document:

[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 organize.

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 nesting.

  • 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 nursery
  5. Ye oth¬≠ers which were sent to be exchanged for some of a bet¬≠ter fashion
  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,ÔĽŅ [Sidenote: 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.ÔĽŅ [Sidenote: 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. Which color is used for text and which for back¬≠ground depends on whether you are view¬≠ing this page in light mode or dark mode. Toggle the color switcher at the top of this page to see the alter¬≠nate color scheme.

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 BemboÔĽŅ [Sidenote: See 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 practice.

If you pre¬≠fer sans-ser¬≠ifs, 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.ÔĽŅ [Sidenote: While Gill Sans is a favorite of Tufte, it is a prob¬≠lem¬≠atic type¬≠face. We can¬≠not rec¬≠om¬≠mend it unless you are design¬≠ing cov¬≠ers for Penguin Books.]

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.ÔĽŅ [Sidenote: Blue text, while also a widely rec¬≠og¬≠niz¬≠able click¬≠able-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-blind¬≠ness. Luckily, it is also ren¬≠dered unnec¬≠es¬≠sary by the use of under¬≠lin¬≠ing.] Because browsers now imple¬≠ment text-decoration-skip: skip (Safari) or text-decoration-skip-ink: auto (all other mod¬≠ern browsers), we have dis¬≠pensed with Adam Schwartz‚Äôs faux-under¬≠line tech¬≠nique as used in the orig¬≠i¬≠nal Tufte CSS.

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.ÔĽŅ [Sidenote: 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="note__toggle note__number" alt="note">
</label>
<input type="checkbox"
       id="sn-demo"
       class="note__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 small ele¬≠ment with class note__side. 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 side¬≠note-num¬≠ber label close to the side¬≠note itself.

If you want a side¬≠note with¬≠out foot¬≠note-style num¬≠ber¬≠ings, then you want a mar¬≠gin note.ÔĽŅ [Sidenote: 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 viewa¬≠bil¬≠ity-tog¬≠gle 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 note__margin class for the con¬≠tent and the note__toggle class for the label and dummy check¬≠box. For instance, here is the codeÔĽŅ [Sidenote: For WordPress, we‚Äô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 paragraph:

<label for="mn-demo" class="note__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="note__toggle" aria-role="note" />
<small class="note note__margin">
  <span class="h-screen-reader-text"> [Sidenote: </span>
  This is a margin note. Notice there isn’t a number preceding the note.
  <span class="h-screen-reader-text">] </span>
</small>

Figures in the mar¬≠gin are cre¬≠ated as mar¬≠gin notes, as demon¬≠strated in the next section.

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>.

ÔĽŅ [Sidenote: Table 1: First Row of MTcars]

Make + Modelmpgcyldisphpdratwt
A respon¬≠sive table based on Edward Tufte‚Äôs design principles.
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.ÔĽŅ [Sidenote: 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-switch¬≠ing, 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:

ÔĽŅ [Sidenote: 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‚ÄĚ caption.

ÔĽŅ [Sidenote: 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 paragraph.

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 we‚Äô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.ÔĽŅ [Sidenote: 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.ÔĽŅ [Sidenote: ibid.]

Farting Crackers
Farting-Crackers
Hams
Breeches
Mish Topper
A coat or petticoat
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 handkerchief
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.

About Chris J. Zähller

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

↑ Go back to the beginning of this page.
Mercury Photo Bureau underlying-calculable