25 ms·

Tufte CSS

461 points by isp 11y ago

kmfrk 11y ago
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.
- munificent 11y ago
  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 <aside> tags. Inside the paragraph, I have a little <span> with a name to indicate which text the <aside> 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 <span> 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/ http://gameprogrammingpatterns.com/ [2]: https://github.com/munificent/game-programming-patterns/blob/master/book/introduction.markdown https://github.com/munificent/game-programming-patterns/blob... [3]: https://github.com/munificent/game-programming-patterns/blob/master/asset/style.scss#L207-L253 https://github.com/munificent/game-programming-patterns/blob... [4]: https://github.com/munificent/game-programming-patterns/blob/master/html/script.js#L24-L42 https://github.com/munificent/game-programming-patterns/blob... [5]: http://gameprogrammingpatterns.com/double-buffer.html http://gameprogrammingpatterns.com/double-buffer.html
  - saidajigumi 11y ago
    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.)
    - hftf 11y ago
      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.
    - dredmorbius 11y ago
      Another responsive sidenote implementation, screenshots: http://imgur.com/a/TXpis http://imgur.com/a/TXpis
      - hftf 11y ago
        > screenshots What help. /s
        dredmorbius 11y ago
        It's not ready for prime time. I thought I'd posted some sample code. I'll dig for it. That was while I was doing anonymous codepens, so they're not on my profile there. Searching "css sidenote edward morbius" on G+ might turn up something and basic CSS.
        dredmorbius 11y ago
        Basic sidenotes http://codepen.io/dredmorbius/pen/OVmKZX?editors=110 http://codepen.io/dredmorbius/pen/OVmKZX?editors=110 Not responsive, but @media queries on width and re-scaling width, margin, background colour, and border colour is what gets you that. Motherfucking Website. No sidenotes. but other bones of my basic design. http://codepen.io/dredmorbius/pen/KpMqqB http://codepen.io/dredmorbius/pen/KpMqqB Daniel Bos's sidenote implementation: http://loadingdata.nl/waves/ http://loadingdata.nl/waves/ (Degrades nicely for non-CSS viewers, not responsive.)
    - munificent 11y ago
      > I like how your asides move into paragraph flow as the page narrows. Yup. This is a nice (deliberate) side effect of using separate <aside> blocks instead of jamming them in the middle of the paragraph. The original location of the <aside> tag determines where the sidebar appears in the text flow if there's no room for it on the side. In some cases, it may be a few paragraphs distant from where it shows up on the side if that leads to better reading. This is also the fallback for users who don't have JS enabled. (Well, all both of them, at this point.) > I really love using the Mobile Design View in Firefox and Chrome for inspecting responsive behavior. Oh, yeah. I basically lived in that for a few days when I was tweaking the CSS.
exizt88 11y ago
I don't think Tufte ever uses top and bottom borders for tables. Also, the delimiter below the heading should not be so bold; it's usually a very thin line.
- daveliepmann 11y ago
  Thanks for the input. This spurred me to make some changes to tables: https://github.com/daveliepmann/tufte-css/commit/c46b8b516a06537f7f40106e0ebd1aed752c4ba4 https://github.com/daveliepmann/tufte-css/commit/c46b8b516a0...
