Footnotes as Sidenotes

Help
#2

God i want that so much. Is what i always did, still do when i use Notion and what i miss most about OneNote.

Some hackways of achieving something close to it would be tables or a fold (bullet point or headings, with the settings set to fold then), but wouldnt be the same. A 2 collum table can work but it would squeeze both contents (and would require part of the main text to be inside of the table). Making a bullet point for folding you could write the sidenote bellow it, and it would be hideable (folding the bullet point).

+1 for a snippet that helps with that, or a theme, anything

#3

I was more thinking about using the footnotes as sidenotes because it makes to me more sense to see them right were they got referenced then at the bottom of a long document.

1 Like
#4

+1 for this, that would be incredible!

#5

I would also love this.

#6

That would be great! But no idea how to do it…

1 Like
#7

I found a great article on Gwern Branwen’s Website on different ways to implement sidenotes. This might be some help for tinkering.

2 Likes
#8

Looks interesting I’ll have a look at it.

#9

I have shared this css snippet that may help you achieve what you want though it doesn’t make use of footnotes.

#10

This is amazing but it is not working right now. Is there any chance that anyone can bring a functional css for this?

#11

Something like this?

#12

I got to an elegant snippet solution I really love (works only in live preview) that reformats both comments (the markdown syntax being %% on either side) and inline footnotes (written as so: ^[your footnote here]) into side comments in the right margin. I prefer using this with the inline footnote syntax instead of comments. & of course feel free to change the colors to your preference. See below:

.cm-comment-start,
.cm-comment-end,
.cm-inline-footnote-start,
.cm-inline-footnote-end {
  color:transparent!important;
  font-size:.1em;
  letter-spacing:-1em;
}

.cm-comment-end::after,
.cm-inline-footnote-end::after {
  content: "  💬   ";
  font-size:16px;
  text-shadow: 0 0 0 #609486;
  position:relative;
  bottom:3px;
}

.cm-comment:not(.cm-comment-end):not(.cm-comment-start),
.cm-inline-footnote:not(.cm-inline-footnote-end):not(.cm-inline-footnote-start) {
  position:relative;
  z-index:100!important;
  display:block;
  margin-left:10px;
  margin-right:-265px;
  margin-top:-25px;
  float:right;
  width:250px;
  font-size:.75em;
  padding:10px;
  border: 1px solid black;
  box-shadow: 5px 8px #609486;
  color: black;
  background:white;
}

/* The following is optional to keep comments & inline footnotes syntax editable inline */

/*
.cm-active .cm-comment-start,
.cm-active .cm-comment-end,
.cm-active .cm-inline-footnote-start,
.cm-active .cm-inline-footnote-end {
  color:var(--text-faint)!important;
  font-size:1em;
  letter-spacing:initial;
}

.cm-active .cm-comment-end::after,
.cm-active .cm-inline-footnote-end::after {
  display:none;
}

*/
5 Likes
#13

This is fantastic!

I’m still noobish on CSS n’ snippets, though…

Can you elaborate on the variables that might be tweaked? (I know… That’s basically “teach me how to internet… plez…”)

Maybe addressing my use case(s)?

Would like to be able to utilize [[ ]]-type links from within the %%comment and ^[footnote] but my tweaks to what seems tweakable in the snippet ain’t working.

