Tufte CSS

Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte's books and handouts. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.

The project lives at GitHub as tufte-css. The idea is essentially cribbed wholesale from Tufte-L^aT_eX¹ and R Markdown's Tufte Handout format¹ See https://tufte-latex.github.io/tufte-latex/. This page is an adaptation of the Tufte Handout PDF. I give hearty thanks to all the people who have contributed to those projects.

Getting Started

To use Tufte-CSS, copy tufte.css and ETBembo-RomanLF.ttf to your project directory and add the following to your HTML document's head block:

<link rel="stylesheet" href="tufte.css"/>

Now you just have to use the provided CSS rules, and the Tufte-CSS conventions described in this document. For best results, View Source and Inspect Element frequently.

Fundamentals

Sections

Organize your document with an article element inside your body tag. Inside that, use section tags around each logical grouping of text and headings.

Headings

Tufte CSS uses h1 for the document title, h2 for section headings, and h3 for low-level headings. More specific headings are not supported. If you feel the urge to reach for a heading of level 4 or greater, consider redesigning your document:

[It is] notable that the Feynman lectures (3 volumes) write about all of physics in 1800 pages, using only 2 levels of hierarchical headings: chapters and A-level heads in the text. It also uses the methodology of sentences which then cumulate sequentially into paragraphs, rather than the grunts of bullet points. Undergraduate Caltech physics is very complicated material, but it didn't require an elaborate hierarchy to organize.

In his later books²² http://www.edwardtufte.com/tufte/books_be, Tufte starts each section with a bit of vertical space, a non-indented paragraph, and sets the first few words of the sentence in small caps. For this we use a span with the class newthought, as demonstrated at the beginning of this paragraph. The vertical space is accomplished separately, through the <section> class. I feel the vertical space is unnecessary when using this technique to replace h2 elements, as in this paragaph. Be consistent: though I do so in this paragraph for the purpose of demonstration, do not alternate use of header elements and the newthought technique. Pick one approach and stick to it.

Color

Although paper handouts obviously have a pure white background, the web is better served by the use of slightly off-white and off-black colors. I picked #fffff8 and #111111 because they are nearly indistinguishable from their 'pure' cousins, but dial down the harsh contrast.

Other forms of text—for instance, links and code—are slightly lighter, and sidenote numbers are bright red to distinguish them from inline text.

Font

In print, Tufte uses the proprietary Monotype Bembo³³ http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000Vt font. In digital formats he uses ETBembo, available under the MIT license through Edward Tufte, Adam Schwartz, and Marc Neuwirth's Presenter project. Tufte CSS uses ETBembo through the use of @font-face, meaning you'll have to make the .ttf file available to your readers.

Code snippets (using the code class) ape GitHub's font selection and sans-serifs (with the sans class) follow Tufte's choice of Gill Sans.

Sidenotes

One of the most distinctive features of Tufte's style is his extensive use of sidenotes. Perhaps you have noticed their use in this document already. You are very astute.

There is a wide margin to provide ample room for sidenotes and small figures. Spans with class sidenote inserted directly into the middle of p tags within each section put the sidenote at the correct height. ⁴⁴ This is a sidenote.

Most sidenotes include footnote-style numberings, but they don't have to. This is a margin note. Notice there isn't a number preceding the note.These numberless sidenotes are called margin notes. They are currently identical to sidenotes but are kept semantically distinct because one might wish to style them separately.

Figures

Margin Figures

Figure 1: Sepal length vs. petal length, colored by speciesImages and graphics play an integral role in Tufte’s work. To place figures in the margin, just wrap an image (or whatever) in a margin note inside a p tag.

Equations

For displaying mathematical symbols and equations I recommend MathJax. Otherwise the topic is outside the scope of this document.

Full Width Figures

If you need a full-width image or figure, give it the fullwidth class. Make sure that's inside an article, and it will take up (almost) the full width of the screen. Don't wrap the figure in a paragraph tag. To give it a caption, add a sidenote placed in an otherwise empty paragraph tag after the image.

qplot(wt, mpg, data = mtcars, colour = factor(cyl))

Figure 2: Full width figure

Main Column Figures

Besides margin and full width figures, you can of course also include figures constrained to the main column. You're going to have to police yourself with the size of these figures, since they're just images. Wrap the figure in a paragraph tag, into which also goes the caption, before the image.

Figure 3: A figure the width of the main column

Tables

Tabular data is presented with right-aligned text and minimal grid lines. Table labels are margin notes placed inside a p tag that wraps the table.

Table 1: first row of metcars.

Code

Code samples are monospace using the code class, as I've been using in this document to denote HTML tags like the word 'code' earlier in this sentence. Code blocks use that class in conjunction with the pre tag, which gives us indentation too:

;; functional programming:
(map tufte-style all-the-things)

// iterative programming:
for (i = 0; i++; i <= num) {
   all_the_things[i].useTufteStyle();
}