isp 11y ago
GitHub: https://github.com/daveliepmann/tufte-css https://github.com/daveliepmann/tufte-css
nkrumm 11y ago
This would make a great IPython notebook style as well...
christopheraden 11y ago
Tufte-Latex, mentioned in the article, is a really nice template that produces some gorgeous Latex handouts with very little effort (I've used it a couple times when I wanted something to not look like the standard Latex article class). I thought it worth linking here for those that didn't read the link: https://tufte-latex.github.io/tufte-latex/ https://tufte-latex.github.io/tufte-latex/
- JohnHammersley 11y ago
  I agree -- I use that template for writing most of my documents now. It's also available to try out online on Overleaf if you don't fancy installing LaTeX: https://www.overleaf.com/latex/templates/handout-design-inspired-by-edward-tufte/dtsbhhkvghzz https://www.overleaf.com/latex/templates/handout-design-insp... (Note: I'm one of the co-founders of Overleaf, so any feedback appreciated, thanks!)
  - Omni5cience 11y ago
    I went to one of Mr. Tufte's workshops several months ago, and I do believe he mentioned Overleaf while discussing LaTeX. I must admit I had forgotten about it until just now, so thanks for the reminder. It looks like a fairly slick interface (and a nice solution for what I recall was a relatively painful problem i.e. installing and using LaTeX).
    - deleted 11y ago
      [deleted]
    - JohnHammersley 11y ago
      Thanks -- yes, I believe he's used Overleaf in his workshops for the past couple of years (starting back when we were called writeLaTeX). The Tufte handout and book templates are ones we use again and again when we're asked for examples of such layouts, and they're very popular. As an interesting tidbit re Overleaf, we recently passed the 3 billion pages compiled mark :) If you stacked up all those pages, you'd have a pile that's (roughly!) the height of Pluto: https://www.overleaf.com/blog/219-youve-created-three-million-projects-and-counting-dot-dot-dot https://www.overleaf.com/blog/219-youve-created-three-millio...
deleted 11y ago
[deleted]
pto0239hn 11y ago
This seems like an okay idea, but does anyone feel that the italics used in the headings (font family: ETBembo) are generated and are quite ugly?
- smackfu 11y ago
  In general, I'm not a fan of the font. It doesn't seem to have very good hinting, so the horizontal strokes are blurry. It's also way bolder on a Mac than on Windows.
- adsche 11y ago
  The italics are basically the only thing that looks OK here: http://i.imgur.com/H9X3Hpl.png http://i.imgur.com/H9X3Hpl.png Linux/Firefox FWIW.
  - makmanalp 11y ago
    Linux / Firefox has long been the most horrible combo for font rendering - check out Chrome on OSX http://imgur.com/jsHwIk7 http://imgur.com/jsHwIk7
    - Tiksi 11y ago
      Seems fine with Linux / Firefox for me: Work: http://paste.click/LKBLqt http://paste.click/LKBLqt Home: http://paste.click/zfhnYG http://paste.click/zfhnYG
  - morsch 11y ago
    Something is wrong with your Linux/Firefox, because it looks ok for me: http://i.imgur.com/txKbMfF.png http://i.imgur.com/txKbMfF.png Firefox 39 on Ubuntu 15.04
- peterjmag 11y ago
  Indeed, that's a faux italic[1] created by the browser in the absence of a real italic font. Perhaps the author forgot to include Bembo Italic[2] in the @font-face declaration (or simply decided not to pay for it)? [1] http://alistapart.com/article/say-no-to-faux-bold http://alistapart.com/article/say-no-to-faux-bold [2] https://www.myfonts.com/fonts/mti/bembo/ https://www.myfonts.com/fonts/mti/bembo/
jacobolus 11y ago
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 leading (especially in block quotations!) make it feel a bit like a children’s book. Not much content fits on screen at any time. Small caps shouldn’t be used with a typeface/browsers that don’t properly support them and just shrink capital letters instead, they just look spindly and bad. Either find a real small caps font, or skip the idea. Likewise for italics: use a real italic font instead of a browser-generated oblique version of the roman font. If you want it to look like a nicely typeset book, use an indented first line for new paragraphs rather than a blank line. Lots of other parts need tweaks, but it would take making several sample documents and then judging how the parts interact. Final note: Tufte’s books don’t look good because of the basic style choices, but because of the incredible care and attention he puts into writing and composing them. Crappy content is not going to suddenly become amazing when a different stylesheet is slapped onto it, and any document that aspires to be as pretty as a Tufte book is going to take many hours of manual composition.
- jfb 11y ago
  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.
  - zach 11y ago
    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.
  - daveliepmann 11y ago
    I agree that design is medium-specific, but I think the idea of "looking as good as Tufte's books" is an underspecified one. Can a webpage be a better book than a book? No. Can a webpage be a better webpage by borrowing some ideas from books, then modifying those ideas to fit its own purposes? I think yes.
michaelbuddy 11y ago
nice share and creation
tdaltonc 11y ago
Needs sparklines. https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=...
- daveliepmann 11y ago
  At the moment I think sparklines are outside the scope of this project. However: https://github.com/daveliepmann/tufte-css/issues/22 https://github.com/daveliepmann/tufte-css/issues/22
fiatjaf 11y ago
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-were-going-we-dont-need-classes/ http://www.smashingmagazine.com/2012/06/19/classes-where-wer... * http://fiatjaf.github.io/classless/ http://fiatjaf.github.io/classless/
- packetslave 11y ago
  You might want to educate yourself. He's rather well known. https://en.wikipedia.org/wiki/Edward_Tufte https://en.wikipedia.org/wiki/Edward_Tufte
  - fiatjaf 11y ago
    "Educate"? Are you serious? Knowing famous people is education now?
    - dredmorbius 11y ago
      Yes. Yes it is.
    - rglullis 11y ago
      AT the very least, knowing why some people are famous in their industry or field.
tjohns 11y ago
Personally, I feel like the text is too big. Medium's site is already on the upper end of what I consider to be a usable font size (22px), and this is even larger (24px). At some point, larger type makes it difficult to quickly scan the page. For comparison, even Tufte's own site is rendered with a 16px font.
- gknoy 11y ago
  The font appears to scale (in a step function?) related to pixel-width of your window. Try using a narrower window. (This may or may not be related to retina resolution. I didn't read the code to find out.)
  - dredmorbius 11y ago
    The font size _does_ scale, in ways I find quite annoying. Smaller scaling range would likely be better. Or stick to device/user defaults.
mkozlows 11y ago
Honestly, this is really rough. The impulse is admirable, but the implementation has a lot of rough edges and ugliness. A web author looking for good typography is going to be better served reading Butterick's Practical Typography (http://practicaltypography.com/ http://practicaltypography.com/).
- DaveWalk 11y ago
  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/ http://pollenpub.com/
  - mkozlows 11y ago
    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.
    - hinkley 11y ago
      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.
      - saidajigumi 11y ago
        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.
kennelliott 11y ago
great implementation of tufte's look, though i disagree with much of what tufte believes is great information design.
- thyrsus 11y ago
  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.
lifeisstillgood 11y ago
I love the margin diagrams, and would happily use this for print based output, but I fear the mobile world would have meant Tufte would redesign his approach to suit the smaller uni-column world, and the best layout on page is very different to that on a four inch screen
- e12e 11y ago
  Looks quite good on desktop, but even on my Note 3 -- the space used for sidebars take way too much horizontal space. It will take some work, but with proper collapsing rules for narrow screens, this would be very nice. One problem might be (as others have indicated) that what works in print doesn't have to be the best solution for digital -- especially where the page size/width (window size) can vary substantially. Personally I typically give my web browser 2/3 of the screen on my laptop, half on my desktop -- unless I'm using it for reference in which case my "work window(s)" -- terminal and/or editor get the 2/3 width slot. This layout would therefore be useless in code documentation for my use-case -- the window would be ~50% padding, with an anemic main-column that'd be almost unreadable due to fitting only a single word per line. [ed: At the very least tufte.css and/or latex.css should enable/use CSS3 hyphens in order to get word hyphenation that is a little more like LaTeX, and not completely broken! As is the ragged right is painful in narrow viewports.]
carsongross 11y ago
It's very nice looking. Everyone criticizing the implementation, here, let me help you: https://github.com/daveliepmann/tufte-css https://github.com/daveliepmann/tufte-css
javajosh 11y ago
One of the things I love most about Tufte is the way his text introduces every single graphic. He tells you what he's about to show you; then he shows you. This stands in stark contrast in most books where the figures are only very loosely coupled to the text. I didn't realize how jarring I found the convention until Tufte! And it makes perfect sense in hindsight: why did we think it's okay to put figures "within a page or two" of the relevant text? This handout, by contrast, doesn't do this, and so it throws away something that, to me, is central to Tufte's appeal.
- daveliepmann 11y ago
  That's a great point. I added some text to the demo document making that point, but I don't have actually relevant graphics or figures to add to it. If you have any suggestions for wording, just email me or open a GitHub issue. Cheers!
unicornporn 11y ago
I like the idea but turned away when I saw those ugly fake italic headings. Never italicize fonts that are missing italic type styles.
- daveliepmann 11y ago
  Sorry! Does this help? https://github.com/pyrocat101/tufte-css/commit/0a810a7d5f4707941c6f9fe99a53ec41f50a5c00 https://github.com/pyrocat101/tufte-css/commit/0a810a7d5f470...
  - unicornporn 11y ago
    No need to say sorry :) It does help, awesome!
myth_buster 11y ago
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.
- jpatokal 11y ago
  For lack of a better word, this implementation is half-assed. If the whole point is typography that's both gorgeous and legible, then you had better dot your i's and cross your t's, and this doesn't. As a very simple example, look at the capital B here in the name of the font: http://snag.gy/yup65.jpg http://snag.gy/yup65.jpg There's a chunk missing at the top, and it looks like crap! It should look like this: https://upload.wikimedia.org/wikipedia/commons/4/49/BemboMT.svg https://upload.wikimedia.org/wikipedia/commons/4/49/BemboMT.... Now I understand full well that it's very difficult to make something that looks good on every OS, browser, screen size, resolution, yadda yadda -- but in this case, that's the entire point!
vsbuffalo 11y ago
Well done. Though shouldn't the sidenotes use HTML5's <aside></aside>? How does the vertical alignment of sidenote callout and sidenote work?
- exupero 11y ago
  I agree. It looks like sidenotes are floated right and given negative right margin. (https://github.com/daveliepmann/tufte-css/blob/master/tufte.css#L120-L129 https://github.com/daveliepmann/tufte-css/blob/master/tufte....)
- dredmorbius 11y ago
  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 http://imgur.com/a/TXpis (Using floats and negative margins.)
rjurney 11y ago
To the haters: this looks like something you could hand tweak to get a great result.
- tripzilch 11y ago
  They're not haters. This is the type of discussion you should expect when discussing typography. It may seem like endless nit-picking, but it's the sum of nit-picking over all the tiny details that adds up to great typographical design. I understand this type of thread doesn't really fit HN's "no gratuitous negativity" guideline, but IMO there's really no other way to constructively discuss typography. The whole field is made of attention to excruciatingly tiny details, but taken together, it adds up to great and beautiful design. It's one of the things I love about it. Maybe note that none of the criticisms are entirely dismissive or unnecessarily harsh, but well-argumented, just about tiny details.
deleted 11y ago
[deleted]
nikolenkoanton 11y ago
Nice job ;)
fizixer 11y ago
Tufte-LaTeX link: " ... the style of Edward R. Tufte and Richard Feynman." Woah! wait a minute. Style of Richard Feynman? When did Feynman get involved with typography/typesetting work?
- nickzoic 11y ago
  I don't know if RPF himself had anything much to do with it, but the typesetting of the /The Feynman Lectures on Physics/ is beautiful. It features the main column / side column design as discussed, with notes, diagrams and navigation hints in the side column and is a great demonstration of the value of whitespace!
- kryptiskt 11y ago
  It's referring to the Feynman Lectures on Physics http://www.feynmanlectures.info/ http://www.feynmanlectures.info/, he was presumably involved in the presentation aspects of that (the books I mean, not the site).
namuol 11y ago
For a typography-centric project, it pains me to see that you're not including the proper italic version of the font used in the article, forcing my browser to do ugly guesswork [1]. [1]: http://i.imgur.com/CNBSMVH.png http://i.imgur.com/CNBSMVH.png
- daveliepmann 11y ago
  I feel your pain. I think Linjie Ding's contribution resolved the issue, let me know your thoughts: https://github.com/daveliepmann/tufte-css/pull/8 https://github.com/daveliepmann/tufte-css/pull/8
thisrod 11y ago
I must have missed something. Since when does HTML have elements called article and section?
- fasouto 11y ago
  HTML5 introduced article, section, footer, nav... and many other semantic elements
- dredmorbius 11y ago
  See Mark Pilgrim's Dive into HTML5 http://diveintohtml5.info/table-of-contents.html http://diveintohtml5.info/table-of-contents.html It actually is quite good semantically. See also Readability's publisher's guidelines: https://readability.com/developers/guidelines#publisher https://readability.com/developers/guidelines#publisher And the hNews microformat: http://microformats.org/wiki/ http://microformats.org/wiki/ hnews
matiasz 11y ago
I hope someone follows this up with Doumont CSS. http://www.treesmapsandtheorems.com/ http://www.treesmapsandtheorems.com/
bane 11y ago
I think this: a) looks like a reasonable simulation of Tufte's print style b) is missing the point Tufte tries to make Tufte isn't saying you have to make your presentation look like his, his basic thesis is "don't add unnecessary things that take away from the clarity of your presentation" and he's made a name by critically analyzing other people's presentation and work to show where they've gone overboard and why that detracts from the message they're trying to show. I've sat in his class, read his books and website and followed him for years. His approach and critical analysis of web sites is actually fairly different from print. He understands that the web is a different medium and should be approached differently. His critiques of ESPN and various weather websites are fascinating not because he complains they aren't using enough whitespace or don't follow his print style, but because he actually likes how they clearly and concisely present summaries of dense, compact information. I'm afraid this comes off a little like cargo-culting Tufte, going through the ceremony without actually grokking his meaning.
- acqq 11y ago
  Yes, the first thing I've thought looking at the page on the computer was "I wonder how that looks on my iPhone." I've tried: not easily readable, for me.
  - collyw 11y ago
    Is it not the case that san-serif fonts are better on screen and serif better in print? Seems a bit strange that the webpage uses serif.
    - acqq 11y ago
      I actually like serif fonts on retina screens. The first "reader view" on the iPhone was serif and it was easy to read. On the linked page the resulting size of the letters on the page is simply too small to allow easy reading. When the area to display text is so small, the designer shouldn't insist on the white margins or the comments on the side. On web page, the comments could be much better done in the "Wikipedia" style (showing on click). The design of the Wikipedia articles on the moment is actually good on iPhone. Much better than this, very natural to read.
