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.

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

3 Likes
#3

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

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

1 Like
#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

2 Likes
#5

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

@Anjar created something similar in the past.

2 Likes
#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>
8 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!

2 Likes
#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.
3 Likes
#11

There is a very lovely macro!

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

It can be added right into a style declaration.

6 Likes
#12

A TiddlyWiki Implements Edward Tufte’s books and handouts style

I have implemented Tuf CSS in TiddlyWiki. The sidenotes and margin notes appear when the sidebar is closed. If the sidebar is open, they are displayed as block elements within the tiddler.

Demo

Tufte CSS — Edward Tufte’s books and handouts style

  • The controls are concealed when the sidebar is closed.
  • A custom font is employed (Georgia, on Windows 11); you may modify it if necessary.
  • The story river is centered with a maximum width of 800px; adjust it to suit your needs.
  • There are two procedures for adding side and margin notes. The sidenote adds inline contents while the margin note adds content in block mode
  • For small screen like mobiles the side and margin notes are displayed beneath the text they are added in the tiddler body.

Screenshot

image
image1369×905 62.4 KB

4 Likes
#13

You and I will likely disagree about any webpage rep. of Tufte forever. :grin:

Tufte had truly brilliant information designs to communicate complex data for PRINT media.

The layout you give is just a slightly minimalist picture in a text.

What is Tufte about it?

Why not just say “my nice page design, Moh?”

QED, TT

#14

That’s true! BUT,
This is a sample article styled using a minimal version of Tufte CSS. The goal is to present information clearly and elegantly, focusing on readability and typographic harmony — just like in Edward Tufte’s books. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.

Tuft’s style introduces a methodology for writing!

In the example I only implemented the side and margin notes but, Edward Tufte’s philosophy, as reflected in his textbooks and the tufte-css implementation, emphasizes:

  1. Clarity & Minimalism – High data-to-ink ratio, removing unnecessary decoration.
  2. Side Notes & Annotations – Using marginalia instead of footnotes for better flow.
  3. Typography & Readability – Clean fonts, generous spacing, and semantic hierarchy.
  4. Inline Graphics & Data – Tight integration of charts and text for immediate context.
4 Likes
#15

Helloo
On mobile. The install link in your wiki doesn’t seem to do anything and I can’t seem to find a plugin/ theme. :slight_smile: like the look of it though.

#16

The typeface and layout is beautiful.

Side column looks great on laptop, and slides under the text on my Android phone in Chrome. It also does this when I open your tiddlywiki sidebar.

My only suggestion might be that the sidenotes be in text boxes with a background color to match the page background. That way they are also more noticeable as footnotes when they slide under the text in the main column.

#17

Hi Dave,
Feel free to customize the stylesheet. Look at

/* Margin Notes - Appear in the right margin on desktop */
.tufte-lite .marginnote {
	font-size: 0.85em;
	line-height: 1.3;
	vertical-align: top;
	text-align: left;
	color: #555;
}

/* Sidenotes - Inline with body text, but appear in margin */
.tufte-lite .sidenote {
	padding: 0em 1em;
	font-size: 0.85em;
	line-height: 1.3;
	background-color: #f5f5f5;
	border-left: 2px solid #ccc;
	color: #333;
}

The look and feel can be customized.

#18

See the updated version, Now the Tufte CSS style tiddlers follow palette colors.

#19

Good.

But please rename that, correctly, as a Mohfte design choice.

#20

Looks great! I need to set up a wiki in the near future that will be used to publish some standalone articles as static HTML and this might making an excellent starting point. Your work on this is highly appreciated.

I wonder if using <sidenote>this is a side note</sidenote> might make for a better writing experience than <<sidenote "this is a side note">>?

2 Likes