-
Notifications
You must be signed in to change notification settings - Fork 13
/
index.html
477 lines (471 loc) · 22.2 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
<!DOCTYPE html>
<html xmlns="http:https://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="author" content="David Peng" />
<title>Tufte Handout Sample</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/tufte.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css/latex.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/chinese-simplified-400.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/chinese-simplified-400.css" />
<link rel="stylesheet" href="./stylesheets/tufte-custom.css" />
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
<article><section>
<header id="title-block-header">
<h1 class="title">Tufte Handout Sample</h1>
<p class="author">David Peng</p>
</header>
<p>This sample text is from Dave Liepmann’s <a
href="https://edwardtufte.github.io/tufte-css/">Tufte CSS</a>.</p>
<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>Tufte CSS was created by <a href="http:https://www.daveliepmann.com">Dave
Liepmann</a> and is now an Edward Tufte project. The original idea was
cribbed from <a
href="https://tufte-latex.github.io/tufte-latex/">Tufte-<span
class="latex">L<span class="latex-sup">a</span>T<span
class="latex-sub">e</span>X</span></a> and <a
href="http:https://rmarkdown.rstudio.com/tufte_handout_format.html">R
Markdown’s Tufte Handout format</a>. We give hearty thanks to all the
people who have contributed to those projects.</p>
<p>If you see anything that Tufte CSS could improve, we welcome your
contribution in the form of an issue or pull request on the GitHub
project: <a
href="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/edwardtufte/tufte-css">tufte-css</a>. Please
note the <a
href="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/edwardtufte/tufte-css#contributing">contribution
guidelines</a>.</p>
<p>Finally, a reminder about the goal of this project. The web is not
print. Webpages are not books. Therefore, the goal of Tufte CSS is not
to say “websites should look like this interpretation of Tufte’s books”
but rather “here are some techniques Tufte developed that we’ve found
useful in print; maybe you can find a way to make them useful on the
web”. Tufte CSS is merely a sketch of one way to implement this
particular set of ideas. It should be a starting point, not a design
goal, because any project should present their information as best suits
their particular circumstances.</p>
<h2 id="getting-started">Getting Started</h2>
<p>To use Tufte CSS, copy <code>tufte.css</code> and the
<code>et-book</code> directory of font files to your project directory,
then add the following to your HTML document’s <code>head</code>
block:</p>
<pre class="html"><code><link rel="stylesheet" href="tufte.css"/></code></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>
<h2 id="fundamentals">Fundamentals</h2>
<h3 id="sections-and-headings">Sections and Headings</h3>
<p>Organize your document with an <code>article</code> element inside
your <code>body</code> tag. Inside that, use <code>section</code> tags
around each logical grouping of text and headings.</p>
<p>Tufte CSS uses <code>h1</code> for the document title, <code>p</code>
with class <code>subtitle</code> for the document subtitle,
<code>h2</code> for section headings, and <code>h3</code> 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>
<p>As a bonus, this excerpt regarding the use of headings provides an
example of block quotes. In Tufte CSS they are just lightly styled,
semantically correct HTML using <code>blockquote</code> and
<code>footer</code> elements. See page 20 of <a
href="https://www.edwardtufte.com/tufte/books_vdqi">The Visual Display
of Quantitative Information</a> for an example in print.</p>
<p><span class="newthought">In his later books</span>
<label for="sidenote-1" class="margin-toggle sidenote-number"></label>
<input type="checkbox" id="sidenote-1" class="margin-toggle"/> <span
class="sidenote"><em><a href="http:https://www.edwardtufte.com/tufte/books_be">Beautiful
Evidence</a></em></span>, Tufte starts each section with a bit of
vertical space, a non-indented paragraph, and the first few words of the
sentence set in small caps. For this we use a span with the class
<code>newthought</code>, as demonstrated at the beginning of this
paragraph. Vertical spacing is accomplished separately through
<code><section></code> tags. Be consistent: though we do so in
this paragraph for the purpose of demonstration, do not alternate use of
header elements and the <code>newthought</code> technique. Pick one
approach and stick to it.</p>
<h3 id="text">Text</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. Tufte CSS uses <code>#fffff8</code> and <code>#111111</code>
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.</p>
<p>In print, Tufte has used the proprietary Monotype Bembo
<label for="sidenote-2" class="margin-toggle sidenote-number"></label>
<input type="checkbox" id="sidenote-2" class="margin-toggle"/> <span
class="sidenote">See Tufte’s comment in the
<a href="http:https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000Vt">Tufte
book fonts</a> thread.</span> font. A similar effect is achieved in
digital formats with the now open-source <a
href="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/edwardtufte/et-book">ETBook</a>, which Tufte
CSS supplies with a <code>@font-face</code> reference to a .ttf file. In
case ETBook somehow doesn’t work, Tufte CSS shifts gracefully to other
serif fonts like Palatino and Georgia.</p>
<p>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.</p>
<p>If you prefer sans-serifs, use the <code>sans</code> class. It relies
on Gill Sans, Tufte’s sans-serif font of choice.</p>
<p>Links in Tufte CSS match the body text in color and do not change on
mouseover or when clicked. Here is a <a href="#">dummy example</a> that
goes nowhere. These links are underlined, since this is the most widely
recognized indicator of clickable text.
<label for="marginnote-1" class="margin-toggle">⊕</label>
<input type="checkbox" id="marginnote-1" class="margin-toggle"/> <span
class="marginnote">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.</span> 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
<code>text-decoration</code>. Credit goes to Adam Schwartz for that
technique.</p>
<p>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.</p>
<h2 id="sidenotes-footnotes-and-marginal-notes">Sidenotes: footnotes and
marginal notes</h2>
<p>One of the most distinctive features of Tufte’s style is his
extensive use of
sidenotes.<label for="sidenote-3" class="margin-toggle sidenote-number"></label>
<input type="checkbox" id="sidenote-3" class="margin-toggle"/> <span
class="sidenote">This is a sidenote.</span> 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.</p>
<p>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 <em>as close as possible</em> 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.</p>
<p>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:</p>
<pre class="html"><code><label for="sn-demo" class="margin-toggle sidenote-number"></label>
<input type="checkbox" id="sn-demo" class="margin-toggle"/></code></pre>
<p>You must manually assign a reference <code>id</code> to each side or
margin note, replacing “sn-demo” in the <code>for</code> and the
<code>id</code> attribute values with an appropriate descriptor. It is
useful to use prefixes like <code>sn-</code> for sidenotes and
<code>mn-</code> for margin notes.</p>
<p>Immediately adjacent to that sidenote reference in the main text goes
the sidenote content itself, in a <code>span</code> with class
<code>sidenote</code>. 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.</p>
<p>If you want a sidenote without footnote-style numberings, then you
want a margin note.
<label for="marginnote-2" class="margin-toggle">⊕</label>
<input type="checkbox" id="marginnote-2" class="margin-toggle"/> <span
class="marginnote">This is a margin note. Notice there isn’t a number
preceding the note.</span> 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 (<code>&#8853;</code>), but it’s
up to you.</p>
<p>Margin notes are created just like sidenotes, but with the
<code>marginnote</code> class for the content and the
<code>margin-toggle</code> class for the label and dummy checkbox. For
instance, here is the code for the margin note used in the previous
paragraph:</p>
<pre class="html"><code><label for="mn-demo" class="margin-toggle">&#8853;</label>
<input type="checkbox" id="mn-demo" class="margin-toggle"/>
<span class="marginnote">
This is a margin note. Notice there isn't a number preceding the note.
</span></code></pre>
<p>Figures in the margin are created as margin notes, as demonstrated in
the next section.</p>
<h2 id="figures">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>Figures should try to use the <code>figure</code> 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:</p>
<p><label for="marginnote-3" class="margin-toggle">⊕</label>
<input type="checkbox" id="marginnote-3" class="margin-toggle"/> <span
class="marginnote">From Edward Tufte, <em>Visual Display of Quantitative
Information</em>, page 92.</span>
<img src="./img/exports-imports.png" alt="Exports and Imports to and from Denmark & Norway from 1700 to
1780" /></p>
<p><label for="marginnote-4" class="margin-toggle">⊕</label>
<input type="checkbox" id="marginnote-4" class="margin-toggle"/> <span
class="marginnote"><img src="./img/rhino.png" alt="Image of a Rhinoceros" />F.J.
Cole, “The History of Albrecht Dürer’s Rhinoceros in Zooological
Literature,” <em>Science, Medicine, and History: Essays on the Evolution
of Scientific Thought and Medical Practice</em>, ed. E. Ashworth
Underwood, 337-356. From page 71 of Edward Tufte’s <em>Visual
Explanations</em>.</span> 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 <code>p</code> tag, as seen to the
right of this paragraph.</p>
<p>If you need a full-width figure, give it the <code>fullwidth</code>
class. Make sure that’s inside an <code>article</code>, 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 <em>Beautiful Evidence</em>, page 122-124.</p>
<figure class="fullwidth">
<img src="./img/napoleons-march.png" alt="Figurative map of the successive losses of the French Army in
the Russian campaign, 1812-1813"/>
</figure>
<p><span class="marginnote">Figurative map of the successive losses of
the French Army in the Russian campaign, 1812-1813</span></p>
<h2 id="tables">Tables</h2>
<p>Table example:</p>
<div style="width: 55%">
<p><span class="marginnote">Some cars</span></p>
<table style="width:100%;">
<colgroup>
<col style="width: 6%" />
<col style="width: 7%" />
<col style="width: 41%" />
<col style="width: 36%" />
<col style="width: 9%" />
</colgroup>
<thead>
<tr class="header">
<th style="text-align: right;">Year</th>
<th style="text-align: left;">Make</th>
<th style="text-align: left;">Model</th>
<th style="text-align: left;">Description</th>
<th style="text-align: right;">Price</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: right;">1997</td>
<td style="text-align: left;">Ford</td>
<td style="text-align: left;">E350</td>
<td style="text-align: left;">ac, abs, moon</td>
<td style="text-align: right;">3000.00</td>
</tr>
<tr class="even">
<td style="text-align: right;">1999</td>
<td style="text-align: left;">Chevy</td>
<td style="text-align: left;">Venture “Extended Edition”</td>
<td style="text-align: left;"></td>
<td style="text-align: right;">4900.00</td>
</tr>
<tr class="odd">
<td style="text-align: right;">1999</td>
<td style="text-align: left;">Chevy</td>
<td style="text-align: left;">Venture “Extended Edition, Very
Large”</td>
<td style="text-align: left;"></td>
<td style="text-align: right;">5000.00</td>
</tr>
<tr class="even">
<td style="text-align: right;">1996</td>
<td style="text-align: left;">Jeep</td>
<td style="text-align: left;">Grand Cherokee</td>
<td style="text-align: left;">MUST SELL! air, moon roof, loaded</td>
<td style="text-align: right;">4799.00</td>
</tr>
</tbody>
</table>
</div>
<h2 id="full-width-text-blocks">Full-width text blocks</h2>
<div class="fullwidth">
<p>
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.
</p>
</div>
<h2 id="use-pp-to-preprocess-markdown">Use pp to preprocess
Markdown</h2>
<p>We can use a list of macros defined below to generate a HTML or <span
class="latex">L<span class="latex-sup">a</span>T<span
class="latex-sub">e</span>X</span> file depend on the format.</p>
<p>See example below:</p>
<pre><code>!comment(
// Tufte style Markdown macros
)
!import(tufte/audio.pp)
!import(tufte/figure.pp)
!import(tufte/fullwidth.pp)
!import(tufte/fullwidthfigure.pp)
!import(tufte/fullwidthvideo.pp)
!import(tufte/latex.pp)
!import(tufte/marginfigure.pp)
!import(tufte/marginnote.pp)
!import(tufte/newthought.pp)
!import(tufte/sidenote.pp)
!import(tufte/table.pp)
!import(tufte/video.pp)
!comment(
// HTML tags macros
)
!import(html/a.pp)
!import(html/abbr.pp)
!import(html/center.pp)
!import(html/em.pp)
!import(html/flushleft.pp)
!import(html/flushright.pp)
!import(html/img.pp)
!import(html/kbd.pp)
!import(html/mark.pp)
!import(html/newpage.pp)
!import(html/strike.pp)
!import(html/strong.pp)
!import(html/textcolor.pp)
!import(html/today.pp)
!import(html/u.pp)
</code></pre>
<h2 id="use-pandoc-to-convert-markdown-to-html-and-pdf">Use Pandoc to
convert Markdown to HTML and PDF</h2>
<p>See example below:</p>
<pre><code>default: update markdown html pdf
update:
curl -o templates/tufte-handout.tex \
https://cdn.jsdelivr.net/gh/rstudio/tufte/inst/rmarkdown/templates/tufte_handout/resources/tufte-handout.tex
markdown:
pp README.pp.md > README.md
html:
pp -html -import=macros/main.pp sample-handout.pp.md | \
pandoc -d defaults/html.yml -o index.html
pdf:
pp -pdf -import=macros/main.pp sample-handout.pp.md | \
pandoc -d defaults/pdf.yml -o sample-handout.pdf</code></pre>
<h2 id="some-html-tags">Some HTML tags</h2>
<h3 id="image">Image</h3>
<p>You can include a image file like this:</p>
<p><img src="./img/rhino.png" alt="Rhino" /></p>
<h3 id="strong">Strong</h3>
<p>This is a <strong>strong</strong> text.</p>
<h3 id="emphasis">Emphasis</h3>
<p>This is a <em>emphasis</em> text.</p>
<h3 id="underline">Underline</h3>
<p>This is a <u>underline</u> text.</p>
<h3 id="abbr">Abbr</h3>
<p><abbr title="Hyper Text Markup Language">HTML</abbr> is a abbr.</p>
<h3 id="colored-text">Colored text</h3>
<p>This is a <span style="color:red">red</span> color text.</p>
<h3 id="left-aligned-text">Left-aligned text</h3>
<div class="fullwidth">
<p>
<div>
<p style="text-align: left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</p>
</div>
<h3 id="right-aligned-text">Right-aligned text</h3>
<div class="fullwidth">
<p>
<div>
<p style="text-align: right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</p>
</div>
<h3 id="centered-text">Centered text</h3>
<div class="fullwidth">
<p>
<div style="margin: 0 auto">
<p style="text-align: center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</p>
</div>
<h3 id="links">Links</h3>
<p><a href="https://google.com">Google</a> is the biggest search engine
in the world.</p>
<h3 id="new-page">New page</h3>
<p>Start a new page below.</p>
<div style="page-break-after: always">
</div>
<h3 id="today">Today</h3>
<p>Today is 2023-05-10.</p>
<h3 id="keyboard">Keyboard</h3>
<p>Copy text with <kbd>Ctrl</kbd> + <kbd>C</kbd>. Save web image in
Photoshop with <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Shift</kbd> +
<kbd>S</kbd>.</p>
<h3 id="strike-out">Strike out</h3>
<p>This is a <strike>strike out</strike> text.</p>
<h3 id="highlight">Highlight</h3>
<p>This ia a <mark>HIGHLIGHTED</mark> text.</p>
<h3 id="latex"><span class="latex">L<span
class="latex-sup">a</span>T<span class="latex-sub">e</span>X</span></h3>
<p><span class="latex">L<span class="latex-sup">a</span>T<span
class="latex-sub">e</span>X</span></p>
<p><span class="latex">T<span class="latex-sub">e</span>X</span></p>
<h2 id="read-more">Read more</h2>
<ul>
<li><a href="https://edwardtufte.github.io/tufte-css/">Tufte
CSS</a></li>
<li><a href="https://tufte-latex.github.io/tufte-latex/">Tufte-<span
class="latex">L<span class="latex-sup">a</span>T<span
class="latex-sub">e</span>X</span></a></li>
<li><a href="https://rstudio.github.io/tufte/">RStudio Tufte
Handout</a></li>
<li><a href="https://rstudio.github.io/tufte/cn/">R Markdown Tufte
Style</a></li>
<li><a
href="https://github.com/rstudio/tufte/blob/master/inst/rmarkdown/templates/tufte_handout/resources/tufte-handout.tex">RStudio
Pandoc template: tufte-handout.tex</a></li>
</ul>
</section></article>
</body>
</html>