lnanek2 11y ago
Would have been nice if they had updated it more for the web. When I make my browser very narrow, for example, the side figure is squished so tiny it is unreadable. Good web sites are reactive and would have moved it below the section at that point instead of keeping it at the side. Seems like they just aped a book style and ended up with something not good for the web.
butthackerz 11y ago
I really like it. Unfortunately, it is not clear what license ETBembo carries, if any. In fact Tufte indicated that ETBembo is not public. So it may not be legal to use it. I think that Dejavu serif is an acceptable (superior?) substitution. Source: http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000bm http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0...
dredmorbius 11y ago
First: I very much admire the spirit and concepts presented here, even where specific aspects strike me as less than ideal. In a world of Web designs which are both grossly overwrought and fragile, this is a compelling antidote. Specific designs are born of their environment Tufte's principles are born of their medium, and both message and format change as medium does. Understanding the why and wherefore is far more important than the what of design. Borrow but don't ape So take the concepts and use those which are applicable. But allow yourself leeway as well. Constraints of pagesize, contrast, and other aspects make some of Tufte's suggestions less advisible for online. I find the grey-field charts translate poorly, for example. Layout doesn't fix bad writing, but it helps most, and exposes bad Good writing can be killed by bad layout and presentation — this is a frequent observation in HN comments on overstyled articles. Middling writing, with good, well-structured layout, becomes easier to read. Bad writing lies naked on the screen when shorn of its shielding raiment. I've found that small changes — drop-cap initials and a bold first line, help in acquiring content particularly when presented in a "cards" view. Quite the accidental discovery, but one I find very useful. https://ello.co/dredmorbius/post/QGKKdiuqUw6O7ROl-V3uJA https://ello.co/dredmorbius/post/QGKKdiuqUw6O7ROl-V3uJA Yes, much of the beauty of Tufte's books comes from the totality of how they're architected: ideas, structure, presentation, layout, typography. But incremental steps help. Embrace and Accept Medium Properties Paper is fixed size. Online is dynamic. Inks are expensive, colour moreso. Pixels and rgba values are cheap, though too much flash is distracting. Images can offer zoom for detail on hover or click. Sections. While Tufte uses only chapters and section headings, his books are also divided into Parts. As are Feynman's Lectures as I recall. In practice you'll find at least three, and frequently four, levels of hierarchy may need support: Part, Chapter, Subsection, and SubSubSection. Technical writing may have more levels of hierarchy. Font sizes: show deference to the user's stated preference, if it exists. If not, prefer rem and em units to px or pt. Yes, MSIE back support and broken Android implementations mean you'll need workaround fixes, but you can at least build em/rem units in as your base. Font faces. I take exception with much of the font-bigotry noted here. I honestly Just Don't Fucking Care most of the time, though I find online font choices are occasionally spectacularly poor. Generally I prefer a decent, widely available, and good enough font for online presentation. Excessive fucking with dynamic Web fonts leads to many pages which fail to render text at all on older devices. Colour. Text should be high, though not extreme, contrast. A slightly creamy background is preferable to lighter text. For Web-specific elements, particularly hyperlinks, some affordance indicated by colour is helpful. Also joining related items (e.g., sidenotes and related text). CSS counters. These take the manual tracking out of identifying content and references. Sections, headings, references (side / end notes), figures, tables, images, etc., can all be automatcially numbered. This is useful (though not universally supported). Graceful degredation. A challenge with any UI/UX enhancement is that various clients don't support all features. Degrading gracefully, and providing maximum possible content and structure, really helps. (My own sidenote experiments fail somewhat in this regard.) :hover, :active, and other interactive elements. While the design shouldn't rely on these (see above), offering additional hints by way of these mechanisms can be useful. Contrast. Provide it. ContrastRebellion is a frequently referenced site. Accomodate Variable Viewports Responsive design is pretty much a necessity these days, and it's easier than you think. In the case of Tufte.css, some principles, such as ample whitespace, make sense in the context of print where sizes are rigidly defined. For online content, sidebars, sadly, fail to remain viable as viewport widths shrink. My solution was to transition sidenotes to what are effectively callouts, with a gradually increasing background shading to identify these, as viewport size decreases. Or rather, in a mobile-first design, you build callouts which become marginal sidenotes as space increases. What HTML/CSS Needs* References. Seriously. Why are we hand-tooling fucking endnotes / sidenotes, still? Robert Nystrom's Game Programming Patterns <aside> sidenotes are interesting, see his comments elsewhere. I'm not fully sold, but these could prove useful. A client-manipulable comments / discussion aspect is another element that I'm finding myself increasingly wanting, something that is structured by way of data (author, date, references, subject), but whose ultimate presentation (flat, nested, collapsed, semi-threaded, etc.) is ultimately under client control. HTML5 is an awfully good start A grab-bag of some of my own experiments I've been playing with many of the ideas presented here as well as others. Sidenotes: http://imgur.com/a/TXpis http://imgur.com/a/TXpis Motherfucking Website — this is the bones of my own preferred site layout, though it lacks the responsive elements and much of the polish (which I'm still working on): http://codepen.io/dredmorbius/pen/KpMqqB?editors=110 http://codepen.io/dredmorbius/pen/KpMqqB?editors=110 HREF sidenotes: similar to the reference sidenotes I use, and incorporating elments: ::before and ::after content, counters, and negative-margin offsets. http://codepen.io/dredmorbius/pen/XJGwQv http://codepen.io/dredmorbius/pen/XJGwQv Ello CSS implmentation of HREF sidenotes: http://i.imgur.com/YA0cCNs.png http://i.imgur.com/YA0cCNs.png http://i.imgur.com/QNygLE8.png http://i.imgur.com/QNygLE8.png Sample site design with table formatting: this adds greenbar and a current-line indicator but otherwise borrows from Tufte's table concepts. https://www.reddit.com/r/dredmorbius/comments/3832wx/occupation_classifications_growth_and_change_over/ https://www.reddit.com/r/dredmorbius/comments/3832wx/occupat...
thirdsun 11y ago
I like it as a starting point, a minor sidenote though: What you perceive and describe as bright red links, code and sidenotes is for me, as a color blind, almost indistinguishable from the body text if it wasn't for the underlines and monospaced font. Those off-black and red colors are for me just very similar dark hues on an off-white background. If you want to highlight these elements the current red does a poor job for colorblind people like me.
- startling 11y ago
  I'm colorblind as well, and did a little double-take when I read this comment, but I think you misunderstood. "Other forms of text—for instance, links and code—are slightly lighter and sidenote numbers are bright red to distinguish them from inline text." Only the sidenote numbers are bright red.
  - esquevin 11y ago
    Yes, I can confirm to you that only the sidenote numbers are colored.
