5 ms·

Tufte CSS

132 points by stefankuehnel 4y ago

Otternonsenz 4y ago
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!
pjot 4y ago
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.
- catchnear4321 4y ago
  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.
sramam 4y ago
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.
- detritus 4y ago
  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 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: <link rel="stylesheet" href="tufte.css"/> 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."
- ssttoo 4y ago
  https://github.com/edwardtufte/tufte-css https://github.com/edwardtufte/tufte-css
gjstein 4y ago
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-alphazero/ https://cs.gmu.edu/~gjstein/2018/12/toward-real-world-alphaz...
- gaws 4y ago
  > 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.
- detritus 4y ago
  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.
- aranke 4y ago
  Yup, I found latex.css (https://latex.vercel.app/ https://latex.vercel.app/) has a better layout but worse typography so a hybrid is the best of both worlds.
- metaphor 4y ago
  > 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.
- 4y ago
zzleeper 4y ago
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?
- ranic 4y ago
  Here's one for Hugo: https://themes.gohugo.io/themes/hugo-tufte/ https://themes.gohugo.io/themes/hugo-tufte/ And here's one for Jekyll: https://github.com/clayh53/tufte-jekyll https://github.com/clayh53/tufte-jekyll
- aranke 4y ago
  I’ve had good luck integrating with Astro.JS (https://astro.build/ https://astro.build/), good luck! My website is in my bio, happy to chat if you want to do something similar.
- bendiksolheim 4y ago
  I have made my own theme for Zola (https://www.getzola.org 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/ https://edwardtufte.github.io/tufte-css/. You can see my website on my profile, if you are interested.
- kdheepak 4y ago
  There's https://github.com/jez/tufte-pandoc-css 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/ https://blog.kdheepak.com/ Though I had to write a lua filter to make the Pandoc margin notes work appropriately :)
AuthorizedCust 4y ago
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.)
richardanaya 4y ago
Where's the yellow?
aranke 4y ago
If anyone wants to use this for their website, I found the best luck in adopting the layout from https://latex.vercel.app/ https://latex.vercel.app/ and overriding typography with Tufte CSS. My 80% finished website is in my bio if you’re interested.
Nezteb 4y ago
I’d never heard of Tufte or this CSS package before, but I recognized it instantly because I use https://scribe.rip/ https://scribe.rip/ as my preferred Medium frontend. Now I understand the design choices a bit more. Neat!
ecuaflo 4y ago
I think this would be great as a tailwind css plugin similar to the typography plugin [0] [0] https://tailwindcss.com/docs/typography-plugin https://tailwindcss.com/docs/typography-plugin
AlbertCory 4y ago
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.
5cott0 4y ago
I am not a fan of how et-book looks on windows, especially firefox.
- cratermoon 4y ago
  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.
notpushkin 4y ago
I'm trying to cross this with Material for Mkdocs over at https://material-tufte.ale.sh/ 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/ https://lunni.dev/
- bjornasm 4y ago
  This looks like a match made in heaven! They should add that as a feature into the original project, imo.
  - notpushkin 4y ago
    Thank you! You can upvote it here (and perhaps share some ideas?): https://github.com/squidfunk/mkdocs-material/discussions/4688 https://github.com/squidfunk/mkdocs-material/discussions/468...
bjornasm 4y ago
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.
- daveliepmann 4y ago
  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/ 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!).
AndrewStephens 4y ago
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 https://sheep.horse/everything.html

132 points by stefankuehnel 4y ago

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!

pjot 4y ago

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.

catchnear4321 4y ago
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.

sramam 4y ago

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.

detritus 4y ago
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 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: <link rel="stylesheet" href="tufte.css"/> 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."
ssttoo 4y ago
https://github.com/edwardtufte/tufte-css https://github.com/edwardtufte/tufte-css

gjstein 4y ago

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-alphazero/ https://cs.gmu.edu/~gjstein/2018/12/toward-real-world-alphaz...

gaws 4y ago
> 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.
detritus 4y ago
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.
aranke 4y ago
Yup, I found latex.css (https://latex.vercel.app/ https://latex.vercel.app/) has a better layout but worse typography so a hybrid is the best of both worlds.
metaphor 4y ago
> 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.
4y ago

zzleeper 4y ago

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?

ranic 4y ago
Here's one for Hugo: https://themes.gohugo.io/themes/hugo-tufte/ https://themes.gohugo.io/themes/hugo-tufte/ And here's one for Jekyll: https://github.com/clayh53/tufte-jekyll https://github.com/clayh53/tufte-jekyll
aranke 4y ago
I’ve had good luck integrating with Astro.JS (https://astro.build/ https://astro.build/), good luck! My website is in my bio, happy to chat if you want to do something similar.
bendiksolheim 4y ago
I have made my own theme for Zola (https://www.getzola.org 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/ https://edwardtufte.github.io/tufte-css/. You can see my website on my profile, if you are interested.
kdheepak 4y ago
There's https://github.com/jez/tufte-pandoc-css 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/ https://blog.kdheepak.com/ Though I had to write a lua filter to make the Pandoc margin notes work appropriately :)

AuthorizedCust 4y ago

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

richardanaya 4y ago

Where's the yellow?

aranke 4y ago

If anyone wants to use this for their website, I found the best luck in adopting the layout from https://latex.vercel.app/ https://latex.vercel.app/ and overriding typography with Tufte CSS. My 80% finished website is in my bio if you’re interested.

Nezteb 4y ago

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

ecuaflo 4y ago

I think this would be great as a tailwind css plugin similar to the typography plugin [0] [0] https://tailwindcss.com/docs/typography-plugin https://tailwindcss.com/docs/typography-plugin

AlbertCory 4y ago

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.

5cott0 4y ago

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

cratermoon 4y ago
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.

notpushkin 4y ago

I'm trying to cross this with Material for Mkdocs over at https://material-tufte.ale.sh/ 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/ https://lunni.dev/

bjornasm 4y ago
This looks like a match made in heaven! They should add that as a feature into the original project, imo.
- notpushkin 4y ago
  Thank you! You can upvote it here (and perhaps share some ideas?): https://github.com/squidfunk/mkdocs-material/discussions/4688 https://github.com/squidfunk/mkdocs-material/discussions/468...

bjornasm 4y ago

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.

daveliepmann 4y ago
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/ 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!).

AndrewStephens 4y ago

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 https://sheep.horse/everything.html