custom footnotes

colak · 2025-04-10 04:13:09

I’ve been using a custom footnotes setup for some time now, but admittedly I’m finding it a pain to update as I have to insert the footnote in the body of the text rather than the bottom. My efforts to remedy this are not working.

<txp:variable name="txt1"><txp:yield name="txt" escape="" /></txp:variable>
<txp:variable name="no1"><txp:yield name="no" /></txp:variable>

<txp:if_yield name="pos" value="top">&nbsp;<sup class="tooltip">
<a href="#fn<txp:variable name="no1" />" id="foot<txp:variable name="no1" />"><txp:variable name="no1" /></a> 
<span class="tooltiptext noprint" <txp:if_yield name="lang">lang='<txp:yield name="lang" />'</txp:if_yield>><txp:variable name="txt1" /></span></sup></txp:if_yield>

<txp:if_yield name="pos" value="bottom">
<li id="fn<txp:variable name="no1" />"<txp:if_yield name="lang"> lang="<txp:yield name="lang" />"</txp:if_yield>>
<txp:if_yield name="txt"><txp:yield name="txt" escape="" /><txp:else /><txp:variable name='text<txp:variable name="no1" />' /></txp:if_yield><span class="noprint">
&nbsp;<a href="#foot<txp:variable name="no1" />">&#8679;</a></span>
</li>
</txp:if_yield>

The ideal situation would be to have to only insert

<txp::note pos="top" txt id="1" /> on the top, where txt would populate from the bottom yield and <txp::note pos="bottom" txt id="1">Someone. "someting," in _My note_ now</txp::note> at the bottom where txt is enclosed within the tags to avoid issues with all sorts of quotation marks. Any ideas where I’m missing the shortcode concept?

Pat64 · 2025-04-10 07:18:45

Interesting Yiannis. I worked on a footnote model too. ;)

Into your shortcode, you need to distinguish the different #IDs. Try this:

<txp:variable name="txt1"><txp:yield name="txt" escape="" /></txp:variable>
<txp:variable name="no"><txp:yield name="no" /></txp:variable>

<txp:if_yield name="pos" value="top">&nbsp;<sup class="tooltip">
<a href="#fn<txp:variable name="no" />" id="link-fn<txp:variable name="no" />"><txp:variable name="no" /></a> 
<span class="tooltip noprint" <txp:if_yield name="lang">lang='<txp:yield name="lang" />'</txp:if_yield>><txp:variable name="txt1" /></span></sup></txp:if_yield>

<txp:if_yield name="pos" value="bottom">
<li id="fn<txp:variable name="no" />"<txp:if_yield name="lang"> lang="<txp:yield name="lang" />"</txp:if_yield>>
<txp:if_yield name="txt"><txp:yield name="txt" escape="" /><txp:else /><txp:variable name='text<txp:variable name="no" />' /></txp:if_yield><span class="noprint">
&nbsp;<a href="#link-fn<txp:variable name="no" />">&#8679;</a></span>
</li>
</txp:if_yield>

colak · 2025-04-10 15:53:41

That didn’t work, as it only returned the no variable number:(

The ids are distinguished. The top sup id is foot<txp:variable name="nos" /> and the bottom li id is fn<txp:variable name="no" />.

Pat64 · 2025-04-10 18:02:55

However, that seems to work for me…

Within the body text:

Lorem ipsum<txp::note txt="" no="1" pos="top" />...

And, at the bottom of the text:

<txp::note txt="The Footnote Content." no="1" pos="bottom" />

Tested with multiple notes.

jakob · 2025-04-11 02:50:32

Pat64 wrote #339459:

However, that seems to work for me…

Within the body text:

Lorem ipsum<txp::note txt="" no="1" pos="top" />......

And, at the bottom of the text:

<txp::note txt="The Footnote Content." no="1" pos="bottom" />...

Tested with multiple notes.

Maybe I‘m misunderstanding something here but how does this latest variant improve on textile‘s footnotes?

I think Yiannis wants to populate the top instance of the footnote with text written in the bottom instance in the article. Off hand I can’t think of a direct way of doing that within the textile text. Possibly one could post-process the html that gets output on article save using a plugin. I think it would probably be easier to add the notes tooltips after the page is rendered using javascript in the browser. I remember we discussed variants once before.

Pat64 wrote #339453:

I worked on a footnote model too. ;)

