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
A vero (true). But what has that to do with Tufte?
Isn’t it just YOU TWO?
1 Like
@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.
4 Likes
There is a very lovely macro!
<<if-no-sidebar "width: 15vw;">>
It can be added right into a style declaration.
6 Likes
You and I will likely disagree about any webpage rep. of Tufte forever. 
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
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:
- Clarity & Minimalism – High data-to-ink ratio, removing unnecessary decoration.
- Side Notes & Annotations – Using marginalia instead of footnotes for better flow.
- Typography & Readability – Clean fonts, generous spacing, and semantic hierarchy.
- Inline Graphics & Data – Tight integration of charts and text for immediate context.
4 Likes
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. 
like the look of it though.
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.
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.
See the updated version, Now the Tufte CSS style tiddlers follow palette colors.
Good.
But please rename that, correctly, as a Mohfte design choice.
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
Right. Very Mohfte and not Tufte.
Thank you, Saq. Certainly, your syntax is significantly more refined than mine.
Could this used the already-defined-in-HTML tag <aside>? It looks like it’s used in exactly the same way as the <sidenote> ... </sidenote> suggestion, or does using existing html tags make it trickier?
(noting that I only learned about the aside tag yesterday while looking for something else and am watching this Tufte thread with interest, but not yet played with a Tufte/TW setup)
3 Likes
Absolutely! We only need to use it like <aside class="sidenote">...</aside>. This is because users may have their own use of aside.
Give a try, it works for your proposal.
5 Likes
Hi @Mohammad,
Just having a poke at my wiki and I noticed that the Tufte wasn’t being tufty.
I Have tried dropping your ‘Tufte Styles’ Link into an empty wiki and tiddlywiki.com the only side notes which appear are denoted by <div class="marginnote"> the other methods don’t.
Never mind. The tiddler tufte-lite/procedures also needs to be exported.
1 Like
Not surprising since it never was a Tufte.
And never could have been.
It is a decent design approach.
It is a Mohfte.
It’s author @Mohammad is a nice bloke.
Happy updates!
Ok… I’ll bite…
Why, when based on the style of of Tufte can it no be Tufte and what is Mohfte or is that just a word you’ve coined to mean ‘Tufte like or haveing some aspects of Tufte while not being Tufte’?
1 Like