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 
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? 
and the moon on a stick?
Anything’s possible with Tiddlywiki
1 Like
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.
- Having a transclusion of the form
- 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 
@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
This is my situation — a challenge for layout. (And for reasons having to do with data portability and security, I really need all my feedback on, say, a student assignment to be consolidated into one tiddler.)
This fine-grained control should be possible even if we’re working with a “piece” that’s not a tiddler but, say, a transcluded field…
I checked out that demo, and I’m seeing that each sentence-worth neatly highlights on hover, and it looks as if something (presumably per-passage commentary) is supposed to happen in the right margin… but nothing’s showing up there for me.
I started with the hover-for-comments idea at first, and played with some implementations. (I still do have a system where the whole comments section is hidden until it’s clicked, so that the visuals are not overwhelming, and I can display and chat about a student’s work in class without having my evaluative voice already on screen).
I didn’t pursue more with hovering, last time around, once I decided I needed students to be able to print a single layout that shows all the comments.
For the sake of compactness of printing, I gave up on getting comments to align vertically (even approximately) with their corresponding original segments, because then there might be lots of “wasted” empty space (and hence paper) in the print job — a real risk of running to extra pages rather than remaining viewable on one sheet. The background-color highlight trick (sticking mostly to the 3 css-class pattern that tracks the main elements of my assignment, hand-coding additional colors as needed) was the good-enough solution…
Of course, you may point out: A good css design will take advantage of white space on the screen, AND find ways to avoid wasting paper when content is printed!
Indeed, a good css design could also have comments very pale/low-opacity until hover — so that the existence and length of comments is easy to recognize, without distracting from the original — and STILL have them print at full opacity. On screen, comments callouts could even be allowed to overlap spatially if need be — as long as they each float to top and full opacity on hover (and re-arrange themselves nicely on print).
In sum… I’m still curious about a hover solution! I especially like your bidirectional hover idea: hover over a sentence/phrase to see corresponding comment; hover over a comment and see the corresponding original content jump out clearly…
But in near future I'll be trying something completely different…
Alas, for the coming semester all my efforts are going in almost the opposite direction from enhanced digital feedback. Most of my efforts will be going toward having university students (re)learn to draw intelligible grammatical sequences of letters with hand-held tools that lay graphite or ink onto flattened wood pulp. Enhancements of my digital workflow may need to take a backseat while I figure out how to get traction with the analog influx.
1 Like
It’s not too bad… Thanks to TPT (translucent paper technology) you can now store twice as much data using by using both sides… 
I have a left margin, containing the verse numbers. When you hover a verse number, the corresponding verse text is highlighted, as is the verse number. Both are also highlighted when you hover the verse text itself. Most noticeable is that those verse numbers align with the start of the first words of the verse, which may appear anywhere in the line of text. (But this is not universal; verse 2 starts in the first line, but the number is next to the second one – another complication.) The goal is that the text is readable without distractions, but that you can easily find the text for a verse number or the verse number for any given text; also, it would be trivial to hide the verse numbers, or stop the hover behavior. I recorded this screenshot, when I was working on it:
This works nicely, and would be exactly what I want. However, the heights of the verse numbers were hand-calculated and hard-coded. If you narrow the window down so that the tiddler content width actually shrinks, you will see the verse numbers no longer aligned.
I have not found an algorithmic way to align this content, at least not using CSS. I probably could do something in JS with a bit of work, but I really don’t want to go that way. I do have further ideas on this, and will try them when I get back to this work. But I’m not very optimistic.
In my experience with blue-book technology, the opacity level generally allows for double-sided use, but with occasional nonsequitur hyperlinks. These hyperlinks allow me to glimpse, on one page about Epictetus, the frustration the student experienced while scribbling a self-correction of a self-correction, on another page, about Kant.
OK, so it was working as expected. From the Tufte-notes thread context, I thought maybe the wide right margin was available to showcase commentary about the highlighted sentences.
But I see that even getting the numbers to align, and to highlight in tandem with the setences, is somewhat analogous to getting comments to behave as we’re discussing.
Yes, hard-coding the sentence numbers strikes me as quite a bit of labor! Such labor ought to pay off somehow in future development, somehow…
I did it for one short passage, and I found I learned nothing to help me automate it. There is a new API for this in the web platform, but I doubt that even this is robust enough for what I would like. And Firefox doesn’t yet support it yet, anyway.
I have seen a way to avoid hard coding.
I am yet to publish something I made that automatically generated a TOC from all nominated html tags after rendering, so included all transcluded content. With this method no numbering was needed, I know this seems off topic but my spider senses suggests to me the answer may lay there.
- Using HTML tags wrapped around part of the text and placing comments as css content. Even if this content is stored in a TiddlyWiki object (field/tiddler/data tiddler)
I think when investigating problems, that are hard to solve, be careful not to target a too specific a need.
For example it should be possible to toggle CSS content to appear, inline (push text down), on hover, on hover in margin, fixed in margin (may have to push text down in body and/or comments) unless a line/colour could indicate to which it refers). The point being the mechanism should openly permit any one of a number of display patterns.
- Allowing notes to appear in left and right hand margins helps gain more space, but they may still need to be stacked when the notes are greater than the text it annotates. I think this may be unavoidable.
I just want to point out that in my example, I was not calculating sequence numbers; those were part of the data (biblical chapter/verse data). What I was hard-coding—because I found no algorithm for calculating them—were the vertical offsets for placing those sequence numbers approximately adjacent to the related content. “Approximately” is necessary here because it’s quite possible that more than one verse will begin on the same line in the paragraph.
For arbitrary-sized notes, there would be an additional consideration, as @Springer and @TW_Tones have already mentioned, about the size of the notes themselves: whether a long note would push down succeeding main content to appear after the note. Together, these points add up to a lot of complexity in the problem.
That’s certainly an approach I hadn’t considered at all! I can’t think of a way to make it work, but it’s definitely worth some more thought.
I worry more about the opposite side, that of premature generalization. I have to work hard to avoid that one, myself. The rule I try to stick to is that I will do something once, then a second time, and only on the third variant would I try hard to abstract the problem and solution into their commonalities. But I do have three separate problems of my own that I would now like to generalize:
- Cornell Notes
- Bible Verse Numbers
- Side notes in my SQL Playground (which perhaps can be lumped together with Cornell Notes)
And others here and elsewhere have similar needs. So I would absolutely love to see or to jointly develop a general solution for this. I don’t have any great ideas, though, except for extending the Cornell Notes ideas.
Oh, is that what it’s for? I thought it was just a bigger target for food stains.
1 Like
Ha Ha, this demonstrates the value of diverse perspectives, My policy is to invest an additional 10-20% effort on the first case (yes 110% to 130%), so the second only needs 80% of the effort and future cases a fraction of the first two.
- Although I admit this approach may be more important to a person like myself who always try’s to extract concepts not specifics.
- Although you can see my approach is only “cost neutral” if it needs to be done twice, and cost beneficial if used three or more times.
- But I suspect there are other attributes of my character that push me to this different approach
