Tufte Style in Tiddlywiki for Better Readability

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

It is a portmanteau (word blending) of “MOHammad” and “tuFTE”.

1 Like

Of course it is! Silly me.

Just another addendum that just caught me out. In order for the Mohfte style to be applied the tiddler needs a class field containing tufte-lite to apply the Mohfte style.

1 Like

9 posts were split to a new topic: Add notes and figures

@Mohammad Hope your doing well.

I note that there is a figure, caption and image sections in the CSS, but they are not referenced in the procedures or dynamic.

I’ll have a prod, but did you have anything you’ve already considered to drop in? (I have an image floating in the sidebar, but it only shows half with a scollbar, need to widen the margin for images)

Cheers.

Or a general question, can an image be scaled to fit with css?

@Mohammad, been having a look at your TW and imported appropriate tiddlers into a copy of my gun TW. Been playing around and your/Tufte’s ideas are swirling around my brain for how we might encompass some of those in the gun TW. Certainly the use of side and margin notes would change some basic design but might make things easier for users as we hide TW controls, etc. We would need a way of closing tiddlers though but that could be done through an action-message.

More playing to be done.

Thanks for your work on this.

bobj

1 Like

2 posts were merged into an existing topic: Add notes and figures

While this thread has some interest…

How do I sort images in the margin?

https://hwh.stephenteacher.com/txtbook.html#Pascal’s%20Law

(You’ll have to close the sidebar)

EDIT:
Never mind…that’s an embed isn’t it, not an image! Sorry, I need more coffee…or less coffee. Actual SVG added to the side bar. Scales. Just need to make it wider.

EDIT EDIT:
Sorted. Values in tufte-lite.dynamic tiddler.

/* Figures- Inline with body text, but appear in margin */
.tufte-lite .figure{
  float: right;
  clear: right;
  margin-right: -55%;
  margin-top: 0;
  margin-bottom: 1em;
  width: 45%;

Sorry for the late reply. I have been very busy these days and have had less time to visit regularly and reply to posts.

Regarding the CSS, if I remember correctly, I don’t have specific CSS for the sidenote, but the tiddler frame and body do have CSS when Tufte CSS is in action.

I see from the responses that other people have better ideas. So feel free to revise and invent a new style based on this :wink:

@Mohammad I tried to move posts to a new thread. Without it taking a long time, I took what seemed to be the obvious deviations. If I screwed up, well, I tried… :confused:

2 Likes

Thank you! Looks good to me!

1 Like

Don’t we usually get a breadcrumb to link back to whatever the original thread was, when we branch off a batch of posts, so that it’s easy to double-check any lingering ruptures of continuity?

(I thought I had also commented on that thread, but maybe not on the parts that belong here? Hard to see without a link back…)

[update: Sorry. The split notice from this thread to the new one was higher, and I misunderstood the direction of the move.]

I can see links at each point where there was a break but also under the top post, there is a dropdown

Then this can be opened even further however the links to splits seem not to appear in the top list.

1 Like

Thanks @TW_Tones for trying to clear things up! Now I see that I just misunderstood. @CodaCoder moved some posts from here to this new thread. And indeed my comment is there now, rather than here. Sorry for the confusion!