forked from edwardtufte/tufte-css
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (109 loc) · 12.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<title>Tufte CSS</title>
<link rel="stylesheet" href="tufte.css"/>
<link rel="stylesheet" href="latex.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
img { mix-blend-mode: multiply; }
</style>
</head>
<body>
<article>
<h1>Tufte CSS</h1>
<subtitle>Dave Liepmann</subtitle>
<section>
<p>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.</p>
<p>The project lives at GitHub as <a href="https://github.com/daveliepmann/tufte-css">tufte-css</a>. The idea is essentially cribbed wholesale from Tufte-<span class="latex">L<sup>a</sup>T<sub>e</sub>X</span><span class="sidenote-number"></span> and <a href="http://rmarkdown.rstudio.com/tufte_handout_format.html">R Markdown's Tufte Handout format</a><span class="sidenote">See the <a href="https://tufte-latex.github.io/tufte-latex/">Tufte-LaTeX project homepage</a></span>. This page is an adaptation of the <a href="http://rmarkdown.rstudio.com/examples/tufte-handout.pdf">Tufte Handout PDF</a>. I give hearty thanks to all the people who have contributed to those projects.</p>
<p>If you see anything that Tufte CSS could improve, please let us know by <a href="https://github.com/daveliepmann/tufte-css/issues/new">opening an issue on GitHub</a>. Contributions are welcome, too, in the form of pull requests.</p>
</section>
<section>
<h2>Getting Started</h2>
<p>To use Tufte CSS, copy <span class="code">tufte.css</span> and <span class="code">ETBembo-RomanLF.ttf</span> to your project directory and add the following to your HTML document's <span class="code">head</span> block:</p>
<pre class="code"><link rel="stylesheet"
href="tufte.css"/></pre>
<p>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.</p>
</section>
<section>
<h2>Fundamentals</h2>
<h3>Sections</h3>
<p>Organize your document with an <span class="code">article</span> element inside your <span class="code">body</span> tag. Inside that, use <span class="code">section</span> tags around each logical grouping of text and headings.</p>
<h3>Headings</h3>
<p>Tufte CSS uses <span class="code">h1</span> for the document title, <span class="code">h2</span> for section headings, and <span class="code">h3</span> 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:</p>
<blockquote cite="http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000hB">
<p>[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 <em>sentences</em> which then cumulate sequentially into <em>paragraphs</em>, rather than the grunts of bullet points. Undergraduate Caltech physics is very complicated material, but it didn't require an elaborate hierarchy to organize.</p>
<footer><a href="http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000hB">Edward Tufte, forum post, 'Book design: advice and examples' thread</a></footer>
</blockquote>
<p><span class="newthought">In his <span class="sidenote-number">later books</span></span><span class="sidenote">E.g. <a href="http://www.edwardtufte.com/tufte/books_be">Beautiful Evidence</a></span>, 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 <span class="code">newthought</span>, as demonstrated at the beginning of this paragraph. The vertical space is accomplished separately, through the <span class="code"><section></span> class. I feel the vertical space is unnecessary when using this technique to replace <span class="code">h2</span> 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 <span class="code">newthought</span> technique. Pick one approach and stick to it.</p>
<h3>Color</h3>
<p>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 <span class="code">#fffff8</span> and <span class="code">#111111</span> because they are nearly indistinguishable from their 'pure' cousins, but dial down the harsh contrast. </p>
<p>Other forms of text—for instance, links and code—are slightly lighter, and sidenote numbers are bright red to distinguish them from inline text.</p>
<h3>Font</h3>
<p>In print, Tufte uses the proprietary <span class="sidenote-number">Monotype Bembo</span><span class="sidenote">See Tufte's response in the <a href="http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000Vt">Tufte book fonts</a> thread.</span> font. In digital formats he uses ETBembo, which Tufte CSS includes using <span class="code">@font-face</span>. This means you'll have to make the .ttf file available to your readers. Note that <a href="https://github.com/daveliepmann/tufte-css/commit/0a810a7d5f4707941c6f9fe99a53ec41f50a5c00">thanks to Linjie Ding</a>, italicized text uses the ETBembo Italic font instead of mechanically skewing the characters.</p>
<p>Code snippets (using the <span class="code">code</span> class) ape GitHub's font selection and sans-serifs (with the <span class="sans">sans</span> class) follow Tufte's choice of Gill Sans.</p>
</section>
<section>
<h2>Sidenotes</h2>
<p>One of the most distinctive features of Tufte's style is his extensive use of sidenotes.<span class="sidenote-number"></span><span class="sidenote">This is a sidenote.</span> Perhaps you have noticed their use in this document already. You are very astute.</p>
<p>On sufficiently large viewports, Tufte CSS uses the margin for sidenotes, margin notes, and small figures. Sidenotes consist of 1) a superscript reference number that goes inline with the text, and 2) a sidenote containing content that repeats the superscripted number to reinforce its connection to the text. To add the former, just put <span class="code"><span class="sidenote-number"></span></span> where you want the reference to go. Immediately after that goes the <span class="code">span</span> with class <span class="code">sidenote</span>, inserted directly into the middle of the <span class="code">p</span> tag containing the referent text. This will give the sidenote the correct height.</p>
<p><span class="marginnote">This is a margin note. Notice there isn't a number preceding the note.</span>If you don't want footnote-style numberings on your sidenotes, what you want is a margin note. They are currently identical to sidenotes but are kept semantically distinct because one might wish to style them separately. Figures in the margin are created as margin notes, as demonstrated in the next section.</p>
</section>
<section>
<h2>Figures</h2>
<p>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.</p>
<p><span class="marginnote"><img src="figure1.png"/>Figure 1: Sepal length vs. petal length, colored by species</span>Images 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 <span class="code">p</span> tag, as seen in Figure 1 to the right of this paragraph.</p>
<p>If you need a full-width figure, give it the <span class="code">fullwidth</span> class. Make sure that's inside an <span class="code">article</span>, 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, use a <span class="code">figcaption</span> tag inside the <span class="code">figure</span> tag. This approach is demonstrated in Figure 2, which I suppose plots the data in the following code:</p>
<p class="code">qplot(wt, mpg, data = mtcars, colour = factor(cyl))</p>
<figure class="fullwidth">
<img src="figure2.png"/>
<figcaption>Figure 2: Full width figure</figcaption>
</figure>
<br/>
<p>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 any images. Wrap the <span class="code">figure</span> tag in a paragraph tag. Any label or margin note goes in a <span class="code">figcaption</span> tag inside the figure.</p>
<p>
<figure>
<img src="figure3.png"/>
<figcaption>Figure 3: A figure the width of the main column</figcaption>
</figure>
</p>
</section>
<section>
<h2>Tables</h2>
<p>Tabular data are presented by default with right-aligned numbers, left-aligned text, and minimal grid lines. Table labels are margin notes placed inside a <span class="code">p</span> tag that wraps the <span class="code">table</span>.</p>
<p>
<span class="marginnote">Table 1: first row of metcars.</span>
<table>
<thead><th></th><th>mpg</th><th>cyl</th><th>disp</th><th>hp</th><th>drat</th><th>wt</th></thead>
<tbody>
<tr><td class="text">Mazda RX4</td><td>21.0</td><td>6</td><td>160</td><td>110</td><td>3.90</td><td>2.62</td></tr>
<tr><td class="text">Mazda RX4 Wag</td><td>21.0</td><td>6</td><td>160</td><td>110</td><td>3.90</td><td>2.88</td></tr>
<tr><td class="text">Datsun 710</td><td>22.8</td><td>4</td><td>108</td><td>93</td><td>3.85</td><td>2.32</td></tr>
<tr><td class="text">Hornet 4 Drive</td><td>21.4</td><td>6</td><td>258</td><td>110</td><td>3.08</td><td>3.21</td></tr>
<tr><td class="text">Hornet Sportabout</td><td>18.7</td><td>8</td><td>360</td><td>175</td><td>3.15</td><td>3.44</td></tr>
<tr><td class="text">Valiant</td><td>18.1</td><td>6</td><td>225</td><td>105</td><td>2.76</td><td>3.46</td></tr>
</tbody>
</table>
</p>
<p>Please understand: this is not the One True Table. Such a style does not exist. One must craft each data table with custom care to the narrative one is telling with that specific data. So take this not as "the table style to use", but rather as "a table style to start from". From here, use principles to guide you: avoid chartjunk, optimize the data-ink ratio ("within reason", as Tufte says), and <span class="sidenote-number">"mobilize every graphical element, perhaps several times over, to show the data."</span><span class="sidenote">Page 139, The Visual Display of Quantitative Information, Edward Tufte 2001.</span>
</section>
<section>
<h2>Code</h2>
<p>Code samples are monospace using the <span class="code">code</span> 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 <span class="code">pre</span> tag, which gives us indentation too:</p>
<pre class="code">
;; functional programming:
(map tufte-style all-the-things)
// imperative programming:
for (i = 0; i++; i <= num) {
all_the_things[i].useTufteStyle();
}
</pre>
</section>
<section>
<h2>Other Tools</h2>
<p>Sparklines are awesome, and can be created in a variety of ways. People are making them with <a href="https://github.com/adactio/Canvas-Sparkline">plain javascript</a>, <a href="http://omnipotent.net/jquery.sparkline/#s-about">jQuery</a>, <a href="http://www.tnoda.com/blog/2013-12-19">d3.js</a>, and <a href="http://www.highcharts.com/demo/sparkline">HighCharts</a>. Evaluate those solutions to see which is most appropriate for your needs.</p>
<p>If you need to display mathematical symbols and equations, I hear <a href="http://www.mathjax.org/">MathJax</a> is good. Otherwise the topic is outside the scope of this document.</p>
</section>
</article>
</body>
</html>