Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tufte CSS

daveliepmann.com

Post reply on HN
Print view View original

31–40 of 107 posts

Re: Tufte CSS

#31

Post by hinkley »

mkozlows wrote: post #22
DaveWalk wrote: post #20

Earlier quoted context omitted.

It doesn't have the meticulous shine of Tufte's books, but this is a straightfoward CSS guide. It's a starting point, don't you think? Butterick's implementation is more than a CSS guide though, right? I thought his design was to show off the power of Pollen[0], his online-book-publishing system. [0] http://pollenpub.com/

It's a starting point, but a starting point that directs users to fake italic, fake small-caps, mismatched mono text, inconsistent apostrophes, and ugly underlines. (Oh, and sidenotes and other margin content just disappears on a phone.) If you're going to start from a template, it at least shouldn't lead you astray in multiple ways.

It also doesn't maintain your current position in the document if the viewport changes width, which... I'm not even sure how you break that. The user agent usually does a very good job of handling scroll position.

There's a lot of stuff you'd want to clean up before you let Mr Tufte see it.

Re: Tufte CSS

#32

Post by myth_buster »

I'm surprised how critical people are on this thread.

Perhaps it touched a nerve because there are quite a lot being done in a relatively small space that makes it look messy.

An option would be to show some features that gel together and list the others in the git markdown page.

Re: Tufte CSS

#33

Post by packetslave »

fiatjaf wrote: post #13

I don't know who Edward Tufte is, but this seems to me like a place where we could be living rather well without classes. More on that: * http://www.smashingmagazine.com/2012/06/19/classes-where-wer... * http://fiatjaf.github.io/classless/

You might want to educate yourself. He's rather well known.

https://en.wikipedia.org/wiki/Edward_Tufte

Re: Tufte CSS

#34

Post by munificent »

kmfrk wrote: post #25

I've always taken a liking to sidenotes, but the main problem with them is they are complicated by Markdown's rendering of footnotes. It's great for many other purposes, but a lot of people will probably prefer doing things in Markdown.

I use sidenotes very heavily in my book[1], which is written in Markdown[2]. Instead of putting the contents of the asides in the middle of a paragraph, I pull them out into separate tags. Inside the paragraph, I have a little with a name to indicate which text the should be positioned to line up with.

There is some CSS to put the asides on the side[3] (with a ton of variations to make it play nice on mobile). Then there's a bit of JS to correctly line them up with markers[4]. It was a bit more effort than I expected, and I don't like having to rely on JS, but the output is really nice, I think.

For example, take a look at this chapter[5], and try resizing your browser window or hitting it on a mobile device.

[1]: http://gameprogrammingpatterns.com/

[2]: https://github.com/munificent/game-programming-patterns/blob...

[3]: https://github.com/munificent/game-programming-patterns/blob...

[4]: https://github.com/munificent/game-programming-patterns/blob...

[5]: http://gameprogrammingpatterns.com/double-buffer.html

Re: Tufte CSS

#37

Post by zach »

jfb wrote: post #12
jacobolus wrote: post #8

Cute idea. Needs a better example document to really be judged properly (for example, this document has a far too many large and imposing headings), but in any case, some comments: Would be better with less leading, a smaller text size, smaller left margin, and more characters per line. This current version has a text block more like a newspaper column width than a book, and the large type and unnecessarily generous…

I get why people want their web sites to look as good as Tufte's books, but since they can't, I wish they wouldn't try. Make things that look good in the medium you're working in; don't blindly copy the rules from other media.

Fine advice for experts, surely. Those who recognize they are blind should copy. Copying Tufte seems like a reasonable way to open their eyes and save everyone else's.

Re: Tufte CSS

#38

Post by thyrsus »

kennelliott wrote: post #19

great implementation of tufte's look, though i disagree with much of what tufte believes is great information design.

Could you elaborate? What struck me was the limitation to two levels of section/subsection. Perhaps I'm deluding myself, but I think I prefer my information in clearly layered abstractions, with the presentation following the contours of the abstractions.

Re: Tufte CSS

#39

Post by sombremesa »

jacobolus wrote: post #8

Cute idea. Needs a better example document to really be judged properly (for example, this document has a far too many large and imposing headings), but in any case, some comments: Would be better with less leading, a smaller text size, smaller left margin, and more characters per line. This current version has a text block more like a newspaper column width than a book, and the large type and unnecessarily generous…

I find that columns with smaller width and larger text are far more readable - any text that is the raison d'être for the page should be readable first, with worries about looking like a "children's book" becoming second concern.

“Critics who treat 'adult' as a term of approval, instead of as a merely descriptive term, cannot be adult themselves. To be concerned about being grown up, to admire the grown up because it is grown up, to blush at the suspicion of being childish; these things are the marks of childhood and adolescence. And in childhood and adolescence they are, in moderation, healthy symptoms. Young things ought to want to grow. But to carry on into middle life or even into early manhood this concern about being adult is a mark of really arrested development. When I was ten, I read fairy tales in secret and would have been ashamed if I had been found doing so. Now that I am fifty I read them openly. When I became a man I put away childish things, including the fear of childishness and the desire to be very grown up.” - C.S. Lewis

Re: Tufte CSS

#40

Post by saidajigumi »

hinkley wrote: post #31
mkozlows wrote: post #22

Earlier quoted context omitted.

It's a starting point, but a starting point that directs users to fake italic, fake small-caps, mismatched mono text, inconsistent apostrophes, and ugly underlines. (Oh, and sidenotes and other margin content just disappears on a phone.) If you're going to start from a template, it at least shouldn't lead you astray in multiple ways.

It also doesn't maintain your current position in the document if the viewport changes width, which... I'm not even sure how you break that. The user agent usually does a very good job of handling scroll position. There's a lot of stuff you'd want to clean up before you let Mr Tufte see it.

I'm not sure what browser(s) or site(s) you're referring to, but just now double checking a few sites in current FF and Chrome I don't see them maintaining scroll position at all. I realize that this agrees with my developed expecations for text heavy pages. Text reflow as the page narrows dominates the viewport position -- content getting longer effectively pushes the viewport up the page. To the user, content appears to flow "downward" as the page narrows.

Do you have an example of a site and/or browser that exhibits the behavior you're describing? I'm quite curious if there's an approach to structuring a page that preserves position sensibly.

Post reply on HN