SeanLuke 11y ago
Resizing the window reduces the user's desired font size: I don't know how many web readability rules this breaks. If the user then increases the font size, the web page obliges, expanding beyond the window boundary, yet doesn't provide a horizontal scroller! Very bad. The thing is: Tufte's style isn't designed for webpages. It's designed for books. Books have defined margins, a fixed size, and pages with a defined length. (Good) web pages don't necessarily have any of that. This is where sidenotes fall down, for example: the CSS author has to jump through a variety of hoops, breaking various conventions, in order to make them usable when the user narrows his window width.
wkoszek 11y ago
My feeling is that it looks great compared to most of the stuff I see on the web. It's a good start for a plain minimalistic website. The content needs more work (one "Tufte's" is fine, while the other don't) and all "don't" have incorrect '.
rcarmo 11y ago
Biggest issue for me is that on mobile all the side notes go away (on portrait) and there is no fallback.
tripzilch 11y ago
Something wrong with the centering in my Firefox (v39, Linux) browser: http://i.imgur.com/8t95PQS.png http://i.imgur.com/8t95PQS.png Similar thing happened to the full-width image. I'll try to submit it to the Github.
- daveliepmann 11y ago
  Sorry for the trouble. Both of these should be fixed now. The second table style PR wasn't fully tested in FF.

