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

[Scott_Sauyet]

@Springer

@Scott_Sauyet

A hard-coded version for one passage shows what I would like to do.

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 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.

[Springer]

@Ste_W

Thanks to TPT (translucent paper technology) you can now store twice as much data using by using both sides…

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.

[Springer]

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…

[Scott_Sauyet]

@Springer

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.

[TW_Tones]

@Springer

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 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.

[Scott_Sauyet]

@TW_Tones

@Springer

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 have seen a way to avoid hard coding.

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.

@TW_Tones

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)

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.

@TW_Tones

I think when investigating problems, that are hard to solve, be careful not to target a too specific a need.

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.

@Ste_W

Thanks to TPT (translucent paper technology) you can now store twice as much data using by using both sides…

Oh, is that what it’s for? I thought it was just a bigger target for food stains.

[TW_Tones]

@Scott_Sauyet

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.

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

[Scott_Sauyet]

@TW_Tones

Ha Ha, this demonstrates the value of diverse perspectives,

Absolutely!

@TW_Tones

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.

I do try not to be stupid about it. If an abstraction costs very little I will make it.

But I generally find that if I try to abstract something based only on my first example, I make too many wrong assumptions, and end up wasting time overall as I try to undo the knots I’ve tied myself into.

[Springer]

@Scott_Sauyet

But I generally find that if I try to abstract something based only on my first example, I make too many wrong assumptions, and end up wasting time overall as I try to undo the knots I’ve tied myself into.

I find that when I start orienting to the larger problem upon my first encounter with a niggly problem that could recur, I end up — as I’ve learned recently to say — spending most of my time shaving yaks.

[Scott_Sauyet]

@Springer

I end up — as I’ve learned recently to say — spending most of my time shaving yaks.

Careful of your vocabulary, @Springer, or we’ll end up making a full-fledged coder out of you.

And you’ll never be invited to the cool parties again!

[TiddlyTitch]

@Springer

I end up spending most of my time shaving yaks.

SHAVING YAKS (endless)

use your very own mini-Burrough’s machine to find variants like…

SHAVING SEALS (ended before the start)
SHAVING ANTELOPE (I’m fast)
SHAVING RUSTON (something NOT allowed)

Side comment
TT

---

cc: @jeremyruston

[TiddlyTitch]

@well-noted

allows one to easily add notes and figures as they’re reading

https://tufte-style.tiddlyhost.com

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

[TiddlyTitch]

@well-noted

add notes and figures as they’re reading

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 …

Maybe CSS can be used to contain that image?

TT

[EricShulman]

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

[TiddlyTitch]

@Scott_Sauyet

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.

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

[pmario]

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?

[TiddlyTitch]

@pmario

Do you have a testcase?

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

[well-noted]

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

[well-noted]

(post deleted by author)

[pmario]

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