-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathsidenote.html
78 lines (69 loc) · 6.89 KB
/
sidenote.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
<!doctype html>
<html lang="en-us" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>HTML Aside Element with Edward Tufte Style</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/et-font.css">
<link rel="stylesheet" href="assets/css/et-bootstrap.css">
<style>
aside {
clear: both;
}
article>figure {
clear: left;
}
</style>
</head>
<body>
<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"> <a href="index.html" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none text-light"> <span class="fs-4">ET Bootstrap</span> </a>
<ul class="nav nav-pills">
<li class="nav-item"><a href="sidenote.html" class="nav-link">Sidenotes</a></li>
<li class="nav-item"><a href="type.html" class="nav-link">Typography</a></li>
<li class="nav-item"><a href="https://github.com/dylan-k/tufte-bootstrap" class="nav-link">Source Code</a></li>
</ul>
</header>
</div>
<main class="container px-5">
<article class="ps-md-5 clearfix">
<header class="col-md-12 mt-5 pt-5">
<h1 class="col-md-7 fw-normal mt-4 mb-2 display-5 lh-1">Tufte Bootstrap</h1>
<p class="col-md-7 subtitle fst-italic fs-3 pt-1 col-md-7 float-start">Side Notes</p>
</header>
<p class="col-md-7"> A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image. </p>
<aside class="col-md-4 float-md-end mb-3 ms-md-3 sidenote">
<p>This is a <em>side</em> note. Side notes should be numbered by default.</p>
</aside>
<p class="col-md-7"> As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read. </p>
<aside class="col-md-4 float-md-end mb-3 ms-md-3 sidenote"> <img class="img-fluid" src="assets/img/rhino.png" alt="Image of a Rhinoceros">
<p> F.J. Cole, "The History of Albrecht Dürer's Rhinoceros in Zooological Literature,"" <cite>Science, Medicine, and History: Essays on the Evolution of Scientific Thought and Medical Practice</cite> (London, 1953), ed. E. Ashworth Underwood, 337-356. From page 71 of Edward Tufte's <em>Visual Explanations</em>. </p>
</aside>
<p class="col-md-7">One of the most distinctive features of Tufte's style is his extensive use of sidenotes. These appear in the margin, keeping the main text focused.</p>
<p class="col-md-7">The writing style prioritizes clarity, reducing complexity in both writing and presentation. Sentences flow logically into paragraphs, forming coherent narratives rather than fragmented ideas. Lists are avoided unless essential for the meaning of the text. Instead, clear sentences and paragraphs are encouraged to build a sequential and cohesive understanding.</p>
<aside class="col-md-4 float-md-end mb-3 ms-md-3 sidenote">
<p>This is a <em>side</em> note. Side notes should be numbered by default.</p>
</aside>
<p class="col-md-7">Figures and notes are tightly integrated with the text. Sidenotes and margin notes provide supplementary information while remaining visually and contextually linked to the main content. Figures are placed close to the relevant discussion, avoiding separate sections.</p> <!-- EXAMPLE: side note numbering-->
<aside class="col-md-4 float-md-end mb-3 ms-md-3 sidenote">
<p>Here's another <em>side</em> note. Side notes' numbers increase automatically. Here's another <em>side</em> note. Side notes' numbers increase automatically. Here's another <em>side</em> note. Side notes' numbers increase automatically.</p>
</aside>
<p class="col-md-7">Sidenotes, margin notes, footnotes, and asides serve complementary but distinct roles in enhancing text. Sidenotes are annotations or supplementary information positioned in the margin near the related text, allowing readers to access additional details without disrupting their flow through the main content. They are especially useful for brief clarifications or citations. Margin notes, similar to sidenotes, occupy the same spatial area but often lack numerical references, making them more suited to informal commentary or visually separated explanations. Footnotes, on the other hand, are traditionally placed at the bottom of a page, requiring readers to glance away from the main text, which can disrupt engagement. However, they remain essential for detailed references or elaborate discussions that cannot comfortably fit alongside the text. Asides are broader in scope, functioning as a distinct break from the narrative to provide tangential information, anecdotes, or parenthetical thoughts. While all these elements enrich the reader's experience, their proper use depends on balancing the additional context they provide with the need to preserve the narrative's readability and flow.</p>
<h2 class="mt-5 pt-4 col-md-7 pb-3">Margin Figures</h2>
<p class="col-md-7">A margin figure is essentially a sidenote that contains a figure.</p>
<figure class="col-md-12">
<img class="img-fluid" src="assets/img/napoleons-march.png" />
<p>Voluptate ipsum aliqua in in dolore adipisicing consequat duis sunt eiusmod cillum laboris consequat. Quis sunt sit amet quis. Consequat nulla magna voluptate dolor aute et aliqua exercitation. Anim aliquip elit sit consequat nulla fugiat esse nostrud nostrud amet duis sit ullamco et. Fugiat enim sunt ad aliquip non aute Lorem.</p>
</figure>
<!-- EXAMPLE: margin note w/ image -->
<aside class="col-md-4 float-md-end mb-3 ms-md-3 sidenote">
<!-- <img class="img-fluid" src="assets/img/rhino.png" alt="Image of a Rhinoceros"> -->
<p> F.J. Cole, "The History of Albrecht Dürer's Rhinoceros in Zooological Literature,"" <cite>Science, Medicine, and History: Essays on the Evolution of Scientific Thought and Medical Practice</cite> (London, 1953), ed. E. Ashworth Underwood, 337-356. From page 71 of Edward Tufte's <em>Visual Explanations</em>. </p>
</aside>
<p class="col-md-7">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.</p>
</article>
</main> <!-- end main.container -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>