Tufte CSS Example | DSri Seah: Investigative Designer

EDITING PHASE:first draft

This is a port of the TufteCSS (with several adaptations) to the Eleventy static site generator build system. It's implemented as a bunch of custom shortcodes for Nunjucks templating.

Adapted from Dave Liepmann's Original

This is Sri's modification of Tufte CSS implemented with Hugo shortcodes in a Markdown file.

Markdown Tests

Markdown stuff like 'indent for code' works!

is real

New Stuff

Subtitles

my subtitle

Blockquote Example

Use {% Quote attrib=, url= %}...{% endQuote %} shortcode for Blockquotes!

[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.
Edward Tufte, forum post, ‘Book design: advice and examples’ thread
That's the end of the quote!
Can also use Regular Markdown Blockquotes if you don't need the attribution. -- Sri
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.
George Orwell, “Politics and the English Language”
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.
The syntax is {% Epigraph attrib= %} ... {% endEpigraph %}
SideNote Example
The {% SideNote id= %}...{% endSideNote%} inline shortcode contains the contents of the sidenote. The snid is a unique string representing that sidenote.
Example:
In print, Tufte has used the proprietary Monotype BemboSee Tufte’s comment in the Tufte book fonts thread. font. A similar effect is achieved in digital formats with the now open-source ETBook, 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.
MarginNote Example
⊕ note
This is a margin note. Notice there isn’t a number preceding the note.

If you want a sidenote without footnote-style numberings, then you want a margin note. Use {% MarginNote id= %}...{% endMarginNote%}!
Figures in the margin are created as margin notes, as demonstrated in the next section.
Figure
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.
The shortcode is {% Figure id=, src= %} ... {% endFigure %} as a pair containing the figure capture text.
For example, most of the time one should introduce a figure directly into the main flow of discussion, like so:
⊕ caption From Edward Tufte, Visual Display of Quantitative Information, page 92.
MarginFigure
⊕ caption
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.

For figures in the margin, use {% MarginFigure id=, src= %} ... {% endMarginFigure %}
FullFigure
If you need a full-width figure, give it the fullwidth class. The shortcode to use is {% FullFigure id=, src= %}. Note that there is no closing tag for this style. Example:
Tufte also provides a way of wrapping iframes. Our shortcode is {% IFrameWrapper %} <iframe src= ></iframe> {% endIFrameWrapper %} as a pair of shortcodes containing the iframe.
Code
Using triple-backticks for syntax highlighting is provided by Eleventy Prism, but it does not support the line selection syntax that Hugo provided out of the box.
function foo(a: number, b, c) {
  console.log('mow');
}
Copyright © 2022-2023 by DSri Seah
DSri Seah: Investigative Designer
about | recent updates | all entries | work log
Journal
.
Expeditions
Artifacts
Tools
Releases
.
Concepts
Tropes