Tufte CSS | Hacker News Reader

Tufte CSS

edwardtufte.github.io

132 pointsstefankuehnel32 comments

This gets shared on here from time to time and while I love it (and Tufte), it really falls short on mobile devices. When the page is sufficiently narrow, revealing sidebar items is done via small clickable elements: if the user has never seen those before, I expect they will miss out on them. Note that this includes both footnotes and also figure captions, which are often not "optional content" as are many of the sidenotes. My own blog / lab website [1] has a similar style, yet instead makes all sidebar elements visible even when the page is collapsed; fell free to emulate!

[1] https://cs.gmu.edu/~gjstein/2018/12/toward-real-world-alphaz...

That was the irritant I noticed. If I was to deploy this I'd de-Tufte the wee footnote numeral links a bit and make them more Webby, somehow. Otherwise it's a great-looking implementation.

Yup, I found latex.css (https://latex.vercel.app/) has a better layout but worse typography so a hybrid is the best of both worlds.

> When the page is sufficiently narrow, revealing sidebar items is done via small clickable elements: if the user has never seen those before, I expect they will miss out on them.

Absolutely this!

Upon seeing sidenotes and before reading the article, my first instinct was to see how these elements would react in full v. narrow, and was immediately turned off with how information appeared to wholesale disappear.

Thanks for sharing your blog as a contrasting implementation...so clean and beautifully nuanced.

I just checked one of the best "online-first" technical books I can think of, "Crafting Interpreters" by Bob Nystrom, because it uses side notes heavily. What it does when the screen width is narrow (like on a phone) is move the side notes to the main flow, but in a smaller font size and separated with horizontal lines to set them off.

It does break up the flow a little bit (which is why they're side notes in the first place), but at least they're clear and obvious. And this book's side notes are often quirky and interesting -- definitely worth reading!

Example: https://craftinginterpreters.com/the-lox-language.html

I went to read the page and found them very intuitive. In fact, it took me longer to figure out what you meant by "sidebar elements". I think you meant "sidenote elements".

A very common idiom in long-form webpages is a clickable superscript to show a footnote-like item inline.

To improve usability for people less used to this sort of format I would underline it in blue like a link. I know it's not fashionable, but I think click targets should be styled as either links or buttons and this fits the concept of a link better.

You're completely right the target should be larger. The fix is to add a little padding.

> it really falls short on mobile devices

Tuft and his obsessives have always lived in a print-focused world; the digital equivalent only being the desktop computer.

If anyone wants to use this for their website, I found the best luck in adopting the layout from https://latex.vercel.app/ and overriding typography with Tufte CSS.

My 80% finished website is in my bio if you’re interested.

I'm trying to cross this with Material for Mkdocs over at https://material-tufte.ale.sh/.

It's hacky right now, but the result is beautiful IMO. You can find some more examples in the documentation here: https://lunni.dev/

This looks like a match made in heaven! They should add that as a feature into the original project, imo.

Thank you! You can upvote it here (and perhaps share some ideas?): https://github.com/squidfunk/mkdocs-material/discussions/468...

Taking one of Tufte’s classes was such a great experience. A large takeaway from it is on information density - and is why there is such an emphasis on writing side-notes and in the margins.

I found him to be a pompous ass and the event to be a bit cultish. The souvenir sales out front solidified it.

Whew, he didn’t like poking at theory. Because he established his dogma.

I love the minimalistic/back to the roots/KISS style of academic homepages, which I feel this tries to mimic. I am making my own portfolio/academic blog these days where I do some of the same (might change the background from white to some offwhite thanks to this).

While I don't think it works for every type of webpage, I think it really shines when it coems to leave the spotlight for the text content of a page.

You're right, the academic homepage style has always been a major inspiration, including during this project. (It was one part of refusing to use a more robust Javascript solution to get link underlines which clear descenders.) I still find the [Prof. Dr. Style](http://contemporary-home-computing.org/prof-dr-style/) compelling and think about ways to emulate it.

I'm convinced there's a sweet spot which retains the academic homepage "feel" while solving some fundamental readability issues like width, whitespace, and contrast. I think of it as one step of complexity "up" from bettermotherfuckingwebsite (but no more!).

When his first book came out, Internet was geeks-only, Amazon didn't exist, and you had to order the physical book directly from him, as I recall. Maybe your bookstore would order it for you.

Nonetheless, it became a cult sensation. Now that's a debut book.

I am a big fan of Tufte's work and try to employ my understanding of it when possible. I've never really had a criticism that seemed worthwhile. Even this page - I read to the end and thought this is fantastic.

However, perhaps because I only skimmed the page contents, I struggled to find the link to the github project.

Wonder if that is my brain being conditioned by expectations of a "normal" webpage or that the links have to be highlighted differently.

PS: I do not recall if Tufte's work addresses hyper-links explicitly.

ed - oh, I'm so wrong below.

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

lol@ me. It was right there, at the top.

https://github.com/edwardtufte/tufte-css

- - -

I don't think it relies on Github to purvey the files. I think it just encourages you to view source and grab the files yourself, old-school style, which sort of makes sense in context...

> "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:

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

https://github.com/edwardtufte/tufte-css

This gets posted here every few months, and every few months I feel obliged to mention that my blog[0] uses a modification of this.

I find it provides a very pleasing experience for reading longer posts although I will admit it works better on desktop than on phones.

[0] https://sheep.horse/everything.html

I’m not at my home Obsidian vault, but now I’m curious if there is a way to make this work within the theme settings for Obsidian.

If anyone else gets to it before I do, let me know if it needs some reworking. I’ll post my findings in a reply to this comment once I have the ability!

I’d never heard of Tufte or this CSS package before, but I recognized it instantly because I use https://scribe.rip/ as my preferred Medium frontend. Now I understand the design choices a bit more. Neat!

I think this would be great as a tailwind css plugin similar to the typography plugin [0]

[0] https://tailwindcss.com/docs/typography-plugin

I love this. I wish there was a straightforward way to get this sensibility into Google Docs, MS Word, or WordPress. So far, not seeing this.

(The WordPress themes centered on this appear to have been abandoned years ago.)

I am not a fan of how et-book looks on windows, especially firefox.

Conventional wisdom says sans-serifs fonts are more legible than serif fonts for body text on screens. I have difficulty reading long blocks of et-book on any screen, whether it's in a browser or other application. I prefer Palatino for body text, if a design really insists on having serifs for screen. For print, although either et-book or the Bembo typeface that inspired work fine.

The rest of the design guidance, the margin notes, the figures, are great but tend to degrade poorly on smaller device screens.

This is amazing. I wonder if it's possible to integrate it with a static site generator (Hugo Jekyll pelican etc) so I can get the best of both worlds?

I’ve had good luck integrating with Astro.JS (https://astro.build/), good luck!

My website is in my bio, happy to chat if you want to do something similar.

I have made my own theme for Zola (https://www.getzola.org) based on Tufte CSS. It was mostly straight forward, I believe I more or less recreated the structure on https://edwardtufte.github.io/tufte-css/. You can see my website on my profile, if you are interested.

There's https://github.com/jez/tufte-pandoc-css which integrates with Pandoc.

I use it for my blog that features margin notes from time to time: https://blog.kdheepak.com/

Though I had to write a lua filter to make the Pandoc margin notes work appropriately :)

Here's one for Hugo: https://themes.gohugo.io/themes/hugo-tufte/

And here's one for Jekyll: https://github.com/clayh53/tufte-jekyll

Where's the yellow?

Reply on news.ycombinator.com