Add Notes and Figures to Tiddlers in View Mode - Tufte Style

Tips & Tricks
#25

I read the thread with much interest.

I have a general comment on thread naming …

I do have pet peeves on invoking Tufte (ET) on this.

Tufte, greatest book designer of informational books (physical), is NOT really known for web layouts.

So, we are not dealing with physical books. Or Tufte.

Should we call it “Wellufte” instead?

Negative over, I’ll comment more later.
TT

#26

There is a lot of discussion in the thread about “alignment”.

More interesting to me is “CONTAINMENT” within a tiddler …

This is an example where it breaks …

Screenshot 2025-11-25 10.35.49
Screenshot 2025-11-25 10.35.49988×551 37.1 KB

Maybe CSS can be used to contain that image?

TT

#27

If the blue circle image is being displayed with a “float:right” CSS attribute then it can “leak” out beyond the end of the tiddler frame. To fix this, you could add a <div style="clear:both;"/> at the end of the tiddler content

-e

1 Like
#28

As a non-programmer I read the thread thinking on THE ALIGNMENT PROBLEM,

Your Bible challenges were very astute & pertinent.

But, maybe lacking, are some more, soft-coding, radical CSS solutions?

My Q: is this a hard-code issue? Or more a CSS presentation? (especially hide and reveal).

Just a thought from a naive
TT

#29

Since v5.3.6 there is are new Utility Classes. One is tc-clearfix, which should “contain” rouge floats.

They have been added to the EditTemplate body, the ViewTemplate body, title and subtitle elements.

So something as shown in the screenshot should be “contained” already. @TiddlyTitch … Do you have a testcase?

1 Like
#30

That was a test case on the author’s site inserting an image (reproduce it at: https://tufte-style.tiddlyhost.com/).

#31

I’m certainly glad to see this demo getting some attention. I was quite pleased with it at the time, and surprised it didn’t receive any attention.

There are definitely alignment problems with it – moreover, the containment issue is one I believe just needs more thinking through in order to find the right solution.

I certainly invite anyone to toy around with it, or to at least offer suggestions :slight_smile:

1 Like
#33

The images have a position: absolute hardcoded – So the browser does what it is told to do. The image wrapper needs to be fixed.

1 Like
#34

Oh, I absolutely want to solve this with CSS as much as I can. I consider myself reasonably adept with CSS, if not always up-to-date with the latest goodies. But I couldn’t find a way to do this on my own. I reached out for help on a CSS forum and received only one answer, one that still relied on JS.

I do believe that the technique I used for the Cornell notes might work for many of the other uses here. They would still fail @Springer’s white-space criteria, but might capture everything else. I will sometime soon (well, maybe not before the weekend) see if I can make them generic enough.

1 Like
#35

@TiddlyTitch, it looks like I had an improved version of the demo available which fixes the containment issue you noted:

2 Likes
#36

I’m curious whether there’s anything about the selection (including its start point) that is retained in the background, even though the note flag draws attention only to end-point (much as a footnote does).

Is there a logic to having people select a chunk of text prior to using the context menu, rather than just placing the cursor, given that the note seems to hook only at that single end-point?

1 Like
#37

Oooo, how did I not absorb that fact?

Thanks, @pmario It’s easy to lose track of such things, especially since I had been cobbling together my own workarounds, and there were other flashier new features to learn. But now I’ll start to do it this way, so my solutions will be more uniform and shareable.

#38

The explanation for why this only references the end point was to make it more similar to the tufte style – you make an excellent point that there’s an opportunity here to communicate more information with minimal effort

1 Like
#39

6 posts were split to a new topic: Floating associated content beside main text

#46

6 posts were merged into an existing topic: Floating associated content beside main text

#47

I have made a little demo of a feature I’m tentatively calling “Canvas” that extends this demo

image

2 Likes
#48

That’s looking very cool.

As a mobile user (android, firefox) the canvas appears as a thin strip down the left of the tiddler, allowing one character per line!

Might be worth giving it it’s own thread.

#49

Good point, I haven’t played around with it on android yet :slight_smile: if I put more work into it, I’ll give it it’s own thread.

#50

Hi @well-noted , this looks great … it feels far away from the common TW-Logic, but I was surprised the canvas renders procedures - and is so powerfull to set the sidenote in there by rightclicking in the text. This seems somewhat dangerous though…

\procedure procName()
Your text comes⁠tufte-sidenote:sn-1767512627638⁠ here.
\end
Here's some content⁠tufte-figure:fig-1767512266729⁠ for your demo tiddler.

Try selecting this sentence⁠tufte-sidenote:sn-1767512243633⁠ and right-clicking to see the context menu!

<<procName>>

For transclusions the effects are also relevant, depending were I clicked I had different results: At the end of the braketts and at the ent of the tiddler:

<$tufte-container>
Try selecting this sentence and right-clicking to see the contex⁠tufte-sidenote:sn-1767513296035⁠t menu!

{{TestTransclusion⁠tufte-sidenote:sn-1767513281538⁠}}

</$tufte-container>
⁠tufte-sidenote:sn-1767513237869⁠

I would say this canvas is worth its own thread in tiddlytalk!

#51

It would be safer to use Dynannotate to dynamically set annotations, because it does not write in the text itself.
Would be nice to have a tufte template here.