I just get loops of shaded boxes with one [ or some such.

Live Preview:

image
image2046×1395 116 KB

and

Source Mode:

image
image2046×1412 117 KB

and

Reading:

image
image2021×1546 102 KB

Using Blue Topaz Theme w/o any active snippets except this one.

#14

Have also been toying with sub-/super-scripts as another inline, ‘linkable’ annotation within the text. Idea is to just have sub/sup display smaller, offset, inline comments/footnotes.

Example Snippets: (from a rabbit trail leading back to Gwern’s website and discussion of Tufte CSS and sidenotes, as implemented there: https://www.gwern.net/Sidenotes#)

sub, sup {
  /* Specified in % so that the sup/sup is the
     right size relative to the surrounding text */
  font-size: 75%;

  /* Zero out the line-height so that it doesn't
     interfere with the positioning that follows */
  line-height: 0;

  /* Where the magic happens: makes all browsers position
     the sup/sup properly, relative to the surrounding text */
  position: relative;

  /* Note that if you're using Eric Meyer's reset.css, this
     is already set and you can remove this rule */
  vertical-align: baseline;
    
  /* Prevent sup and sub from rendering text-decoration */
  display: inline-block;
}

<style>

  sup {
  /* Move the superscripted text up */
  top: -0.7em;
  color: #eee;
}

sub {
  /* Move the subscripted text down, but only
     half as far down as the superscript moved up */
  bottom: -0.5em;
}

and this one, which was an attempt to inline a sup directly over a sub:

<style>
.supsub {
    display: inline-block;
}

.supsub sup,
.supsub sub {
    position: relative;
    display: inline;
    font-size: .5em;
    line-height: 1.2;
}

.supsub sub {
    top: .3em;
}
</style>

Edit Source:

image
image2200×1616 163 KB

Edit Live Preview:

image
image2199×1610 138 KB

Reading: (the purtiest, would like Live Preview to show as this does, but sub/sup doesn’t seem to be Previewable…)

image
image2167×1636 124 KB

Works relatively well, but would be great if we had a native/add-on function that allowed for inline annotation and disambiguation which also made use of the graphing functionality within Obsidian.

A la:

#15

I’ve found that this snippet workaround doesn’t work with any syntax inside the comment or inline footnote! Aka you can only have plain, unformatted text as a comment — no italic, bold, wikilinks, external links, highlight, etc.

1 Like
#16

Got it, thanks!

1 Like
#17

Thanks for sharing this solution. It works great for leaving notes/reminders/ideas to myself while drafting. I changed the colors for a more subdued look, going in light and dark mode. I switch back and forth. I think a cool comments plugin could be made to flesh out this functionality. A toggle to show/hide comments for a document would be cool. This could switch css snippets from regular to display none. Maybe I could use the snippet manager plugin to do that. Seems clunky, but just thinking out loud. Another nice thing about this solution is that the comment box dims when using focus mode. I like the typewriter scroll plugin, with it’s separate focus mode toggle.

I recreated the document navigator panel I loved in Writemonkey by using query blocks. You can get a list of all the comments in a list form. My file Has three ways of navigating, overkill, but can be useful.

file: "Outline" ##

file: "Outline" %%

file: "Outline" ^

Screenshot_2022-04-27_22-31-30
Screenshot_2022-04-27_22-31-301403×821 125 KB

Screenshot_2022-04-27_22-31-48
Screenshot_2022-04-27_22-31-481379×822 115 KB

Screenshot_2022-04-27_23-04-14
Screenshot_2022-04-27_23-04-14782×1076 39.6 KB 

.cm-comment-end::after,
.cm-inline-footnote-end::after {
  content: "  🗨️  ";
  font-size:20px;
  text-shadow: 0 0 0 var(--interactive-accent);
  position:relative;
  bottom:3px;
  opacity: 80%;
}

.cm-comment:not(.cm-comment-end):not(.cm-comment-start),
.cm-inline-footnote:not(.cm-inline-footnote-end):not(.cm-inline-footnote-start) {
  position:relative;
  z-index:100!important;
  display:block;
  margin-left:20px;
  margin-right:-255px;
  margin-top:-25px;
  float:right;
  width:210px;
  font-size:.70em;
  padding:10px;
  border: 1px solid #36454F;
  box-shadow: 3px 3px var(--interactive-accent);
  opacity: 80%;
  color: var(--text-muted);
  background: var(--background-secondary);
}
2 Likes
#18

I had to tweak the CSS right-margin to 60px to work in Minimal theme with Sliding Panes (Andy’s Mode). But it works with that one tweak.

1 Like
#19

I’m so happy and proud people are finding this useful! Also @TRU your solutions here are so elegant. I’m wondering what font you’re using??

1 Like
#20

Thanks again for sharing your css. I like how this creates a comment system that is non intrusive.

I’m using Duo.

Some hack css, but I am hiding the comment box for non active lines in focus mode with the comment icon still showing. So I am hiding the element, but showing the ‘after’ part. You can’t use display none. That is why I had to use a hackish work around.

This could be cleaned up, and maybe there is a better way to do it, but I got it working. Now when I toggle zen mode, the comments disappear. Also works in dark mode. I took a little css from the typewriter zen focus css and used it in your css snippet.

Screenshot_2022-04-30_14-15-24
Screenshot_2022-04-30_14-15-241330×623 83.7 KB

Screenshot_2022-04-30_14-15-42
Screenshot_2022-04-30_14-15-421316×601 69.3 KB 

/* Trying to hide in focus mode */


body.plugin-cm-typewriter-scroll-zen .cm-editor.cm-focused .cm-line:not(.cm-active) .cm-comment-end::after, {
  opacity: var(--zen-opacity);
	}


body.plugin-cm-typewriter-scroll-zen .CodeMirror-lines:not(.selecting) .CodeMirror-code > :not(.CodeMirror-activeline) .cm-comment {
    font-size: 0px;
  border: 0px solid #36454F;
  box-shadow: 3px 3px rgba(0, 0, 0, 0);
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0);
}
body.plugin-cm-typewriter-scroll-zen .cm-editor.cm-focused .cm-line:not(.cm-active) .cm-comment {
  font-size: 0px;
  border: 0px solid #36454F;
  box-shadow: 3px 3px rgba(0, 0, 0, 0);
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0);
}
4 Likes
#21

This css sidenotes solution is really useful and impressive, but the biggest problem is what you had mentioned… It can only work with plain text without any extra syntax. I am glad to know if there is any solution to solve this problem.

2 Likes