Live Preview: Add support for inline footnotes

@lab another advantage of inline footnotes is that if you need to excise part of a note and paste it into another note, you don’t have to go scouting to the bottom of the original note to locate the right footnote and risking a excising the wrong footnote.

5 Likes

I’d like to come back to the bug-report of @Chairmander, which is still unresolved for Live-Preview.

Issue: If cm-links are used within footnotes, they are not rendered correctly in Live-Preview. For me this is a big issue since I have many footnotes with Pandoc-Citations inside.

Partial workaround: With css-snippets it is possible to partially work around the issue like this (however, there is no chance to edit the second citation, since it is rendered with the same class as the neighboring text).

Here’s the css-snippet (based on @litotitus 's answer)

/* F O O T N O T E S */

/* beginning and end of footnote */
.cm-inline-footnote-start,
.cm-inline-footnote-end {
    opacity: 0.5;
}

/* styling the footnote */
.cm-inline-footnote-start,
.cm-inline-footnote-end,
.cm-inline-footnote{
    color: #92926d;
    font-size: 75%;
}

/* workaround for Pandoc-references in footnotes */
.cm-formatting.cm-formatting-link.cm-link {
    opacity: 0.5;
}
.cm-link:not(.cm-hmd-barelink) {
    color: #92926d !important;
    font-size: 75%;
}
.cm-inline-footnote.cm-link {
    color: #D08770 !important;
}
1 Like

As others, I note that footnotes do not work as documented when in Live Preview.
(*Just commenting to this thread to add another vote to underscore that this is a meaningful nuisance.)

9 Likes

Should the CSS provided in this post also alter the appearance of Markdown links? Right now, any link in the form of [alias](underlying link) is appearing with the modified size/color/etc. that I would like to have applicable only to inline footnotes.

1 Like

The plugin footnote pop Hover work great on preview (only for desktop). I will love to see something some for footnote. More over, the plugin reference success to create pop-over so i think it can be possible to port this plugin to live preview.

2 Likes

Sorry for the late answer.
You are right @julroger2013: Unfortunately I did not find a work around that doesn’t also affect the markdown links. As suggested, there should be some additional css-classes provided – either by a plugin that does some own syntax-interpretation (I guess, this is what the better footnote is doing?! @Mara-Li), or built-in. The latter, by far, would be the preferred solution.

The reason why I posted the above tweak is that I used it to write an academic paper, where I knew, I’ll only have footnotes and no links. So it helped me a lot to get at least some of the footnote-formatting right. However, for regular Zettelkasten workflow I turn the snippet off – for the precise reason you are describing.

2 Likes

Seconding this!

5 Likes

Yeah this is a big one for me too. I’m using footnotes a lot for full references and it makes reading in live preview pretty hard

6 Likes

Me too! Here’s what it looks like for me:

Untitled

Notice how in Test1, the first “[” is included in the internal link.

When there’s a space before the “^”, it’s no problem (although, even then, it would be nice if the Live Preview mode put the whole line in superscript).

1 Like

I think some of the css in this thread is outdated code-mirror. Here’s whats working for me for basic hiding of footnotes (only showing if line is active).

My only goal is simple hiding of text.

(I haven’t tested links though)

/* F O O T N O T E S */

/* active line */
.cm-inline-footnote-start,
.cm-inline-footnote-end,
.cm-inline-footnote {
    opacity: .8;
    font-size: 80%;
    position: relative;
    top: -4px;}

/* non active line */

div:not(.cm-active) > .cm-inline-footnote-end::after {
    opacity: 0.7;
    content: '⚓';
      font-size: .7rem;
}
div:not(.cm-active) > .cm-inline-footnote {
    font-size: 0;
}
div:not(.cm-active) > .cm-inline-footnote-end {
    font-size: 0;
}

SCR-20230210-ebr

5 Likes

Any update? This is really a wanted feature.

3 Likes

Same here… Having to let that extra space is so annoying.

With a space:

Without a space:

1 Like

I came here looking for a reason that the BetterFootnotes popup plugin isn’t working.

Is there any way that we can better ensure that this feature request gets seen?

5 Likes

+1 for footnotes working in live preview like they do in edit mode :pray:t3:

2 Likes

This is a different take from inline footnotes, but I’d love to have footnotes as sidenotes (read https://gwern.net/sidenote and zoom out if they don’t appear). Meaning, the footnote text still lives at the bottom of the Markdown file as ‘native’ Markdown (if that even exists), but in Live Preview you can open a sidebar pane which shows the very same footnote text in boxes aligned to the right of the footnote that references them above. Imagine something similar to Google Docs comments.

They should be editable and addable within the side pane as well, again like Google Docs comments, and have a link that jumps you down to the bottom of the doc where the footnote technically lives in the Markdown file (so compatibility with other programs) yet be displayed and normally written/read in-context while perusing your notes file. Maybe the best of both worlds?

I actually tried to start making a plugin for this but got caught up in the sidebar scrolling and rendering sidenotes to match the scroll position of the main doc.

3 Likes

@ryanwwest neat idea :+1:

Have you considered, rather than a sidebar pane with matched scrolling, you could instead float or position the boxes out to the side with CSS? Then they will automatically scroll with the text.

Here’s a very quick test:

And this is the applicable markdown:

Examining how the app navigates this tension can help us understand what might come next in Signal’s new quest to reach “everyone on the planet.”

<div style="position:absolute;right: 60px;width:140px;border:2px solid #888;padding:10px;">Here is the content for a sidenote. Seems to work as a float to the right.</div>Released after WhatsApp set the standards for messaging, Signal’s problem has always been how to keep up with its competition—a fine dance between mimicry (so as to seem familiar to new users) and innovation (to poach users from its competitors).

@AlanG I like the float style you bring up and someone actually made a similar version here: Obsidian Tufte-style Sidenotes. TfT Hacker has a beta of Sidenotes as… | by Stowe Boyd | Workings | Medium.

I’d be fine with this if it worked, but it seems like making those clickable and editable might be more difficult than making sidebar sidenote text editable (but then you have the scroll sync problem). Also, the sidebar can be moved from left to right and resized or hidden, which might be friendlier in smaller viewports. Either option is fine, it comes down to what’s easier to implement. I think editing and creating footnotes from the side like Google Docs is critical for maintaining current-screen context so that more people actually want to use them.

I’d have a look for how they do it for the existing Callouts feature. That seems like it might be a similar method you could copy.

1 Like

My version is very similar, but a few slight differences. The .cm-inline-footnote-start class seems to always have the .cm-inline-footnote as well, so I only modify .cm-inline-footnote, .cm-inline-footnote-end and .cm-inline-footnote-end::after

.cm-active > span.cm-inline-footnote,
.cm-active > span.cm-inline-footnote-end {
    font-size: 0.75rem;
    vertical-align: super;
    color: cadetblue;
}

div:not(.cm-active) > span.cm-inline-footnote {
    display:none;
}
div:not(.cm-active) > span.cm-inline-footnote-end {
    visibility: hidden;
}

div:not(.cm-active) > span.cm-inline-footnote-end::after {
    visibility: visible;
    display: inline-block;
    opacity: .5;

    content: '📑';

    font-size: 0.5rem;
    vertical-align: super;
    
    transform: translateX(-.6rem) translateY(-.2rem);
}

not sure why, but I didn’t want to set font-size to zero, so I’m setting display to none for everything but the end. I use visibility on the end because whatever display .cm-inline-footnote-end has, .cm-inline-footnote-end::after will also have (even if I change it within .cm-inline-footnote-end::after)

The only other difference is aesthetic (changing the icon, shifting it slightly so that it looks more foonote-y, and giving the active line “footnote” a different color to make it easier to differentiate between the rest of the text.

I have noticed, as well, that a space is required between the last character before the footnote and the carrot (^). If I omit this, then the whole thing is given the class of cm-hmd-barelink instead.

Next iteration, I wonder if it’d be possible replace the footnote with the note icon and when hovered, display the footnote text as a popup tooltip. (no idea how feasible this is, since I’m a more than a bit of a css noob.