461 points by isp 11y ago

kmfrk 11y ago

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.

munificent 11y ago
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 <aside> tags. Inside the paragraph, I have a little <span> with a name to indicate which text the <aside> 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 <span> 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/ http://gameprogrammingpatterns.com/ [2]: https://github.com/munificent/game-programming-patterns/blob/master/book/introduction.markdown https://github.com/munificent/game-programming-patterns/blob... [3]: https://github.com/munificent/game-programming-patterns/blob/master/asset/style.scss#L207-L253 https://github.com/munificent/game-programming-patterns/blob... [4]: https://github.com/munificent/game-programming-patterns/blob/master/html/script.js#L24-L42 https://github.com/munificent/game-programming-patterns/blob... [5]: http://gameprogrammingpatterns.com/double-buffer.html http://gameprogrammingpatterns.com/double-buffer.html
- saidajigumi 11y ago
  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.)
  - hftf 11y ago
    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.
  - dredmorbius 11y ago
    Another responsive sidenote implementation, screenshots: http://imgur.com/a/TXpis http://imgur.com/a/TXpis
    - hftf 11y ago
      > screenshots What help. /s
      - dredmorbius 11y ago
        It's not ready for prime time. I thought I'd posted some sample code. I'll dig for it. That was while I was doing anonymous codepens, so they're not on my profile there. Searching "css sidenote edward morbius" on G+ might turn up something and basic CSS.
      - dredmorbius 11y ago
        Basic sidenotes http://codepen.io/dredmorbius/pen/OVmKZX?editors=110 http://codepen.io/dredmorbius/pen/OVmKZX?editors=110 Not responsive, but @media queries on width and re-scaling width, margin, background colour, and border colour is what gets you that. Motherfucking Website. No sidenotes. but other bones of my basic design. http://codepen.io/dredmorbius/pen/KpMqqB http://codepen.io/dredmorbius/pen/KpMqqB Daniel Bos's sidenote implementation: http://loadingdata.nl/waves/ http://loadingdata.nl/waves/ (Degrades nicely for non-CSS viewers, not responsive.)
  - munificent 11y ago
    > I like how your asides move into paragraph flow as the page narrows. Yup. This is a nice (deliberate) side effect of using separate <aside> blocks instead of jamming them in the middle of the paragraph. The original location of the <aside> tag determines where the sidebar appears in the text flow if there's no room for it on the side. In some cases, it may be a few paragraphs distant from where it shows up on the side if that leads to better reading. This is also the fallback for users who don't have JS enabled. (Well, all both of them, at this point.) > I really love using the Mobile Design View in Firefox and Chrome for inspecting responsive behavior. Oh, yeah. I basically lived in that for a few days when I was tweaking the CSS.

exizt88 11y ago

I don't think Tufte ever uses top and bottom borders for tables. Also, the delimiter below the heading should not be so bold; it's usually a very thin line.

daveliepmann 11y ago
Thanks for the input. This spurred me to make some changes to tables: https://github.com/daveliepmann/tufte-css/commit/c46b8b516a06537f7f40106e0ebd1aed752c4ba4 https://github.com/daveliepmann/tufte-css/commit/c46b8b516a0...

isp 11y ago

GitHub: https://github.com/daveliepmann/tufte-css https://github.com/daveliepmann/tufte-css

nkrumm 11y ago

This would make a great IPython notebook style as well...

christopheraden 11y ago

