Support » Plugin: Easy Footnotes » MathJax doesn’t work inside footnotes after latest update

  • Resolved Steeven

    (@steeven)


    The Easy Footnotes plugin has worked seamlessly for a long time. I am very happy with its simplicity and elegant appearance on the page.

    Now, I use MathJax on my online-course page (with the Simple Mathjax plugin) which allows math to be typed in Latex-format within Dollar-sign delimitors: $a+b^2$.

    After the latest update, mathjax is not rendered within footnotes. It is rendered on the page, just not in footnotes.

    Have a look in this link from one of the lessons: https://www.allthatmatters.academy/courses/existence/lessons/symbols-equations/. In footnotes a, c and d (below the first image), math is not rendered but the synax is just written out along with the $…$ Dollar signs. But on the page itself, clearly all instances of mathjax are rendered just fine.

    The issue might be because footnotes are created in the DOM after mathjax has been rendered on the page. But that’s just a guess. Is there a fix to this? What was changed in the latest update which may have caused this?

    • This topic was modified 2 months, 2 weeks ago by Steeven.
    • This topic was modified 2 months, 2 weeks ago by Steeven.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Jason Yingling

    (@yingling017)

    Hi there, I imagine this is caused by some data sanitization that was added to meet security best practices. I’ll have to take a look more in depth at the MathJax plugin, but in the meantime you may be able to temporarily resolve the issues by removing the wp_kses_post() function on line 172 of easy-footnotes.php.

    That line would change from

    $footnoteCopy .= '<li class="easy-footnote-single"><span id="easy-footnote-bottom-' .esc_attr( $count ) . '-' . $post_id . '" class="easy-footnote-margin-adjust"></span>' . wp_kses_post( $footnote ) . '<a class="easy-footnote-to-top" href="' . esc_url( '#easy-footnote-' . $count . '-' . $post_id ) . '"></a></li>';

    to

    $footnoteCopy .= '<li class="easy-footnote-single"><span id="easy-footnote-bottom-' .esc_attr( $count ) . '-' . $post_id . '" class="easy-footnote-margin-adjust"></span>' . $footnote . '<a class="easy-footnote-to-top" href="' . esc_url( '#easy-footnote-' . $count . '-' . $post_id ) . '"></a></li>';

    Plugin Author Jason Yingling

    (@yingling017)

    Actually that last message was for the after footnote list.

    The actual footnote hover is displayed in the title attribute on line 128 of easy-footnotes.php

    $footnoteContent = "<span id='easy-footnote-" . esc_attr( $this->footnoteCount ) . '-' . $post_id . "' class='easy-footnote-margin-adjust'></span><span class='easy-footnote'><a href='" . esc_url( $footnoteLink ) . "' title='" . htmlspecialchars( $content, ENT_QUOTES ) . "'><sup>" . esc_html( $this->footnoteCount ) . "</sup></a></span>";

    The htmlspecialchars( $content, ENT_QUOTES ) line has been in there for a couple years so I’m not sure what would have changed.

    Do you happen to know what version of Easy Footnotes you updated from?

    Plugin Author Jason Yingling

    (@yingling017)

    Ok another update. Dug around and it looks using version 1.1 of the Simple MathJax plugin works. I’m not sure what they changed in version 2.0 but something done there seems to be the culprit. You can download the previous version of MathJax through this link at the bottom of the page is a dropdown of versions. https://wordpress.org/plugins/simple-mathjax/advanced/

    Hi @yingling017. Thank you very much for quick reply. I will use the old version of the Simple Mathjax plugin and will ask their support about the change and a fix to it.

    Thank you for your help.

    • This reply was modified 2 months, 2 weeks ago by Steeven.

    Hi again @yingling017. After a talk with the Simple Mathjax support here: https://wordpress.org/support/topic/mathjax-doesnt-work-in-footnotes-with-easy-footnotes-plugin/#post-13408150, I have gotten the issue solved.

    It turns out that the issue stems from a delayed addition to the DOM by the Easy Footnotes plugin. Meaning, the DOM is changed (the footnotes’ contents are added) after mathjax has been rendered on the page, which is automatically done once at page load.

    As per the Simple Mathjax solution, I tried this code snippet:

    jQuery(‘body’).on(‘DOMNodeInserted’, ‘.qtip’, function(){
        MathJax.typesetPromise();
    });

    which didn’t work. The MathJax.typesetPromise() function should be called when the .qtip element is created. But it seems that that .qtip element is already created at first page load, so that is not a fitting hook. Rather, the content to the footnotes might be added later and I haven’t found out which element they are added with, which I can catch with this code snippet.

    Instead, I have solved the issue by simply running the mathjax rendering one more time slightly delayed after page load with this snippet:

    jQuery(window).on('load',function() {
        setTimeout(function(){ 
            MathJax.typesetPromise();
        }, 2000);
    });

    This works but is slightly cumbersome and prolongs the page-load time. If you can think of a better way to catch the added footnote content so that I can rerun the MathJax.typesetPromise();, then please let me know.

    Plugin Author Jason Yingling

    (@yingling017)

    The footnote content is pulled from a title attribute in the <a> element wrapped around the <sup> element for the number. It’s within span.easy-footnote. qtip then remove the title attribute and replaces it with one called oldTitle.

    All of the footnote popup functionality comes from a third-party library called qTip2 https://github.com/qTip2/qTip2.

    It’s actually on the list of updates to remove qTip2 since it’s no longer maintained. And I don’t feel it’s the best for accessibility using the title attribute as it does.

    Here’s some docs on the events available in qTip. And the Easy Footnotes integration of it is found in assets/qtip/jquery.qtipcall.js.

    Rather than set a timeout function you could also do something with jQuery('span.easy-footnote').on('mouseover', function() {} ); to fire the MathJax when a footnote is hovered and render them. Then it doesn’t have a 2 second timeout and gets fired when the user triggers it.

    @yingling017 Perfect, it works just fine. Thank you very much, for your time and help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.