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

51–60 of 107 posts

Re: Tufte CSS

#51

Post by alwillis »

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 fake italics using the font-synthesis property: https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthe....

Also, setting the document font size to 11px is a bad idea for a whole lot of accessibility reasons. The current best practice is to leave the global font size at 100%, which in most browsers is 16px by default.

This allows users to scale the type up (or down) as needed, unlike various versions of IE which won’t allow this if the base font-size is set in pixels. This allows the media queries to work correctly, since they always assume 1em = 16px. Resizing the fonts should be done in rems, with pixels as a fallback for non-supporting browsers.

Re: Tufte CSS

#52

Post by dredmorbius »

gknoy wrote: post #27
tjohns wrote: post #16

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.

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

The font size _does_ scale, in ways I find quite annoying. Smaller scaling range would likely be better. Or stick to device/user defaults.

Re: Tufte CSS

#53

Post by e12e »

lifeisstillgood wrote: post #23

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

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

Re: Tufte CSS

#54

Post by dredmorbius »

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…

Another responsive sidenote implementation, screenshots:

http://imgur.com/a/TXpis

Re: Tufte CSS

#55

Post by fizixer »

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?

Re: Tufte CSS

#57

Post by munificent »

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 like how your asides move into paragraph flow as the page narrows.

Yup. This is a nice (deliberate) side effect of using separate blocks instead of jamming them in the middle of the paragraph. The original location of the 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.

Re: Tufte CSS

#58

Post by nickzoic »

fizixer wrote: post #55

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?

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!

Re: Tufte CSS

#59

Post by kryptiskt »

fizixer wrote: post #55

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?

It's referring to the Feynman Lectures on Physics http://www.feynmanlectures.info/, he was presumably involved in the presentation aspects of that (the books I mean, not the site).
Post reply on HN