Tufte-Latex, mentioned in the article, is a really nice template that produces some gorgeous Latex handouts with very little effort (I've used it a couple times when I wanted something to not look like the standard Latex article class). I thought it worth linking here for those that didn't read the link: https://tufte-latex.github.io/tufte-latex/ https://tufte-latex.github.io/tufte-latex/

JohnHammersley 11y ago
I agree -- I use that template for writing most of my documents now. It's also available to try out online on Overleaf if you don't fancy installing LaTeX: https://www.overleaf.com/latex/templates/handout-design-inspired-by-edward-tufte/dtsbhhkvghzz https://www.overleaf.com/latex/templates/handout-design-insp... (Note: I'm one of the co-founders of Overleaf, so any feedback appreciated, thanks!)
- Omni5cience 11y ago
  I went to one of Mr. Tufte's workshops several months ago, and I do believe he mentioned Overleaf while discussing LaTeX. I must admit I had forgotten about it until just now, so thanks for the reminder. It looks like a fairly slick interface (and a nice solution for what I recall was a relatively painful problem i.e. installing and using LaTeX).
  - deleted 11y ago
    [deleted]
  - JohnHammersley 11y ago
    Thanks -- yes, I believe he's used Overleaf in his workshops for the past couple of years (starting back when we were called writeLaTeX). The Tufte handout and book templates are ones we use again and again when we're asked for examples of such layouts, and they're very popular. As an interesting tidbit re Overleaf, we recently passed the 3 billion pages compiled mark :) If you stacked up all those pages, you'd have a pile that's (roughly!) the height of Pluto: https://www.overleaf.com/blog/219-youve-created-three-million-projects-and-counting-dot-dot-dot https://www.overleaf.com/blog/219-youve-created-three-millio...

deleted 11y ago

[deleted]

pto0239hn 11y ago

This seems like an okay idea, but does anyone feel that the italics used in the headings (font family: ETBembo) are generated and are quite ugly?

smackfu 11y ago
In general, I'm not a fan of the font. It doesn't seem to have very good hinting, so the horizontal strokes are blurry. It's also way bolder on a Mac than on Windows.
adsche 11y ago
The italics are basically the only thing that looks OK here: http://i.imgur.com/H9X3Hpl.png http://i.imgur.com/H9X3Hpl.png Linux/Firefox FWIW.
- makmanalp 11y ago
  Linux / Firefox has long been the most horrible combo for font rendering - check out Chrome on OSX http://imgur.com/jsHwIk7 http://imgur.com/jsHwIk7
  - Tiksi 11y ago
    Seems fine with Linux / Firefox for me: Work: http://paste.click/LKBLqt http://paste.click/LKBLqt Home: http://paste.click/zfhnYG http://paste.click/zfhnYG
- morsch 11y ago
  Something is wrong with your Linux/Firefox, because it looks ok for me: http://i.imgur.com/txKbMfF.png http://i.imgur.com/txKbMfF.png Firefox 39 on Ubuntu 15.04
peterjmag 11y ago
Indeed, that's a faux italic[1] created by the browser in the absence of a real italic font. Perhaps the author forgot to include Bembo Italic[2] in the @font-face declaration (or simply decided not to pay for it)? [1] http://alistapart.com/article/say-no-to-faux-bold http://alistapart.com/article/say-no-to-faux-bold [2] https://www.myfonts.com/fonts/mti/bembo/ https://www.myfonts.com/fonts/mti/bembo/

jacobolus 11y ago

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 leading (especially in block quotations!) make it feel a bit like a children’s book. Not much content fits on screen at any time. Small caps shouldn’t be used with a typeface/browsers that don’t properly support them and just shrink capital letters instead, they just look spindly and bad. Either find a real small caps font, or skip the idea. Likewise for italics: use a real italic font instead of a browser-generated oblique version of the roman font. If you want it to look like a nicely typeset book, use an indented first line for new paragraphs rather than a blank line. Lots of other parts need tweaks, but it would take making several sample documents and then judging how the parts interact. Final note: Tufte’s books don’t look good because of the basic style choices, but because of the incredible care and attention he puts into writing and composing them. Crappy content is not going to suddenly become amazing when a different stylesheet is slapped onto it, and any document that aspires to be as pretty as a Tufte book is going to take many hours of manual composition.

jfb 11y ago
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.
- zach 11y ago
  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.
- daveliepmann 11y ago
  I agree that design is medium-specific, but I think the idea of "looking as good as Tufte's books" is an underspecified one. Can a webpage be a better book than a book? No. Can a webpage be a better webpage by borrowing some ideas from books, then modifying those ideas to fit its own purposes? I think yes.

michaelbuddy 11y ago

nice share and creation

tdaltonc 11y ago

Needs sparklines. https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=...

daveliepmann 11y ago
At the moment I think sparklines are outside the scope of this project. However: https://github.com/daveliepmann/tufte-css/issues/22 https://github.com/daveliepmann/tufte-css/issues/22

fiatjaf 11y ago

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-were-going-we-dont-need-classes/ http://www.smashingmagazine.com/2012/06/19/classes-where-wer... * http://fiatjaf.github.io/classless/ http://fiatjaf.github.io/classless/

packetslave 11y ago
You might want to educate yourself. He's rather well known. https://en.wikipedia.org/wiki/Edward_Tufte https://en.wikipedia.org/wiki/Edward_Tufte
- fiatjaf 11y ago
  "Educate"? Are you serious? Knowing famous people is education now?
  - dredmorbius 11y ago
    Yes. Yes it is.
  - rglullis 11y ago
    AT the very least, knowing why some people are famous in their industry or field.

tjohns 11y ago

Personally, I feel like the text is too big. Medium's site is already on the upper end of what I consider to be a usable font size (22px), and this is even larger (24px). At some point, larger type makes it difficult to quickly scan the page. For comparison, even Tufte's own site is rendered with a 16px font.

gknoy 11y ago
The font appears to scale (in a step function?) related to pixel-width of your window. Try using a narrower window. (This may or may not be related to retina resolution. I didn't read the code to find out.)
- dredmorbius 11y ago
  The font size _does_ scale, in ways I find quite annoying. Smaller scaling range would likely be better. Or stick to device/user defaults.

mkozlows 11y ago

Honestly, this is really rough. The impulse is admirable, but the implementation has a lot of rough edges and ugliness. A web author looking for good typography is going to be better served reading Butterick's Practical Typography (http://practicaltypography.com/ http://practicaltypography.com/).

DaveWalk 11y ago
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/ http://pollenpub.com/
- mkozlows 11y ago
  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.
  - hinkley 11y ago
    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.
    - saidajigumi 11y ago
      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.

kennelliott 11y ago

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

thyrsus 11y ago
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.

lifeisstillgood 11y ago

I love the margin diagrams, and would happily use this for print based output, but I fear the mobile world would have meant Tufte would redesign his approach to suit the smaller uni-column world, and the best layout on page is very different to that on a four inch screen

e12e 11y ago
Looks quite good on desktop, but even on my Note 3 -- the space used for sidebars take way too much horizontal space. It will take some work, but with proper collapsing rules for narrow screens, this would be very nice. One problem might be (as others have indicated) that what works in print doesn't have to be the best solution for digital -- especially where the page size/width (window size) can vary substantially. Personally I typically give my web browser 2/3 of the screen on my laptop, half on my desktop -- unless I'm using it for reference in which case my "work window(s)" -- terminal and/or editor get the 2/3 width slot. This layout would therefore be useless in code documentation for my use-case -- the window would be ~50% padding, with an anemic main-column that'd be almost unreadable due to fitting only a single word per line. [ed: At the very least tufte.css and/or latex.css should enable/use CSS3 hyphens in order to get word hyphenation that is a little more like LaTeX, and not completely broken! As is the ragged right is painful in narrow viewports.]

carsongross 11y ago

It's very nice looking. Everyone criticizing the implementation, here, let me help you: https://github.com/daveliepmann/tufte-css https://github.com/daveliepmann/tufte-css

javajosh 11y ago

One of the things I love most about Tufte is the way his text introduces every single graphic. He tells you what he's about to show you; then he shows you. This stands in stark contrast in most books where the figures are only very loosely coupled to the text. I didn't realize how jarring I found the convention until Tufte! And it makes perfect sense in hindsight: why did we think it's okay to put figures "within a page or two" of the relevant text? This handout, by contrast, doesn't do this, and so it throws away something that, to me, is central to Tufte's appeal.

daveliepmann 11y ago
That's a great point. I added some text to the demo document making that point, but I don't have actually relevant graphics or figures to add to it. If you have any suggestions for wording, just email me or open a GitHub issue. Cheers!

unicornporn 11y ago

I like the idea but turned away when I saw those ugly fake italic headings. Never italicize fonts that are missing italic type styles.

daveliepmann 11y ago
Sorry! Does this help? https://github.com/pyrocat101/tufte-css/commit/0a810a7d5f4707941c6f9fe99a53ec41f50a5c00 https://github.com/pyrocat101/tufte-css/commit/0a810a7d5f470...
- unicornporn 11y ago
  No need to say sorry :) It does help, awesome!

myth_buster 11y ago

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.

jpatokal 11y ago
For lack of a better word, this implementation is half-assed. If the whole point is typography that's both gorgeous and legible, then you had better dot your i's and cross your t's, and this doesn't. As a very simple example, look at the capital B here in the name of the font: http://snag.gy/yup65.jpg http://snag.gy/yup65.jpg There's a chunk missing at the top, and it looks like crap! It should look like this: https://upload.wikimedia.org/wikipedia/commons/4/49/BemboMT.svg https://upload.wikimedia.org/wikipedia/commons/4/49/BemboMT.... Now I understand full well that it's very difficult to make something that looks good on every OS, browser, screen size, resolution, yadda yadda -- but in this case, that's the entire point!

vsbuffalo 11y ago

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

exupero 11y ago
I agree. It looks like sidenotes are floated right and given negative right margin. (https://github.com/daveliepmann/tufte-css/blob/master/tufte.css#L120-L129 https://github.com/daveliepmann/tufte-css/blob/master/tufte....)
dredmorbius 11y ago
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 http://imgur.com/a/TXpis (Using floats and negative margins.)

rjurney 11y ago

To the haters: this looks like something you could hand tweak to get a great result.

tripzilch 11y ago
They're not haters. This is the type of discussion you should expect when discussing typography. It may seem like endless nit-picking, but it's the sum of nit-picking over all the tiny details that adds up to great typographical design. I understand this type of thread doesn't really fit HN's "no gratuitous negativity" guideline, but IMO there's really no other way to constructively discuss typography. The whole field is made of attention to excruciatingly tiny details, but taken together, it adds up to great and beautiful design. It's one of the things I love about it. Maybe note that none of the criticisms are entirely dismissive or unnecessarily harsh, but well-argumented, just about tiny details.

deleted 11y ago

[deleted]

nikolenkoanton 11y ago

Nice job ;)

fizixer 11y ago

Tufte-LaTeX link: " ... the style of Edward R. Tufte and Richard Feynman." Woah! wait a minute. Style of Richard Feynman? When did Feynman get involved with typography/typesetting work?

nickzoic 11y ago
I don't know if RPF himself had anything much to do with it, but the typesetting of the /The Feynman Lectures on Physics/ is beautiful. It features the main column / side column design as discussed, with notes, diagrams and navigation hints in the side column and is a great demonstration of the value of whitespace!
kryptiskt 11y ago
It's referring to the Feynman Lectures on Physics http://www.feynmanlectures.info/ http://www.feynmanlectures.info/, he was presumably involved in the presentation aspects of that (the books I mean, not the site).

namuol 11y ago

For a typography-centric project, it pains me to see that you're not including the proper italic version of the font used in the article, forcing my browser to do ugly guesswork [1]. [1]: http://i.imgur.com/CNBSMVH.png http://i.imgur.com/CNBSMVH.png

daveliepmann 11y ago
I feel your pain. I think Linjie Ding's contribution resolved the issue, let me know your thoughts: https://github.com/daveliepmann/tufte-css/pull/8 https://github.com/daveliepmann/tufte-css/pull/8

thisrod 11y ago

I must have missed something. Since when does HTML have elements called article and section?

fasouto 11y ago
HTML5 introduced article, section, footer, nav... and many other semantic elements
dredmorbius 11y ago
See Mark Pilgrim's Dive into HTML5 http://diveintohtml5.info/table-of-contents.html http://diveintohtml5.info/table-of-contents.html It actually is quite good semantically. See also Readability's publisher's guidelines: https://readability.com/developers/guidelines#publisher https://readability.com/developers/guidelines#publisher And the hNews microformat: http://microformats.org/wiki/ http://microformats.org/wiki/ hnews

matiasz 11y ago

I hope someone follows this up with Doumont CSS. http://www.treesmapsandtheorems.com/ http://www.treesmapsandtheorems.com/

bane 11y ago

I think this: a) looks like a reasonable simulation of Tufte's print style b) is missing the point Tufte tries to make Tufte isn't saying you have to make your presentation look like his, his basic thesis is "don't add unnecessary things that take away from the clarity of your presentation" and he's made a name by critically analyzing other people's presentation and work to show where they've gone overboard and why that detracts from the message they're trying to show. I've sat in his class, read his books and website and followed him for years. His approach and critical analysis of web sites is actually fairly different from print. He understands that the web is a different medium and should be approached differently. His critiques of ESPN and various weather websites are fascinating not because he complains they aren't using enough whitespace or don't follow his print style, but because he actually likes how they clearly and concisely present summaries of dense, compact information. I'm afraid this comes off a little like cargo-culting Tufte, going through the ceremony without actually grokking his meaning.

