Tufte-like sidenotes: generate random ids

[Anjar]

Hi all!

Some of you may be familiar with Edward Tufte (https://edwardtufte.github.io/tufte-css/), and I think his sidenote approach can be useful in TiddlyWiki as well if one wants to add comments to the contents of a tiddler. I tried to make a simple macro which work fairly well, but to make a new number for each comment, I need to generate a unique ID for it. Is this possible or do I need another approach? For example, I added highlighting on hover which may reduce the need for unique identifiers., but it would still be nice for say printing. 

\define comment(txt)
<span class="comment"><label for="sn-demo"
class="margin-toggle sidenote-number">
</label>
<input type="checkbox"
id="sn-demo"
class="margin-toggle"/><span class ="sidenote">$txt$</span></span>
\end

<style>
.comment:hover .sidenote {
background-color: yellow;
}

input.margin-toggle {
display: none;
}

label.sidenote-number {
display: inline;
}

label.margin-toggle:not(.sidenote-number) {
display: none;
}

.sidenote,
.marginnote {
float: right;
clear: right;
margin-right: -60%;
width: 50%;
margin-top: 0.3rem;
margin-bottom: 0;
font-size: 1.1rem;
line-height: 1.3;
vertical-align: baseline;
position: relative;
}

.sidenote-number {
counter-increment: sidenote-counter;
}

.sidenote-number:after,
.sidenote:before {
font-family: et-book-roman-old-style;
position: relative;
vertical-align: baseline;
}

.sidenote-number:after {
content: counter(sidenote-counter);
font-size: 1rem;
top: -0.5rem;
left: 0.1rem;
}

.sidenote:before {
content: counter(sidenote-counter) " ";
font-size: 1rem;
top: -0.5rem;
}
</style>

This<<comment "or that">> is an<<comment "an before e-">> example<<comment "right?">>

Best,

Anders

[Ste]

Tufte looks interesting!

[Cyrill Andreani]

Hey Anjar,

I second your approach and need on visual context with the text content of the tiddler. Perhaps you will find some ideas in two (nearly) similar projects ?

https://tid.li/tw5/numbers.html

http://cherrypicker.tiddlyspot.com/

Best regards

[TiddlyTweeter]

Ciao Anjar

Tufte is a brilliant information designer. His books are phenomenal & enlightening. He bridges the gap between information crunching for okay results to stellar art-sensibility mediated delivery of visuals that are immediately comprehensible.

I had a look at the code you supplied and the project it comes from.

Both are interesting!

But, overall, it doesn't add much we don't have without Tufte.

I think my point is Tufte is a genius of print media. Online pages I think are different. In particular, (1) TEXT-FLOW works a different way since it has NO fixity per se; (2) the mental models of "side-information" for the web work optimally only if central account is taken of FORM-FACTORS (e.g. screen size & orientation) dynamically.

Just some thoughts

TT

[Anjar]

Thank you all! https://tid.li/tw5/numbers.html showed me that only a few adjustments in the css was needed, so now it works! With the mono theme, the sidebar is on the left, and by adjusting the css for print, we can also have the sidenotes when printing

Best,

Anders

[ceri...@gmail.com]

Anders,

Thanks for the demo. From the demo I cannot see how to add a sidenote to the tiddler.

How would that be done?

Thx

[Anjar]

Hi,

Thanks for showing interest! In the demo, sidenotes are separate tiddlers, and to add them just use the macro <<comment "title_of_tiddler_to_show_on_the_side">>

Best,

Anders

[ceri...@gmail.com]

Anders,

Thanks for the quick reply.

Is there a way to have a button that when pressed would enable the sidenote to be created, at a desired place in the tiddler, without having to

manually edit the tiddler?

Thx

[Anjar]

Hi,

Good question! I think it would be difficult, but I am not very skilled in javascript, so it may be possible. An alternative is installing a plugin that let you double click the tiddler to edit it [1] and replace <$transclude tiddler=$txt$ > with $txt$ in the comment macro. Then you can simply write <<comment "your comment">> and avoid creating a new tiddler for each comment

[1] https://danielorodriguez.com/TW5-2click2edit/

Best,

Anders