Using Cornell Notes CSS to ‘Fake’ Tufte-style Sidenotes

It almost works, but has a few critical flaws.

Jul 2, 2023

[Update 2023-11-02: Cornell Notes now works for Tufte sidenotes. I am in the process of moving old posts from Medium to Substack. This was originally published 2 July 2023.]

I learned about the Cornell Notes Obsidian implementation by TfTHacker, and since it offered a way (in principle) to place annotations in a right sidebar, I immediately wondered if I could use it to implement Edward Tufte-style sidenotes. (I’ve written about that dream in Wonkish: Obsidian Footnotes As Sidenotes).

Here’s an image of sidenotes, where footnotes in the text are rendered in the right sidebar of the text, not at the end of the file:

The Cornell Notes CSS code is not based on footnotes to achieve the side noting. Instead, it relies on Obsidian callouts and front matter.

Here’s a file using the CSS in read mode. The text in the right margin, and you can see that it looks like Tufter Side Notes, except none of the footnotes numbering.

Here’s the file in source mode, so you can see the ugly underneath:

First of all, the cssclass: cornell-right sets up rendering as a right sidebar Cornell Note.

I am not using the cssclass: cornell-livepreview which makes editing nearly impossible.

The line that starts this is how I 'fake' Tufte shows where things become ugly. First, cue callouts have to start on the first character of a line with >[!cue] and then whatever callout text. Out of the box, the Cornell Notes CSS made callouts bold and big. I hacked the CSS to make them small and unbolded (I found this code online re: something else):

.callout[data-callout=”note-blue”] .callout-title-inner { color: black; font-size: 10px; font-weight: normal; }

I also hacked the margins, which were too small for my use:

:root { /* Column widths used by cues */ — cornell-cue-column-width: 200px; — cornell-cue-column-width-readable-line: 200px;

/* originally 150 */

/* Cue callout */ — cornell-cue-callout-width: 240px; — cornell-cue-callout-width-readable-line: 220px;

But the biggest problem is the cue precedes the paragraph that it annotates. Which is the opposite of how I think of footnotes.

And it is problematic to have more than one cue associated with a single paragraph: they can overlap each other in the sidebar. So if you want two sidenotes on a paragraph, it’s best to put them in a single cue preceding the paragraph. There’s a lot of manual adjustment using `<br>` in the cues, as you can see.

I tried a version with ‘faked’ footnotes numbering, but it was a lot of work for no real benefit.

And finally, if you try to export a PDF, the rendering in a margin doesn’t work. So you’ll have to export via screen capture.

Finally, it’s too much manual fiddling compared to just using inline footnotes, like this:

The footnotes are colored green, so they standout in edit mode, which is where I usually live. In read mode, they fall to the bottom, but I would like them to move to the right margin in that case. And they render in PDF in a sensible way.

In the final analysis, using callouts is a non-starter for Tufte-style Sidenotes. That’s not what Cornell Notes are for, I know, but it’s too bad they didn’t start with footnotes, instead.