I’m intrigued. How did you approach this issue?

Pat64 · 2025-04-11 03:29:37

@Julian.
As I’m reading this sort code, it seems Yiannis want to create a Textile alternative. This isn’t a Textile approch.

colak · 2025-04-11 05:17:40

Hi guys,

I’m not trying to create a textile approach. What I’m trying is to

Write the notes at the bottom, but also enclose them in a shortcode so as to allow textile. ie my example at the begining of this thread: <txp::note pos="bottom" txt id="1">Someone. "someting," in _My note_ now</txp::note>
I would also like the notes to appear on the top on mouse-over, as they do now. www.neme.org/texts/dark-matter but without having to insert them on the top, just the bottom.

jakob · 2025-04-11 06:07:10

Yes, I get that this not using textile‘s own footnotes. I just didn’t understand how Patrick‘s stripped down version improves on it. It seems a lot of code to input to achieve essentially the same result.

I meant that within the body field (set to textile formatting) the top to bottom method you‘ve used up to now works (similarly Oleg’s clever idea in the other thread to build a variable collecting a list of footnotes) because it corresponds to the natural processing flow. Putting your actual footnote text content at the bottom and having it fill the footnote tooltips further up doesn’t. I understand why editing at the bottom would be a better workflow for you.

The only options I can think of right now are:

post-processing your article text on save with a to-be-written plugin.
use javascript to attach a tooltip to your <sup> tags and show the content of the corresponding href (or a data-attribute of the href if you want to show a precis of the footnote) on click / rollover.

At first glance the second option seems easier to me, but maybe someone else has a better idea.

etc · 2025-04-11 07:21:59

Sorry, I’m a bit lost in details, but might altering the processing order help you?

<!-- txt variables are used in shortcodes -->
<txp::note pos="top" id="1" />
<txp::note pos="top" id="2" />
...

<!-- txt variables must be populated in this block -->
<txp:hide[1] process="1">
<txp::note pos="bottom" id="1">Someone. "someting," in _My note_ now</txp::note>
<txp::note pos="bottom" id="2">Someone. "someting," in _My note_ now</txp::note>
</txp:hide>

jakob · 2025-04-11 08:07:26

etc wrote #339465:

Sorry, I’m a bit lost in details, but might altering the processing order help you?

...

Cool, if that works, that would potentially solve it. If it does, I must remember that, a great trick to populate something “up-page” with data you process “down-page”.

colak · 2025-04-11 08:10:15

jakob wrote #339464:

use javascript to attach a tooltip to your <sup> tags and show the content of the corresponding href (or a data-attribute of the href if you want to show a precis of the footnote) on click / rollover.

You might be right!!! Any recommendations?

phiw13 · 2025-04-11 08:51:41

colak wrote #339468:

You might be right!!! Any recommendations?

Is not exactly what you are doing, but I prefer this pattern: showing the full footnote in a sticky block at the bottom of the page, like this: redsails.org/a-prova-do-algodao/ (script is here: redsails.org/static/footnote.js), sample url ‘cause I had that page open. Le Monde diplomatique uses a similar pattern; other open page, Orient XXI, has a sticky block on the side (orientxxi.info/lu-vu-entendu/liban-la-danse-du-combattant-pour-un-passeport,8126) – it is not as nice as it blocks the view.

jakob · 2025-04-12 17:56:39

I had a go at a possible solution for your specific case. Here’s a slightly simplified shortcode:

<txp:if_yield name="pos" value="top" trim>
<sup class="tooltip">
    <a href="#fn<txp:yield name="id" />" id="link-fn<txp:yield name="id" />"><txp:yield name="id" /></a> 
