href="tufte.css"/
August 13, 2015 6:51 PM   Subscribe

Tufte CSS : "Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte's books and handouts. Tufte's style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography." via mefi projects from Mefi's own daveliepmann, 'maker and maintainer'.

From the website's introductory page (linked above):
"Finally, a reminder about the goal of this project. The web is not print. Webpages are not books. Therefore, the goal of Tufte CSS is not to say 'websites should look like this interpretation of Tufte's books' but rather 'here are some techniques Tufte developed that we've found useful in print; maybe you can find a way to make them useful on the web'. Tufte CSS is merely a sketch of one way to implement this particular set of ideas. It should be a starting point, not a design goal, because any project should present their information as best suits their particular circumstances."
posted by joseph conrad is fully awesome (35 comments total) 107 users marked this as a favorite
 
I have long been a fan of tufte-latex.
posted by grobstein at 7:01 PM on August 13, 2015 [1 favorite]


This is pretty great.
posted by eustacescrubb at 7:04 PM on August 13, 2015 [1 favorite]


As a beginning course instructor about to start teaching soon, I've been toying with this to generate nice looking class notes out of Markdown by way of Pandoc. So far, I'm pretty excited to see it working okay, though I'm not quite generating the HTML5 that the css desires. More hacking is necessary to fix footnotes => sidenotes and other rendering glitches, but it already looks worlds better than the plain HTML I was going to present.
posted by phlyingpenguin at 7:07 PM on August 13, 2015


"Finally, a reminder about the goal of this project. The web is not print. Webpages are not books.

HELL FUCKING YES. HALLE FUCKING LLUJA!
posted by eriko at 7:08 PM on August 13, 2015 [8 favorites]




I'm not quite generating the HTML5 that the css desires
Give me five or ten minutes. I'm about to push an update with some examples and fixes for several pain points regarding sidenotes.
posted by daveliepmann at 7:16 PM on August 13, 2015 [4 favorites]


This looks promising. Thanks!
posted by Thorzdad at 7:18 PM on August 13, 2015 [1 favorite]


Came here to quote "Web pages are not books," found that accomplished.

Everything but the first table example was a delight even using my intentionally bigfonted browser. Nicely done!
posted by abulafa at 7:24 PM on August 13, 2015


I love this, daveliepmann, and can't wait to use it. I'm thinking I'll apply it to my cutting edge visualizations using animated 3d pie graphs and maybe that one really complex chord diagram with all the extra axes in it.
posted by Nelson at 7:40 PM on August 13, 2015 [6 favorites]


// imperative programming:
for (i = 0; i++; i <= num) {
  all_the_things[i].useTufteStyle();
}



I think he means
for (i = 0; i <= num ; i++)
Fucking designers.
posted by w0mbat at 10:56 PM on August 13, 2015 [5 favorites]


I love this and will probably use it professionally, but I have to say, as much as I want to agree with Tufte's assertions about having only two levels of hierarchy and that relying on bulleted lists is a sign that you need better paragraphs...well in practice it just isn't true.

Citing a famous Physics textbook doesn't prove this point, either, since that presumes the majority of readers have the mental fortitude to read ACTUAL WHOLE PARAGRAPHS FOR LONGER THAN 3 SECONDS

I have learned through sad experience that sometimes the only way to get people to read and actually think about shit --especially when it comes to client requirements and custom software development-- is to put that shit in a numbered list. This is the only way to prove to people that they did indeed ask for the feature they now refuse to pay for.

See? It's right here, Right Fucking Here In section 2.1.1.4.
posted by Doleful Creature at 11:03 PM on August 13, 2015 [12 favorites]


I'd love to see this integrated with iPython for even beautifuller iPython notebooks.
posted by kandinski at 11:11 PM on August 13, 2015 [3 favorites]


I think he means
for (i = 0; i <= num ; i++)
I am so, so glad I've forgotten the syntax of that bullshit. Map and fold for life. (And mad props to my CIDER homies for putting docstrings in my mode-line.)
Fucking designers.
Let me be extremely clear: I am a software developer, not a designer. This was a toy I made for fun. I happened to have some time to work on it because of a recent lull in my regular slate of back-end work. Now, every project worth doing teaches you something, and this was no exception. I've learned a lot about areas of design and typography that I wasn't even aware of before. That's partially due to the research into Tufte's work that came naturally from making this, and partially due to the frenzy of feedback I've received from hackernews. But releasing a side project in HTML and CSS does not make me a designer.
posted by daveliepmann at 11:39 PM on August 13, 2015 [10 favorites]


daveliepmann, map and fold are great for sure. Forgetting how a c-style loop works isn't. Most practitioners in our field are well-accustomed to that paradigm, and to pretend you're above it is very arrogant.
posted by 7segment at 1:24 AM on August 14, 2015 [3 favorites]


Yeah, map and fold are very nice, but let's not pretend they completely replace C-style for loops. For instance, there are many cases where you want to explicitly know the value of i.
posted by Joakim Ziegler at 1:30 AM on August 14, 2015 [3 favorites]


I think he means
for (i = 0; i <= num ; i++)
Fucking designers.


If you're going to nit-pick someone's code you might as well get it right :p

for (var i = 0; i <= num ; i++)
posted by urbanwhaleshark at 3:16 AM on August 14, 2015 [2 favorites]


  … there are many cases where you want to explicitly know the value of i

Programmer, know thyself.

This tufte.css thing is rather nice. Thank you.
posted by scruss at 4:36 AM on August 14, 2015 [3 favorites]


Give me five or ten minutes. I'm about to push an update with some examples and fixes for several pain points regarding sidenotes.

