Tufte Style in Tiddlywiki for Better Readability

#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
#21

Right. Very Mohfte and not Tufte.

#22

Thank you, Saq. Certainly, your syntax is significantly more refined than mine.

#23

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
#24

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
#25

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
#26

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!

#27

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
#28

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

1 Like
#29

Of course it is! Silly me.

#30

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
#31

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

#32

@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?

#37

@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
#40

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

#42

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%;
#43

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:

#44

@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: