Tufte Style in Tiddlywiki for Better Readability

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!

Great style @Mohammad ! Thank you for this!

I just stumbled upon A Website To End All Websites | Henry From Online on hackernews and would like to share it here.
The style looks very similar to Tufte.
The autor develops an idea on how the web should be that fits well to the concept of TW.

There is two things we can learn from this site on top of Tufte and that is immersive animations and responsive freedom of design that means the page uses big pages to show off but adapts to mobile screens.

1 Like

Is It so wonderful?

TT

Dear @Mohammad / Mohfte

Why in your example is this title not on ONE line?

Just asking
TT

The font size and width can be adjusted to have that title in one line!

1 Like

Of course. SO why didn’t you make it adaptive already?

My admittedly quick research suggests that doing so in pure CSS (i.e., without additional JS) is either complex or not yet widely supported, so if you’re asking someone else to do this work for you, you may want to be a little more polite.

2 Likes

This post was flagged by the community and is temporarily hidden.