Tufte CSS

Dave Liepmann

Happy People Jumping These people jump without even being afraid of the landing. They will surely break an ankle and regret it.

I am in a new paragraph.

Tufte CSS was created by Dave Liepmann and is now an Edward Tufte project. The original idea was cribbed from Tufte-LaTeX and R Markdown’s Tufte Handout format. We give hearty thanks to all the people who have contributed to those projects.

This is a statement that really stands on its own... Literally.

Jan Geselle

I need a longer test paragraph here, so I'm going to write a bunch of nonsense. This is a test paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Here we see a picture of humans who experience an emotion that they call "joy". Happy People Jumping

This is text with a sidenote This is the sidenote. outside of a figure.

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: tufte-css. Please note the contribution guidelines.

Getting Started

To use Tufte CSS, copy tufte.css and the et-book directory of font files to your project directory, then add the following to your HTML document’s head block:

<!DOCTYPE html>
<html lang="en">
<head>

<script>
	// Just a lil’ script to show off that inline JS gets highlighted
	window.console && console.log('foo');
</script>
<meta charset="utf-8" />
<link rel="icon" href="assets/favicon.png" />
<title>Prism</title>
<link rel="stylesheet" href="assets/style.css" />
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
<script src="assets/vendor/prefixfree.min.js"></script>

<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
<script src="https://www.google-analytics.com/ga.js" async></script>
</head>
<body>

<header>
	<div class="intro" data-src="assets/templates/header-main.html" data-type="text/html"></div>

	<ul id="features">
		<li>
			<strong>Dead simple</strong>
			Include prism.css and prism.js, use proper HTML5 code tags (<code>code.language-xxxx</code>), done!
		</li>
		<li>
			<strong>Intuitive</strong>
			Language classes are inherited so you can only define the language once for multiple code snippets.
		</li>
		<li>
			<strong>Light as a feather</strong>
			The core is 2KB minified &amp; gzipped. Languages add 0.3-0.5KB each, themes are around 1KB.
		</li>
		<li>
			<strong>Blazing fast</strong>
			Supports parallelism with Web Workers, if available.
		</li>
		<li>
			<strong>Extensible</strong>
			Define new languages or extend existing ones.
			Add new features thanks to Prism’s plugin architecture.
		</li>
		<li>
			<strong>Easy styling</strong>
			All styling is done through CSS, with sensible class names like <code>.comment</code>, <code>.string</code>, <code>.property</code> etc
		</li>
	</ul>

</header>

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.

Fundamentals

Sections and Headings

Organize your document with an article element inside your body tag. Inside that, use section tags around each logical grouping of text and headings.

bool getBit(int num, int i) {
    return ((num & (1<<i)) != 0);
}

Software Development

If you can’t make a relationship work...

...have our developers code the perfect AI girlfriend for you!

Get Your Nerdy Kick

Tufte CSS uses h1 for the document title, p with class subtitle for the document subtitle, h2 for section headings, and h3 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:

[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.

Still Life

As a bonus, this excerpt regarding headings provides an example of block quotes. In Tufte CSS they are lightly styled, semantically correct HTML using blockquote and footer elements. See page 20 of The Visual Display of Quantitative Information for a print example.

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”

Sidenotes: Footnotes and Marginal Notes

One of the most distinctive features of Tufte’s style is his extensive use of sidenotes.This is a sidenote. 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.

Relationship Coaching

Heal from past relationship trauma.

  • Personalized Program
  • Holistic Approach
  • Practical Tools

Reclaim your love life today.

Book A Free Consultation

Sidenotes consist of two elements—a superscript reference number and the sidenote content. For optimal readability, enclose the main text in a section tag.

If you want a sidenote without a number, you want a margin note.

Dummy Link

Margin notes are created like sidenotes, but with the marginnote class for content and margin-toggle for the label.

Epigraphs (continued)

[It is] notable that the Feynman lectures (3 volumes) write about all of physics in 1800 pages, using only 2 levels of hierarchical headings...

[It is] notable that the Feynman lectures (3 volumes) write about all of physics in 1800 pages, using only 2 levels of hierarchical headings...

[It is] notable that the Feynman lectures (3 volumes) write about all of physics in 1800 pages, using only 2 levels of hierarchical headings...

The English language . . . becomes ugly and inaccurate because our thoughts are foolish.

For a successful technology, reality must take precedence over public relations.

Richard P. Feynman, “What Do You Care What Other People Think?”
Corporate Coffee Break text after

This is text with a sidenote This is the sidenote. outside of a figure.