acqq 11y ago
Yes, the first thing I've thought looking at the page on the computer was "I wonder how that looks on my iPhone." I've tried: not easily readable, for me.
- collyw 11y ago
  Is it not the case that san-serif fonts are better on screen and serif better in print? Seems a bit strange that the webpage uses serif.
  - acqq 11y ago
    I actually like serif fonts on retina screens. The first "reader view" on the iPhone was serif and it was easy to read. On the linked page the resulting size of the letters on the page is simply too small to allow easy reading. When the area to display text is so small, the designer shouldn't insist on the white margins or the comments on the side. On web page, the comments could be much better done in the "Wikipedia" style (showing on click). The design of the Wikipedia articles on the moment is actually good on iPhone. Much better than this, very natural to read.

lnanek2 11y ago

Would have been nice if they had updated it more for the web. When I make my browser very narrow, for example, the side figure is squished so tiny it is unreadable. Good web sites are reactive and would have moved it below the section at that point instead of keeping it at the side. Seems like they just aped a book style and ended up with something not good for the web.

butthackerz 11y ago

I really like it. Unfortunately, it is not clear what license ETBembo carries, if any. In fact Tufte indicated that ETBembo is not public. So it may not be legal to use it. I think that Dejavu serif is an acceptable (superior?) substitution. Source: http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000bm http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0...

dredmorbius 11y ago

