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

Great idea, @Mohammad – seeing this pop up in the recent topics inspired me to play around with a similar concept that allows one to easily add notes and figures as they’re reading :slight_smile:

4 Likes

That’s quite nice! Thanks for sharing.

Don’t suppose you could roll it into the context menu plugin and/ or put the notes to the side of the tiddler, Mohfte style? :smiley: and the moon on a stick?

Anything’s possible with Tiddlywiki

I missed this last time around, although I’d seen the earlier thread. @well-noted, this is fantastic. I have a wiki I want to get back to someday that could really use this. I’ll try to dig in then, but for now, kudos!!

2 Likes

I too am coming across this after not seeing it the first time around.

Some kind of solution like this might be extremely promising for some purpose like grading / commenting on student work.

That said…, one big wish from my direction — and maybe others? — would be to ensure that the comment is hooked to a segment of text, not just indexed to a single footnote-like point.

Especially given that your demo invites us to select text (on which to comment), it’s odd that the note — as far as I can tell — ignores the start-point, and simply inserts a flag at the end-point. Comments such as “this phrase seems ambiguous” or “These sentences need a citation” are much more useful if the whole passage in question can “light up” (either with a subtle constant highlight, or a hover effect once comment is in focus).

(For what it’s worth, here’s an example of how my teaching feedback looks now. I’ve not found a way to get things to line up vertically, but I’ve used color-coding so that people can see how each comment corresponds to some part of the original text.)

I’ve struggled with this too. When I worked on TW Bibles, I really wanted a layout that I knew how to hard-code in a reasonably good approximation of the ideal, but which I have found no way to automate. A hard-coded version for one passage shows what I would like to do.

Although my sidebar is very narrow compared to the others under discussion, it’s very much the same idea. I would love to to be able to automate this. But it’s not just that I haven’t seen it done in TW, I’ve never seen it anywhere that the matching vertical positions determined automatically; they’re always hard-coded.

@Springer, your color-coding is the best alternative I’ve seen, but it’s pretty far from what I’d really like, which is that hover/long press on the main content highlights the side note and vice versa. Often enough, I’d love the combination: the main text is plain, but on hover of delineated sections, they get a specific background color, and one of the sidebar notes is highlighted in the same color or a derived one.

If at first something is linked to a tiddler, but describes something within the tiddler it sounds like an opportunity to use excise and transclude. In this case the transclude title becomes the reference to the exact position in the text that transcludes it. I little carful design could integrate these tools to be excise and transclusion aware, and even store the notes in the transcluded tiddler fields.

  • This way the note can even appear when using mouse over the text. Changing the background color is interesting here too. Even better would be a line from the RHS note and the block of text to which it pertains.
  • An excise with a named template is also a smart idea, and being able to change that template useful as well, for example the transclusion could be marked as requiring review, then later to provide additional info, just change the template used.
    • Having a transclusion of the form {{title|| or {{title||template}} is deterministic so we can easily find and replace these even un-excise these with tools, perhaps even from the view template.
    • This includes searching for where either the transclusion exists, or for the text of the transclusion after rendering to get what some of you are asking for.
  • I would also investigate modes that allow an author to have there excise/transclusions and notes visible and only selected ones in reader or printing mode.

Another approach is to use standard or arbitrary html tags to mark the text and use CSS to handle the notes. CSS permits the use of Content references CSS Content Property and it tiddlywiki I believe we can find away to use content found in a field or tiddler, and use this same value to locate that block.

In a related area I found a way to programmatically identify items to include in a tiddler TOC, without having to specify unique ID’s even when transcluding many tiddlers. This same technique could be used to list such “notes” both to the right and in footnotes etc…

  • I have not reviewed the mechanism for the above Tuft Style.

There is still a lot of work behind this which may prove very useful. Something I may come to do as I am now writing a book I hope to publish. Interesting perhaps my book could be landscape with the notes to the right and room for the reader to add their own notes? Including in a digital book.

This is amazing! I love the context menu when select something :wink:

@well-noted
This great demo has become a burden in the middle of this discussion. I would appreciate it if you could kindly create a new post tagged with “Tips and Tricks” and introduce it briefly there.

Thank you!

I can’t speak for @Springer, but my frustrations have nothing to do with how to chop up the content. They’re all about layout. When I was dealing with this @etardiff suggested that I could reuse some work I and others had done in the Cornell Notes thread. That was a good idea, and I think I may now be able to accomplish it, although I couldn’t at the time.

Tufte’s books manage this in the more standard portrait format by making the pages fairly wide. Could you consider the same thing?

The only point here I make is if you do chop up the content you gain an entity over which you can determine layout and features applied to that “piece”.

  • This could be via a template that is applied to the content.
  • The template can slip in custom html tags and CSS for that content

Basically once you can address that content you can apply various tricks to it.

Yes, of course thanks.

I noticed above a discussion about the use of html tags like aside, que, sidenote and section/article etc… to delineate text.

I do have an unpublished tool to select text and click to wrap in an arbitrary tag name, and it allows you to save them for a quick click and apply. I would be happy to dig it up and polish it if anyone is interested.

  • Although we could make a transclude template like this {{contenttiddler||article|class}} where article is a template wrapped in <article class=<<class>> ID=<<ontenttiddler>> >content</article> if it helps.
1 Like