[HN Gopher] Tufte CSS
___________________________________________________________________
Tufte CSS
Author : stefankuehnel
Score : 101 points
Date : 2023-03-05 18:18 UTC (4 hours ago)
(HTM) web link (edwardtufte.github.io)
(TXT) w3m dump (edwardtufte.github.io)
| Nezteb wrote:
| I'd never heard of Tufte or this CSS package before, but I
| recognized it instantly because I use https://scribe.rip/ as my
| preferred Medium frontend. Now I understand the design choices a
| bit more. Neat!
| ecuaflo wrote:
| I think this would be great as a tailwind css plugin similar to
| the typography plugin [0]
|
| [0] https://tailwindcss.com/docs/typography-plugin
| richardanaya wrote:
| Where's the yellow?
| 5cott0 wrote:
| I am not a fan of how et-book looks on windows, especially
| firefox.
| cratermoon wrote:
| Conventional wisdom says sans-serifs fonts are more legible
| than serif fonts for body text on screens. I have difficulty
| reading long blocks of et-book on any screen, whether it's in a
| browser or other application. I prefer Palatino for body text,
| if a design really insists on having serifs for screen. For
| print, although either et-book or the Bembo typeface that
| inspired work fine.
|
| The rest of the design guidance, the margin notes, the figures,
| are great but tend to degrade poorly on smaller device screens.
| notpushkin wrote:
| I'm trying to cross this with Material for Mkdocs over at
| https://material-tufte.ale.sh/.
|
| It's hacky right now, but the result is beautiful IMO. You can
| find some more examples in the documentation here:
| https://lunni.dev/
| bjornasm wrote:
| This looks like a match made in heaven! They should add that as
| a feature into the original project, imo.
| notpushkin wrote:
| Thank you! You can upvote it here (and perhaps share some
| ideas?): https://github.com/squidfunk/mkdocs-
| material/discussions/468...
| bjornasm wrote:
| I love the minimalistic/back to the roots/KISS style of academic
| homepages, which I feel this tries to mimic. I am making my own
| portfolio/academic blog these days where I do some of the same
| (might change the background from white to some offwhite thanks
| to this).
|
| While I don't think it works for every type of webpage, I think
| it really shines when it coems to leave the spotlight for the
| text content of a page.
| pjot wrote:
| Taking one of Tufte's classes was such a great experience. A
| large takeaway from it is on information density - and is why
| there is such an emphasis on writing side-notes and in the
| margins.
| sramam wrote:
| I am a big fan of Tufte's work and try to employ my understanding
| of it when possible. I've never really had a criticism that
| seemed worthwhile. Even this page - I read to the end and thought
| this is fantastic.
|
| However, perhaps because I only skimmed the page contents, I
| struggled to find the link to the github project.
|
| Wonder if that is my brain being conditioned by expectations of a
| "normal" webpage or that the links have to be highlighted
| differently.
|
| PS: I do not recall if Tufte's work addresses hyper-links
| explicitly.
| detritus wrote:
| ed - oh, I'm so wrong below.
|
| > "If you see anything that Tufte CSS could improve, we welcome
| your contribution in the form of an issue or pull request on
| the GitHub project: tufte-css. Please note the contribution
| guidelines."
|
| lol@ me. It was right there, at the top.
|
| https://github.com/edwardtufte/tufte-css
|
| - - -
|
| I don't think it relies on Github to purvey the files. I think
| it just encourages you to view source and grab the files
| yourself, old-school style, which sort of makes sense in
| context...
|
| > "To use Tufte CSS, copy tufte.css and the et-book directory
| of font files to your project directory, then add the following
| to your HTML document's head block:
|
| <link rel="stylesheet" href="tufte.css"/>
|
| Now you just have to use the provided CSS rules, and the Tufte
| CSS conventions described in this document. For best results,
| View Source and Inspect Element frequently."
| ssttoo wrote:
| https://github.com/edwardtufte/tufte-css
| gjstein wrote:
| This gets shared on here from time to time and while I love it
| (and Tufte), it really falls short on mobile devices. When the
| page is sufficiently narrow, revealing sidebar items is done via
| small clickable elements: if the user has never seen those
| before, I expect they will miss out on them. Note that this
| includes both footnotes and also figure captions, which are often
| not "optional content" as are many of the sidenotes. My own blog
| / lab website [1] has a similar style, yet instead makes all
| sidebar elements visible even when the page is collapsed; fell
| free to emulate!
|
| [1] https://cs.gmu.edu/~gjstein/2018/12/toward-real-world-
| alphaz...
| metaphor wrote:
| > _When the page is sufficiently narrow, revealing sidebar
| items is done via small clickable elements: if the user has
| never seen those before, I expect they will miss out on them._
|
| Absolutely this!
|
| Upon seeing sidenotes and before reading the article, my first
| instinct was to see how these elements would react in full v.
| narrow, and was immediately turned off with how information
| appeared to wholesale disappear.
|
| Thanks for sharing your blog as a contrasting
| implementation...so clean and beautifully nuanced.
| benhoyt wrote:
| I just checked one of the best "online-first" technical books I
| can think of, "Crafting Interpreters" by Bob Nystrom, because
| it uses side notes heavily. What it does when the screen width
| is narrow (like on a phone) is move the side notes to the main
| flow, but in a smaller font size and separated with horizontal
| lines to set them off.
|
| It does break up the flow a little bit (which is why they're
| side notes in the first place), but at least they're clear and
| obvious. And this book's side notes are often quirky and
| interesting -- definitely worth reading!
|
| Example: https://craftinginterpreters.com/the-lox-language.html
| iudqnolq wrote:
| I went to read the page and found them very intuitive. In fact,
| it took me longer to figure out what you meant by "sidebar
| elements". I think you meant "sidenote elements".
|
| A very common idiom in long-form webpages is a clickable
| superscript to show a footnote-like item inline.
|
| To improve usability for people less used to this sort of
| format I would underline it in blue like a link. I know it's
| not fashionable, but I think click targets should be styled as
| either links or buttons and this fits the concept of a link
| better.
|
| You're completely right the target should be larger. The fix is
| to add a little padding.
| detritus wrote:
| That was the irritant I noticed. If I was to deploy this I'd
| de-Tufte the wee footnote numeral links a bit and make them
| more Webby, somehow. Otherwise it's a great-looking
| implementation.
| aranke wrote:
| Yup, I found latex.css (https://latex.vercel.app/) has a better
| layout but worse typography so a hybrid is the best of both
| worlds.
| zzleeper wrote:
| This is amazing. I wonder if it's possible to integrate it with a
| static site generator (Hugo Jekyll pelican etc) so I can get the
| best of both worlds?
| aranke wrote:
| I've had good luck integrating with Astro.JS
| (https://astro.build/), good luck!
|
| My website is in my bio, happy to chat if you want to do
| something similar.
| bendiksolheim wrote:
| I have made my own theme for Zola (https://www.getzola.org)
| based on Tufte CSS. It was mostly straight forward, I believe I
| more or less recreated the structure on
| https://edwardtufte.github.io/tufte-css/. You can see my
| website on my profile, if you are interested.
| kdheepak wrote:
| There's https://github.com/jez/tufte-pandoc-css which
| integrates with Pandoc.
|
| I use it for my blog that features margin notes from time to
| time: https://blog.kdheepak.com/
|
| Though I had to write a lua filter to make the Pandoc margin
| notes work appropriately :)
| aranke wrote:
| If anyone wants to use this for their website, I found the best
| luck in adopting the layout from https://latex.vercel.app/ and
| overriding typography with Tufte CSS.
|
| My 80% finished website is in my bio if you're interested.
| AuthorizedCust wrote:
| I love this. I wish there was a straightforward way to get this
| sensibility into Google Docs, MS Word, or WordPress. So far, not
| seeing this.
|
| (The WordPress themes centered on this appear to have been
| abandoned years ago.)
| AlbertCory wrote:
| When his first book came out, Internet was geeks-only, Amazon
| didn't exist, and you had to order the physical book directly
| from him, as I recall. Maybe your bookstore would order it for
| you.
|
| Nonetheless, it became a cult sensation. Now _that 's_ a debut
| book.
___________________________________________________________________
(page generated 2023-03-05 23:01 UTC)