First: I very much admire the spirit and concepts presented here, even where specific aspects strike me as less than ideal. In a world of Web designs which are both grossly overwrought and fragile, this is a compelling antidote. Specific designs are born of their environment Tufte's principles are born of their medium, and both message and format change as medium does. Understanding the why and wherefore is far more important than the what of design. Borrow but don't ape So take the concepts and use those which are applicable. But allow yourself leeway as well. Constraints of pagesize, contrast, and other aspects make some of Tufte's suggestions less advisible for online. I find the grey-field charts translate poorly, for example. Layout doesn't fix bad writing, but it helps most, and exposes bad Good writing can be killed by bad layout and presentation — this is a frequent observation in HN comments on overstyled articles. Middling writing, with good, well-structured layout, becomes easier to read. Bad writing lies naked on the screen when shorn of its shielding raiment. I've found that small changes — drop-cap initials and a bold first line, help in acquiring content particularly when presented in a "cards" view. Quite the accidental discovery, but one I find very useful. https://ello.co/dredmorbius/post/QGKKdiuqUw6O7ROl-V3uJA https://ello.co/dredmorbius/post/QGKKdiuqUw6O7ROl-V3uJA Yes, much of the beauty of Tufte's books comes from the totality of how they're architected: ideas, structure, presentation, layout, typography. But incremental steps help. Embrace and Accept Medium Properties Paper is fixed size. Online is dynamic. Inks are expensive, colour moreso. Pixels and rgba values are cheap, though too much flash is distracting. Images can offer zoom for detail on hover or click. Sections. While Tufte uses only chapters and section headings, his books are also divided into Parts. As are Feynman's Lectures as I recall. In practice you'll find at least three, and frequently four, levels of hierarchy may need support: Part, Chapter, Subsection, and SubSubSection. Technical writing may have more levels of hierarchy. Font sizes: show deference to the user's stated preference, if it exists. If not, prefer rem and em units to px or pt. Yes, MSIE back support and broken Android implementations mean you'll need workaround fixes, but you can at least build em/rem units in as your base. Font faces. I take exception with much of the font-bigotry noted here. I honestly Just Don't Fucking Care most of the time, though I find online font choices are occasionally spectacularly poor. Generally I prefer a decent, widely available, and good enough font for online presentation. Excessive fucking with dynamic Web fonts leads to many pages which fail to render text at all on older devices. Colour. Text should be high, though not extreme, contrast. A slightly creamy background is preferable to lighter text. For Web-specific elements, particularly hyperlinks, some affordance indicated by colour is helpful. Also joining related items (e.g., sidenotes and related text). CSS counters. These take the manual tracking out of identifying content and references. Sections, headings, references (side / end notes), figures, tables, images, etc., can all be automatcially numbered. This is useful (though not universally supported). Graceful degredation. A challenge with any UI/UX enhancement is that various clients don't support all features. Degrading gracefully, and providing maximum possible content and structure, really helps. (My own sidenote experiments fail somewhat in this regard.) :hover, :active, and other interactive elements. While the design shouldn't rely on these (see above), offering additional hints by way of these mechanisms can be useful. Contrast. Provide it. ContrastRebellion is a frequently referenced site. Accomodate Variable Viewports Responsive design is pretty much a necessity these days, and it's easier than you think. In the case of Tufte.css, some principles, such as ample whitespace, make sense in the context of print where sizes are rigidly defined. For online content, sidebars, sadly, fail to remain viable as viewport widths shrink. My solution was to transition sidenotes to what are effectively callouts, with a gradually increasing background shading to identify these, as viewport size decreases. Or rather, in a mobile-first design, you build callouts which become marginal sidenotes as space increases. What HTML/CSS Needs* References. Seriously. Why are we hand-tooling fucking endnotes / sidenotes, still? Robert Nystrom's Game Programming Patterns <aside> sidenotes are interesting, see his comments elsewhere. I'm not fully sold, but these could prove useful. A client-manipulable comments / discussion aspect is another element that I'm finding myself increasingly wanting, something that is structured by way of data (author, date, references, subject), but whose ultimate presentation (flat, nested, collapsed, semi-threaded, etc.) is ultimately under client control. HTML5 is an awfully good start A grab-bag of some of my own experiments I've been playing with many of the ideas presented here as well as others. Sidenotes: http://imgur.com/a/TXpis http://imgur.com/a/TXpis Motherfucking Website — this is the bones of my own preferred site layout, though it lacks the responsive elements and much of the polish (which I'm still working on): http://codepen.io/dredmorbius/pen/KpMqqB?editors=110 http://codepen.io/dredmorbius/pen/KpMqqB?editors=110 HREF sidenotes: similar to the reference sidenotes I use, and incorporating elments: ::before and ::after content, counters, and negative-margin offsets. http://codepen.io/dredmorbius/pen/XJGwQv http://codepen.io/dredmorbius/pen/XJGwQv Ello CSS implmentation of HREF sidenotes: http://i.imgur.com/YA0cCNs.png http://i.imgur.com/YA0cCNs.png http://i.imgur.com/QNygLE8.png http://i.imgur.com/QNygLE8.png Sample site design with table formatting: this adds greenbar and a current-line indicator but otherwise borrows from Tufte's table concepts. https://www.reddit.com/r/dredmorbius/comments/3832wx/occupation_classifications_growth_and_change_over/ https://www.reddit.com/r/dredmorbius/comments/3832wx/occupat...

thirdsun 11y ago

I like it as a starting point, a minor sidenote though: What you perceive and describe as bright red links, code and sidenotes is for me, as a color blind, almost indistinguishable from the body text if it wasn't for the underlines and monospaced font. Those off-black and red colors are for me just very similar dark hues on an off-white background. If you want to highlight these elements the current red does a poor job for colorblind people like me.

startling 11y ago
I'm colorblind as well, and did a little double-take when I read this comment, but I think you misunderstood. "Other forms of text—for instance, links and code—are slightly lighter and sidenote numbers are bright red to distinguish them from inline text." Only the sidenote numbers are bright red.
- esquevin 11y ago
  Yes, I can confirm to you that only the sidenote numbers are colored.

SeanLuke 11y ago

Resizing the window reduces the user's desired font size: I don't know how many web readability rules this breaks. If the user then increases the font size, the web page obliges, expanding beyond the window boundary, yet doesn't provide a horizontal scroller! Very bad. The thing is: Tufte's style isn't designed for webpages. It's designed for books. Books have defined margins, a fixed size, and pages with a defined length. (Good) web pages don't necessarily have any of that. This is where sidenotes fall down, for example: the CSS author has to jump through a variety of hoops, breaking various conventions, in order to make them usable when the user narrows his window width.

wkoszek 11y ago

My feeling is that it looks great compared to most of the stuff I see on the web. It's a good start for a plain minimalistic website. The content needs more work (one "Tufte's" is fine, while the other don't) and all "don't" have incorrect '.

rcarmo 11y ago

Biggest issue for me is that on mobile all the side notes go away (on portrait) and there is no fallback.

tripzilch 11y ago

Something wrong with the centering in my Firefox (v39, Linux) browser: http://i.imgur.com/8t95PQS.png http://i.imgur.com/8t95PQS.png Similar thing happened to the full-width image. I'll try to submit it to the Github.

daveliepmann 11y ago
Sorry for the trouble. Both of these should be fixed now. The second table style PR wasn't fully tested in FF.