Obsidian Tufte-style Sidenotes
Obsidian Tufte-style Sidenotes
TfT Hacker has a beta of Sidenotes as part of Cornell Notes.
[Update 2023-11-02: Moving over older posts from Medium. This was originally posted 17 July 2023.]
I was contacted by TfT Hacker just recently about a new development in the Cornell Notes Learning Vault, which I wrote about in Using Cornell Notes CSS to ‘Fake’ Tufte-style Sidenotes. So it turns out that TfT Hacker wanted me to test a full implementation of Tufte-style sidenotes built into Cornell Notes. And it works.
A Recap on Sidenotes
The famous designer, Edward Tufte, was a strong advocate of sidenotes: placing material in the right margin that might otherwise be rendered as a conventional footnote — rendered at the bottom of a page or section of a document.
Here’s an example:
I have wanted to use sidenotes in Obsidian for a long time (see Wonkish: Obsidian Footnotes as Sidenotes), and for the same reasons that Tufte adopted them. Sidenotes appear in the context of the material that the refer to, or expand on. Jumping back and forth to footnotes inches or pages away is annoying and inconvenient.
So, when TfT Notes said they had built a working version, I was ecstatic.
How It Works
The implementation involves an additional CSS file — in my case I wanted the sidenotes on the right, so I have to inclde tufte-sidenotes and cornell-right in YAML:
---
cssclass: tufte-sidenotes, cornell-right
---
These CSS files will be available in the Cornell Notes vault quite soon.
I hacked the CSS code to make the right margin wider than the cornell-right baseline. I will leave it to TfT Hacker to write up that trick.
There is an additional step involving a Templater template that runs some javascript whenever a file is opened. I will leave that description of that to TfT Hacker, although it only took me a few minutes to set up and forget about it.
How I Use It
Unlike most people, I have used footnotes for years as a way to annotate my Obsidian notes, so I have many thousands of potentially sidenoted files. Here’s an obsidian doc in markdown that I created this morning:
You can see several markdown footnotes in the text. When I switch to read mode, they appear as sidenotes.
The fact that I have to toggle back and forth between read and edit mode is one barrier to use, but it’s not insurmountable. I have taken advantage of two Obsidian features — command-’click-on-read-icon’ and ‘move to new window’ — to have a pair of windows open side-by-side when I am annotating one of the pair in edit mode and seeing the other in read mode. This is a lot like what we used to do before Obsidian rendered markdown in the edit window.
Since I’ve been using sidenotes, I have basically been in this two-window mode, since I footnote all the time. Note that the paired windows scroll in tandem, so moving up or down in one moves the other, too.
In a perfect world, the sidenotes would appear in edit mode, but that isn’t in the implementation at present.
Here’s another example:
I find that now that I can see my footnotes as sidenotes, I am both using footnotes more deliberately, with their future use as memory aids in mind, and using the first sidenote in a file as a summary.
And of course, it doesn’t always play well with other features, like transclusion. So if I transclude that first line elsewhere, like a daily note, I would see this, with a conventional presentation of the footnote:
But that’s fine, really.
Some Issues
I have found it is possible to ‘confuse’ the sidenotes system. For example, bolding with ** can bork the system, and that paragraph won’t render sidenotes. However, italics don’t seem to do so. In future, I may use <b> to avoid that.
Also, when the sidenoting gets borked, you may need to exit the file and reload it, to get the Templater template to run again.
Sharing Sidenoted Documents
One last observation. I’ve anticipated sidenotes for a long time, and one reason is the possibility of their use in shared documents.
Imagine that I have created a shared remote vault and published it for use with others. Then within any sidenoted document I could do something like this:
^[stoweboyd: this is a comment by Stowe Boyd]
which would indicate that I had written that footnote. Likewise, others could do the same:
It might take some javascript to make the implied notifications work, but TfT Hacker says it could be done.
I will undertake an experiment with shared vaults sometime soon.