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

61–70 of 107 posts

Re: Tufte CSS

#61

Post by hftf »

dredmorbius wrote: post #54
saidajigumi wrote: post #42

Earlier quoted context omitted.

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…

Another responsive sidenote implementation, screenshots: http://imgur.com/a/TXpis

> screenshots

What help. /s

Re: Tufte CSS

#63

Post by fasouto »

thisrod wrote: post #62

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

HTML5 introduced article, section, footer, nav... and many other semantic elements

Re: Tufte CSS

#65

Post by dredmorbius »

hftf wrote: post #61
dredmorbius wrote: post #54

Earlier quoted context omitted.

Another responsive sidenote implementation, screenshots: http://imgur.com/a/TXpis

> screenshots What help. /s

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.

Re: Tufte CSS

#66

Post by Omni5cience »

JohnHammersley wrote: post #21
christopheraden wrote: post #4

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/

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-insp... (Note: I'm one of the co-founders of Overleaf, so any feedback appreciated, thanks!)

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).

Re: Tufte CSS

#67

Post by blwsk »

alwillis wrote: post #51
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…

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. Totally agree. At least with italics, you can use CSS to instruct the browser to not create fak…

I found this post useful regarding small caps. It seems as though if the typeface contains the glyphs and you're using Chrome or Safari, you can use font-feature-settings: "smcp"

http://usabilitypost.com/2014/05/10/using-small-caps-and-tex...

Re: Tufte CSS

#68

Post by jpatokal »

myth_buster wrote: post #32

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.

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

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....

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!

Re: Tufte CSS

#69

Post by bane »

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.

Re: Tufte CSS

#70

Post by teek »

mkozlows wrote: post #17

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/ ).

For someone well versed in typography, his monospace font Triplicate is absolutely terrible looking to me. The t's, f's, and a's all look oddly slanted and upset the balance.
Post reply on HN