Tufte Style in Tiddlywiki for Better Readability

#1

Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography. See: Tufte CSS (edwardtufte.github.io)

Also see the note on Feymman Books (very famous professor in science and engineering is known for his wonderful lectures in Physics).

I am looking to see if there is any implementation of Tufte’s style in Tiddlywiki.

This can be

  1. a two columns tiddler
  2. left column with 60% of width for text
  3. right column for 30% of width for sidenotes

NOTE: This is different from multi columns story river or tiddlers already available.

References

Remarks

I like this excerpt from Tufte CSS project:

Finally, a reminder about the goal of this project. The web is not print. Webpages are not books. Therefore, the goal of Tufte CSS is not to say “websites should look like this interpretation of Tufte’s books” but rather “here are some techniques Tufte developed that we’ve found useful in print; maybe you can find a way to make them useful on the web”. Tufte CSS is merely a sketch of one way to implement this particular set of ideas. It should be a starting point, not a design goal, because any project should present their information as best suits their particular circumstances.

3 Likes
#2

Typography definitely does not get enough attention in TiddlyWiki.

I implemented something very similar in TiddlyWiki Classic for the Student Notebook project. I will see if I can dig up a copy, it might provide some inspiration.

1 Like
#3

Thank you Saq! That would be great!
Much appreciated.

Yes, I am thinking how we can make Tiddlywiki more useful for education.

#4

I adore Tufte’s books. They are a perfect balance between information and art.

His book “The Visual Display Of Quantitative Information” has had a major impact on how I present exhibitions of paintings & photography.

TBH, “Tufte CSS” is a derivative. It is not authored by Tufte. Tufte is a master of print media. I’m not sure how well it translates to computer CSS?

For fun, note he is often called “ET” (Edward Tufte / Extra-Terrestrial)

TT

1 Like
#5

https://groups.google.com/g/tiddlywiki/c/QNZLtqecbIU/m/rTUKQ028BgAJ

@Anjar created something similar in the past.

1 Like
#6

I appreciate this line of thinking, Mohammad. I think in general there is something about the emphasis on verticality in digital documents that impoverishes our understanding and enjoyment of the material. A physical book presents us with spreads of two pages at a time, which allows us to cross-reference, move our eyes from side-to-side, and feel anchored in a way that a one column display of text can never do.

Here’s a good article on this from the dawn of the “e-readers.”

I also feel a need for more horizontal approaches to tiddler layouts. I love Tufte and his allowances for annotation. I’m experimenting with putting my custom field information for my tiddlers into a sidenote for when the sidebar is hidden. I’m doing it by pulling out that HTML and positioning it absolutely to the top of the tiddler frame element. Easier than trying to create a grid out of the tiddler frame itself.

Screen Shot 2022-10-06 at 10.59.48 PM
Screen Shot 2022-10-06 at 10.59.48 PM2040×1964 271 KB

As you say, this is distinct from having multiple columns of tiddlers, which I find attractive, in a pinterest sort of way, but not very meaningful in the long-run.

The CSS is just something along the lines of:

<div style='background: #eeeeee;padding: 1em;position:absolute;top:16%;right:-40%;width:15vw'>

Side notes

</div>
5 Likes
#7

Yes, this works fine for me in the past. I remember that the left tufte style annotations of @Anjar can be used as anker position, but not (easily) as links (ph due the coding in html) to other tiddler or anker.
I appreciate this better implementation in TW5.
Best

#8

Thank you @JenniferS
Good stuff!

I think your solution can be used by setting a max-width for .tc-tiddler-body and a conditional $list to check if the sidebar is open or not!

1 Like
#9

A vero (true). But what has that to do with Tufte?

Isn’t it just YOU TWO?

1 Like
#10

@JenniferS following your link and the discussion of location or place as something we humans make use of to remember and learn. I just want to flag I have researched and considered this a lot. Just as people took to touch devices quickly because touch is already something we are designed for (Haptics feedback helps as well), I have tended to recognise more and more we humans also have both locational and “trail memory” skills we underestimate.

  • Unfortunately most user interfaces are overly simplistic and do not help us leverage these innate skills.
  • I believe we have a long way to go before User Interfaces resonate more deeply with our innate inherited or natural world developed skills.

[Edited]
“Way finding” and or “place making” are other areas considered by some relating to this.

  • Of course tiddlywiki allows many more different ways to organise content than a book, so there is possibly no universal solutions, but more opportunities.
2 Likes
#11

There is a very lovely macro!

<<if-no-sidebar "width: 15vw;">>

It can be added right into a style declaration.

4 Likes