</sup>
</txp:if_yield>

<txp:if_yield name="pos" value="bottom">
<li id="fn<txp:yield name="id" />" class="footnote"<txp:if_yield name="lang"> lang="<txp:yield name="lang" />"</txp:if_yield>>
    <txp:yield escape="" />
    <span class="noprint">
        <a href="#link-fn<txp:yield name="id" />">&#8679;</a>
    </span>
</li>
</txp:if_yield>

with some slight modifications:

using id instead of no as in your desired example.
No need to make a variable of the footnote number, as you can use <txp:yield name="id" /> however often you want.
No txt attribute as you want the text to be the shortcode’s contained text.

You use it like this:

In your text, write this wherever you want to have a note:

<txp::note id="9" pos="top" />

At the bottom, then a series of corresponding footnotes:

<txp::note id="9" pos="bottom">Your footnote text</txp::note>

At the bottom of your page (it must come after your footnotes), add a script block with the following (you can make it more concise by leaving out the comments):

<script>
// Get all footnotes at the end of the page
const footnotes = document.querySelectorAll('li.footnote');

// If any exist, process them
if (footnotes) {
  footnotes.forEach(note => {
    // Clone the note to change its content without affecting the original
    const clonedNote = note.cloneNode(true);

    // Get the last anchor element in the cloned note
    const backLink = clonedNote.querySelector('a:last-of-type');

    // Extract the href attribute from the backlink
    const href = backLink.getAttribute('href');

    // Remove backlink from tooltip text
    backLink.remove();

    // Extract the tooltip text content (without the backlink)
    const tooltipText = clonedNote.textContent;

    // Use the href to find the inline footnote by its id
    const inlineFootnote = document.getElementById(href.replace('#', ''));

    // If the inline footnote exists
    if (inlineFootnote) {
      // Create a new span element
      const span = document.createElement('span');

      // Set the classes and text content of the span
      span.classList.add('tooltiptext', 'noprint');
      span.textContent = tooltipText;

      // Append the span after the inline footnote
      inlineFootnote.after(span);
    }
  });
}
</script>

The comments should explain it. This should equip your inline footnotes with the same tooltip markup you have at present, so your existing CSS should work as you have it.

jakob · 2025-04-12 18:08:12

You could simplify this further. Theoretically you don’t need pos="top" and pos="bottom" as you can use the else case. That way you could do:

<!-- inline -->
<txp::note id="9" />
<!-- bottom -->
<txp::note id="9" details>Your text</txp::note>

Theoretically, you could expand on this if you needed a shortform of the footnote to appear as the tooltip. Maybe something like:

<!-- bottom -->
<txp::note id="9" details tooltip="Your shorter tooltip">Your long footnote</txp::note>

That would translate to:

<li id="fn9" class="footnote" data-tooltip="Your shorter tooltip">Your long footnote</li>

(that’s not implemented in the above code (yet))

Pat64 · 2025-04-13 04:17:35

Based on Julian solution (without the need to prefix the short code call with a <ul> tag):

<txp:if_yield name="details">

	<txp:if_yield name="id" value="1"><ul></txp:if_yield>
	<li id="fn<txp:yield name="id" />" class="footnote"<txp:if_yield name="lang"> lang="<txp:yield name="lang" />"</txp:if_yield>>
	    <txp:yield escape="" />
	    <span class="noprint">
	        <a href="#link-fn<txp:yield name="id" />">&#8679;</a>
	    </span>
	</li>

<txp:else />

	<sup class="tooltip">
	    <a href="#fn<txp:yield name="id" />" id="link-fn<txp:yield name="id" />"><txp:yield name="id" /></a> 
	</sup>

</txp:if_yield>

<txp:if_yield name="final"></ul></txp:if_yield>

Note: this short code use a final attribute in order to add a closing </ul> tag.

My question: is there a way to know the last short code iteration process to add the last wrapping tag </ul> without the need of a special attribute?

Textpattern CMS

Textpattern CMS support forum

#1 2025-04-10 04:13:09