` tags. Be consistent: though we 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. [^1]: [Beautiful Evidence](http://www.edwardtufte.com/tufte/books_be) ### Text 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. Tufte CSS uses `#fffff8` and `#111111` because they are nearly indistinguishable from their 'pure' cousins, but dial down the harsh contrast. We stick to the greyscale for text, reserving color for specific, careful use in figures and images. In print, Tufte has used the proprietary Monotype Bembo[^2] font. A similar effect is achieved in digital formats with the now open-source [ETBook][et-book], which Tufte CSS supplies with a `@font-face` reference to a .ttf file. In case ETBook somehow doesn't work, Tufte CSS shifts gracefully to other serif fonts like Palatino and Georgia. [^2]: See Tufte's comment in the [Tufte book fonts][bembo-thread] thread. [bembo-thread]: http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000Vt [et-book]: https://github.com/edwardtufte/et-book Also notice how Tufte CSS includes separate font files for bold (strong) and italic (emphasis), instead of relying on the browser to mechanically transform the text. This is typographic best practice.

If you prefer sans-serifs, use the `sans` class. It relies on Gill Sans, Tufte's sans-serif font of choice.

Links in Tufte CSS match the body text in color and do not change on mouseover or when clicked. Here is a [dummy example](#) that goes nowhere. These links are underlined, since this is the most widely recognized indicator of clickable text. [^blue] However, because most browsers' default underlining does not clear descenders and is so thick and distracting, the underline effect is instead achieved using CSS trickery involving background gradients instead of standard `text-decoration`. Credit goes to Adam Schwartz for that technique. [^blue]: {-} Blue text, while also a widely recognizable clickable-text indicator, is crass and distracting. Luckily, it is also rendered unnecessary by the use of underlining. As always, these design choices are merely one approach that Tufte CSS provides by default. Other approaches, such as changing color on click or mouseover, or using highlighting or color instead of underlining to denote links, could also be made to work. The goal is to make sentences readable without interference from links, as well as to make links immediately identifiable even by casual web users. ## Epigraphs

> 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. > > > I do not paint things, I paint only the differences between things. > >

If you'd like to introduce your page or a section of your page with some quotes, use epigraphs. Modeled after chapter epigraphs in Tufte's books (particularly *Beautiful Evidence*), these are `blockquote` elements with a bit of specialized styling. Quoted text is italicized. The source goes in a `footer` element inside the `blockquote`. We have provided three examples in the epigraph of this section, demonstrating shorter and longer quotes, with and without a paragraph tag, and showing how multiple quotes within an epigraph fit together with the use of a wrapper class. ## Sidenotes: Footnotes and Marginal Notes One of the most distinctive features of Tufte's style is his extensive use of sidenotes.[^3] Sidenotes are like footnotes, except they don't force the reader to jump their eye to the bottom of the page, but instead display off to the side in the margin. Perhaps you have noticed their use in this document already. You are very astute. [^3]: This is a sidenote. Sidenotes are a great example of the web not being like print. On sufficiently large viewports, Tufte CSS uses the margin for sidenotes, margin notes, and small figures. On smaller viewports, elements that would go in the margin are hidden until the user toggles them into view. The goal is to present related but not necessary information such as asides or citations *as close as possible* to the text that references them. At the same time, this secondary information should stay out of the way of the eye, not interfering with the progression of ideas in the main text. Sidenotes consist of two elements: a superscript reference number that goes inline with the text, and a sidenote with content. To add the former, just put a label and dummy checkbox into the text where you want the reference to go, like so: ``` ``` You must manually assign a reference `id` to each side or margin note, replacing "sn-demo" in the `for` and the `id` attribute values with an appropriate descriptor. It is useful to use prefixes like `sn-` for sidenotes and `mn-` for margin notes. Immediately adjacent to that sidenote reference in the main text goes the sidenote content itself, in a `span` with class `sidenote`. This tag is also inserted directly in the middle of the body text, but is either pushed into the margin or hidden by default. Make sure to position your sidenotes correctly by keeping the sidenote-number label close to the sidenote itself. If you want a sidenote without footnote-style numberings, then you want a margin note.[^mn] On large screens, a margin note is just a sidenote that omits the reference number. This lessens the distracting effect taking away from the flow of the main text, but can increase the cognitive load of matching a margin note to its referent text. However, on small screens, a margin note is like a sidenote except its viewability-toggle is a symbol rather than a reference number. This document currently uses the symbol ⊕ (`&\#8853;`), but it's up to you. [^mn]: {-} This is a margin note. Notice there isn't a number preceding the note. Margin notes are created just like sidenotes, but with the `marginnote` class for the content and the `margin-toggle` class for the label and dummy checkbox. For instance, here is the code for the margin note used in the previous paragraph: ``` ⊕ This is a margin note. Notice there isn’t a number preceding the note. ``` Figures in the margin are created as margin notes, as demonstrated in the next section. ## Figures Tufte emphasizes tight integration of graphics with text. Data, graphs, and figures are kept with the text that discusses them. In print, this means they are not relegated to a separate page. On the web, that means readability of graphics and their accompanying text without extra clicks, tab-switching, or scrolling. Figures should try to use the `figure` element, which by default are constrained to the main column. Don't wrap figures in a paragraph tag. Any label or margin note goes in a regular margin note inside the figure. For example, most of the time one should introduce a figure directly into the main flow of discussion, like so:

^[{-} From Edward Tufte, *Visual Display of Quantitative Information*, page 92.] ![Exports and Imports to and from Denmark & Norway from 1700 to 1780](img/exports-imports.png) [^rhino] But tight integration of graphics with text is central to Tufte's work even when those graphics are ancillary to the main body of a text. In many of those cases, a margin figure may be most appropriate. To place figures in the margin, just wrap an image (or whatever) in a margin note inside a p tag, as seen to the right of this paragraph. [^rhino]: {-} ![Image of a Rhinoceros](img/rhino.png) 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*. If you need a full-width 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. This approach is demonstrated below using Edward Tufte's English translation of the Napoleon's March data visualization. From *Beautiful Evidence*, page 122-124.

![Figurative map of the successive losses of the French Army in the Russian campaign, 1812-1813](img/napoleons-march.png) ## Code Technical jargon, programming language terms, and code samples are denoted with the `code` class, as I've been using in this document to denote HTML. Code needs to be monospace for formatting purposes and to aid in code analysis, but it must maintain its readability. To those ends, Tufte CSS follows GitHub's font selection, which shifts gracefully along the monospace spectrum from the elegant but rare Consolas all the way to good old reliable Courier. Extended code examples should use a `pre` tag with class `code`. This adds control over indentation and overflow 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 Tufte CSS provides support for Edward Tufte and Adam Schwartz's [ImageQuilts]. See the [ET forum announcement thread][quilts-thread] for more on quilts. Some have ragged edges, others straight. Include these images just as you would any other `figure`. [ImageQuilts]: http://imagequilts.com/ [quilts-thread]: http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0003wk This is an ImageQuilt surveying Chinese calligraphy, placed in a full-width figure to accomodate its girth:

![Image of Chinese Calligraphy](img/imagequilt-chinese-calligraphy.png) Here is an ImageQuilt of 47 animal sounds over and over, in a figure constrained to the main text region. This quilt has ragged edges, but the image itself is of course still rectangular.

![Image of animal sounds](img/imagequilt-animal-sounds.png) ## Epilogue Many thanks go to Edward Tufte for leading the way with his work. It is only through his kind and careful editing that this project accomplishes what it does. All errors of implementation are of course mine.