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

41–50 of 107 posts

Re: Tufte CSS

#41

Post by unicornporn »

sombremesa wrote: post #39
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…

> I find that columns with smaller width and larger text are far more readable

The 55-75 CPL seems to stem from research done on readability on paper. 95 CPL seems more apt for the desktop browser when it comes to reading speed. When it comes to overall satisfaction the result is interesting. http://psychology.wichita.edu/surl/usabilitynews/72/LineLeng...

Re: Tufte CSS

#42

Post by saidajigumi »

munificent wrote: post #34
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 t…

I like how your asides move into paragraph flow as the page narrows. The Tufte CSS page hides the sidebar content completely as the page narrows, which eliminates access to crucial information.

(Aside: I really love using the Mobile Design View in Firefox and Chrome for inspecting responsive behavior. You can drag the viewport size by hand, or switch it to presets that represent target devices easily. All while keeping the full width of the browser pane for developer/inspector UI. FF even has a nice toggle shortcut, ⌥⌘M on OS X.)

Re: Tufte CSS

#45

Post by hftf »

saidajigumi wrote: post #42
munificent wrote: post #34

Earlier quoted context omitted.

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 t…

I like how your asides move into paragraph flow as the page narrows. The Tufte CSS page hides the sidebar content completely as the page narrows, which eliminates access to crucial information. (Aside: I really love using the Mobile Design View in Firefox and Chrome for inspecting responsive behavior. You can drag the viewport size by hand, or switch it to presets that represent target devices easily. All while keepi…

I’ve seen Tufte CSS before when I tried to search for HTML/CSS sidenote implementations. I’m happy to see a responsive one, even though it uses JS.

Re: Tufte CSS

#46

Post by jacobolus »

sombremesa wrote: post #39
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…

I don’t have anything against children’s books; I love children’s books! If the goal is to fit 2 sentences on a page with a big picture and individual letters that are easy to discriminate to help when just learning to read, then large text is a perfectly reasonable part of the design. Large widely spaced text is just not necessarily appropriate for other types of material, where fitting more text on the screen is an important design feature.

This is especially relevant when we’re talking about Edward Tufte: Tufte devotes a huge portion of his books to emphasizing that information presentation is improved when more information is presented in a smaller space, to facilitate references and comparisons between different items/sections. “Information wants to be spatially adjacent so as facilitate comparisons made within the common eyespan of the viewer.”

As a concrete comparison, here’s what fits in my browser view in this “Tufte CSS” document: http://imgur.com/iLNgoaU

Here’s what fits on a page in an Edward Tufte book: http://imgur.com/dTLcDx2

Re: Tufte CSS

#47

Post by seanmcdirmid »

unicornporn wrote: post #41
sombremesa wrote: post #39

Earlier quoted context omitted.

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…

> I find that columns with smaller width and larger text are far more readable The 55-75 CPL seems to stem from research done on readability on paper. 95 CPL seems more apt for the desktop browser when it comes to reading speed. When it comes to overall satisfaction the result is interesting. http://psychology.wichita.edu/surl/usabilitynews/72/LineLeng...

That article is a bit suspect, since it found the max to be more readable. I would like to see what the curve is really like...how do lengths above 95 CPL begin to get harder to read?

Re: Tufte CSS

#49

Post by dredmorbius »

vsbuffalo wrote: post #35

Well done. Though shouldn't the sidenotes use HTML5's ? How does the vertical alignment of sidenote callout and sidenote work?

aside doesn't position relative to text.

There really ought to be a native HTML reference / footnote / sidenote entity with appropriate default styling.

My take, responsive:

http://imgur.com/a/TXpis

(Using floats and negative margins.)

Re: Tufte CSS

#50

Post by fiatjaf »

packetslave wrote: post #33
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

"Educate"? Are you serious? Knowing famous people is education now?
Post reply on HN