YOU ROCK!
posted by phlyingpenguin at 5:44 AM on August 14, 2015 [2 favorites]


Forgetting how a c-style loop works isn't. Most practitioners in our field are well-accustomed to that paradigm, and to pretend you're above it is very arrogant.

Wow, what? I think maybe he meant he was happy with his language of choice, whatever it may be, which may not even offer that style of looping over a list. If you find that arrogant, it might be time to try a couple new languages out. You're only as good as the paradigms you know.
posted by yerfatma at 5:59 AM on August 14, 2015 [7 favorites]


The web is not print and print is not the web, but I'd still like to see this have print styles included with this. I just did a quick print preview and, naturally, the typography is too large, and the sidenotes are lost. On some views the "full width" image is actually wider than the text column. I wonder if a max-width: 100% property would work out there or of you risk mangling charts too badly.
posted by Karmakaze at 6:10 AM on August 14, 2015


Are print styles from browser still unutterably shit? When I last looked (admittedly, 5+ years ago) basic requirements such as H&J and useful page flow were missing. It looked like late-80s “oh hai i have read the linebreaking code in the blue book i am teh l33t typ0grafer” output.
posted by scruss at 6:49 AM on August 14, 2015


This is really lovely. Well done!
posted by putzface_dickman at 7:17 AM on August 14, 2015


I think he means
for (i = 0; i <= num ; i++)
Fucking designers.


So, just one little more drop on the pedantry pile: You actually want <, not <=, to avoid going past the end of the array, assuming `num` is the array size, not the array size minus one.

But yes, that doesn't matter and this CSS is great.
posted by ignignokt at 7:39 AM on August 14, 2015 [5 favorites]


Forgetting how a c-style loop works isn't. Most practitioners in our field are well-accustomed to that paradigm, and to pretend you're above it is very arrogant.

Speaking of arrogant, have you looked in a mirror lately?
posted by five fresh fish at 7:41 AM on August 14, 2015 [5 favorites]


Karmakaze, in the project's early days we made some considerations for print—turning the colors back to pure B&W, for example—but we decided not to pretend print was a design goal. Getting the myriad viewports of the web right is difficult and time-consuming enough. Also, there are plenty of Tufte-influenced tools meant for print media.

Joakim, 7segment: I'm sorry I came across as arrogant. I just have a hard time caring that I swapped two statements in some C-based pseudocode in a do-nothing example in a project that's purely HTML and CSS. I was being flippant and literal: I don't currently work in C-based languages, so for those occasions when the value of an iterator is important, I'd rather remember other syntax (e.g.). Anyway, when I made the syntax error I was just mashing the keyboard until I had a multi-line example that overflowed a little on some screens. I literally remember thinking, "I flat-out refuse to look this up, because it doesn't matter." But since I care about appearances and am anal about typos regardless of their actual importance, I fixed it. Now the code nitpicking will be relevant to my practice. Everybody wins.
posted by daveliepmann at 8:27 AM on August 14, 2015 [4 favorites]


What is licensing arrangement for the ETBembo webfonts? Are they SIL OFL, MIT, or otherwise free to use and distribute? I couldn’t find any information, and I’ve never seen them in any lists of free webfonts. A good serif webfont suitable for body text is a gem, and ETBembo is so well-made that I’m concerned it might have been generated from a commercial desktop font package without permission.
posted by nicepersonality at 8:42 AM on August 14, 2015 [1 favorite]




Ah! That makes sense. You might want to look at Crimson as an alternative. (There’s an older version of Crimson on Google Fonts, but the version on Github is considerably improved and has the webfont packages generated and all ready for self-hosting.)
posted by nicepersonality at 9:03 AM on August 14, 2015 [4 favorites]


I'd appreciate people's input regarding hover styles for links, either here or at https://github.com/daveliepmann/tufte-css/pull/45
posted by daveliepmann at 10:45 AM on August 14, 2015


Can someone check for syntax errors in the MetaFilter code? I think it's accidentally posting comments from Hacker News.
posted by wam at 1:20 PM on August 14, 2015 [4 favorites]


This is great, Dave. you solved my little web project from fugliness in one step.
posted by tel3path at 2:47 PM on August 14, 2015 [2 favorites]



for (i = 0; i <= num ; i++)
Fucking designers.

So, just one little more drop on the pedantry pile: You actually want <, not <=, to avoid going past the end of the array, assuming `num` is the array size, not the array size minus one.


Thanks for pointing that out. I spotted that bad exit condition too, but putting the parts of a for loop in the wrong order was more immediately distressing to me. I know it's kind of place-holder text, but if I did a prototype where the "lorem ipsum" text was bollocks like "Helvetica is known for its huge serifs and kerning is the vertical space between lines" designers would get on my case in milliseconds.
posted by w0mbat at 6:48 PM on August 14, 2015 [1 favorite]


OMG if you make a lorem ipsum generator that is nothing but confidently-stated yet incorrect typographic “facts” I would use it on every project.
posted by nicepersonality at 7:07 PM on August 14, 2015 [7 favorites]


I basically absolutely need this for pandoc output yesterday.

There's a lot of "well you've got to make it generate HTML differently" that always makes it hard for things like this. I already *have* HTML. I just want it to look nice!
posted by rum-soaked space hobo at 8:43 PM on August 14, 2015


Okay, on review, you folks are way ahead of me on this one!
posted by rum-soaked space hobo at 8:50 PM on August 14, 2015 [1 favorite]


« Older Want to play a surreal interactive fiction game?   |   6 Tricks to Get 86% More Chipotle Burrito (for... Newer »


This thread has been archived and is closed to new comments