Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Tufte CSS (edwardtufte.github.io)
60 points by mmastrac on July 14, 2020 | hide | past | favorite | 9 comments


I used a modified version of Tufte.css (forked years ago) for my website[0]. I love the way it works for the longish posts I wanted to make but Tufte's ideas are not without their problems when converted into a web page.

The design really works best in landscape mode. Portrait "works" but the sidenotes interact with the main text and each other in annoying ways. This sometimes makes writing documents harder than it should be since I have to test the output in both Landscape and Portrait to make sure it doesn't look terrible.

This somewhat defeats my goal of having a nice clean markdown->styled html workflow. I often have to make small changes to get things looking OK.

That said, I am very happy with the overall look and functionality of the style.

[0] An example page: https://sheep.horse/2017/4/so_you_want_to_start_an_unpopular...


I wonder if there's a way to move the footnotes to the bottom of a section when the display is narrow...


I _somewhat_ solved this problem with my Jekyll theme based of Tufte CSS[0]. Not perfect, but it just places the marginnote below it's corresponding element.

[0] https://et-jekyll.netlify.app/et-jekyll-theme/

Edit: I realize you are referring to "footnotes" and not margin/side notes, but I believe you could use the same method.


I've thought about this a lot and I can think of two ways but I am too lazy to implement either of them.

The first is to use Javascript to dynamically move the footnotes, or to hide them behind a dynamic interface. I've seen other sites use similar techniques. However, one of my original goals was to avoid JavaScript where possible and there are always some users who don't run js.

The second is just to include the footnotes and sidenotes twice in the document in different places and use css media queries to select between them. This wouldn't be a big deal since I am already generating the document from markdown anyway.


Haha, I enjoyed that. And it looks good. I may even be a return visitor!


Good ideas here. I don’t think that the hack to produce attractive underlining for links is any longer necessary, as recent versions of major web engines seem to render underlining in the style that he’s going for by default. Am I wrong?


I use the Tufte-CSS underlining on gwern.net and noted the recent announcements, which I thought would simplify the CSS nicely.

But the support is still less than the 95% or so of users that most people try to support, and there are still glitches and bugs with them. Given that you'll have issues with the new skip-ink stuff and probably will have to include fallbacks, why bother with the churn? Maybe in another few years...


There's a minor, but longstanding, problem with the ETBembo/ETBook font in use. Any contributions toward fixing it would be helpful: https://github.com/edwardtufte/et-book/issues/20


Thanks, this looks beautiful and simple to use.




Consider applying for YC's Summer 2026 batch! Applications are open till May 4

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: