Photo of Terence Eden. He has a beard and is smiling.

Help Wanted! Testing Better Markdown Footnotes

· 4 comments · 1,000 words · read ~319 times.

I've been thinking a lot about footnotes in Markdown. I've contributed a patch to make them slightly better in WordPress. Now I'm wondering how to make them more useful by enhancing their pop-up title text.

To that end, I'm writing a patch for PHP Markdown which will display the first ~200 characters of a footnote in the pop-up title text. Hover over the superscript number and you'll get a preview of the footnote0.

Dealing with all sorts of weird HTML & Markdown edge-cases is tricky. So, if you'd like to help, please contribute to this discussion. And if you spot any bugs, please let me know.

The test... Begins!

These footnotes support HTML1.

And they cope with Markdown2.

Footnotes with an image3 have the img replaced with its alt text.

They don't choke on entities4.

And plain quote marks are fine5.

Nested elements should work6.

Very long footnotes are truncated7.

Fully multilingual8.

Also Emoji9 compatible.

Although some may be split if they use ZWJ10.

Every Element

These are the HTML elements which display textual content - and some notes on where unusual things might happen.

  • <a>11 works, but doesn't show the destination of the link.

  • <abbr>12 The title text doesn't show.

  • <address>13

  • <area> / <map>14 alt text shows.

  • <article>15

  • <aside>16

  • <audio>17

  • <b>18

  • <bdi>19 The BDI algorithm isn't implemented.

  • <bdo>20 The override isn't implemented.

  • <blockquote>21

  • <br>22 changed to newlines - which works.

  • <button>23

  • <cite>24

  • <code>25

  • <data>26 Doesn't show the value.

  • <del>27

  • <details><summary>28

  • <dfn>29

  • <dialog>30

  • <div>31

  • <dl><dt><dd>32

  • <em>33

  • <fieldset><legend>34

  • <figure><figcaption>35

  • <footer>36

  • <form>37

  • <h1>38

  • <header>39

  • <hgroup>40

  • <i>41

  • <img>3

  • <ins>42 datetime isn't shown.

  • <kbd>43

  • <label>44

  • <mark>45

  • <menu><li>46

  • <meter>47

  • <nav>48

  • <ol><li>49

  • <optgroup>50

  • <option>51

  • <output>52

  • <p>53

  • <picture><source>54

  • <pre>55

  • <progress>56

  • <q>57

  • <ruby><rp><rt>58

  • <s>59 It isn't possible to show a strikethrough in a tooltip.

  • <samp>60

  • <section>61

  • <select>62

  • <small>63

  • <span>64

  • <strong>65

  • <sub>66 Subscript formatting isn't available in title text

  • <sup>67 Neither is superscript

  • <table><thead><tr><th><tbody><td><tfoot><caption><colgroup><col>68

  • <textarea>69

  • <time>70 datetime isn't displayed

  • <u>71

  • <ul>72 If there is no space between the elements, the tooltip may look odd. Here, the HTML is

  • Cats
  • Dogs
  • Sheep

Get involved

If you'd like to peruse my code or offer a suggestion, take a look at this GitHub issue.

  1. You should be able to read this text in a pop-up. ↩︎

  2. Using HTML and nested elements ↩︎

  3. Some Markdown emphasis and a link exciting! ↩︎

  4. This is snuggle. Photo of a cute kitten. Everyone wants to be a cat. ↩︎ ↩︎

  5. Entity support & or & < or < £ and £. ↩︎

  6. " ↩︎

  7. This is nested in multiple elements ↩︎

  8. Sensors indicate no shuttle or other ships in this sector. According to coordinates, we have travelled 7,000 light years and are located near the system J-25. Tractor beam released, sir. Force field maintaining our hull integrity. Damage report? Sections 27, 28 and 29 on decks four, five and six destroyed. Without our shields, at this range it is probable a photon detonation could destroy the Enterprise. ↩︎

  9. 两位皇子，你们各拥党羽，雄心勃勃地争取国柄和皇座，我们现在代表民众告诉你们：罗马人民已经众口一辞，公举素有忠诚之名的安德洛尼克斯作为统治罗马的君王，因为他曾经为罗马立下许多丰功伟绩，在今日的邦城之内，没有一个比他更高贵的男子，更英勇的战士。他这次奉着元老院的召唤，从征讨野蛮的哥特人的辛苦的战役中回国；凭着他们父子使敌人破胆的声威，已经镇伏了一个强悍善战的民族。自从他为了罗马的光荣开始出征、用武力膺惩我们敌人的骄傲以来，已经费了十年的时间；他曾经五次流着血护送他的战死疆场的英勇的儿子们的灵榇回到罗马来；现在这位善良的安德洛尼克斯，雄名远播的泰特斯，终于满载着光荣的战利品，旌旗招展，奏凯班师了。凭着你们所希望克绳遗武的先皇陛下的名义，凭着你们在表面上尊崇的议会的权力，让我们请求你们各自退下，解散你们的随从，用和平而谦卑的态度，根据你们本身的才德，提出你们合法的要求。 ↩︎

  10. 🥰 ↩︎

  11. 👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲👨‍🦲 ↩︎

  12. links This is a link to a website ↩︎

  13. What about abbr? ↩︎

  14. My email is:
    me@example.com

    ↩︎

  15. Click to go Left  ↩︎

  16. Text inside an article.

    ↩︎

  17. ↩︎

  18.  ↩︎

  19. This is bold text ↩︎

  20. الرجل القوي إيان: 4th place ↩︎

  21. This text will go right to left. ↩︎

  22. This text is in a blockquote.

    ↩︎

  23. This
    is
    on
    a
    new line. Which is nice
    isn't it? ↩︎

  24.  ↩︎

  25. More information can be found in [ISO-0000] ↩︎

  26. The push() method adds one or more elements to the end of an array and returns the new length of the array. ↩︎

  27. High Score ↩︎

  28. There is nothing ↩︎

  29. Details Something small enough to escape casual notice.

    ↩︎

  30. The HST is among the most productive scientific instruments ever constructed. It has been in orbit for over 20 years, scanning the sky and returning data and photographs of unprecedented quality and detail. ↩︎

  31. Greetings, one and all!  ↩︎
  32. Everyone loves a div

    ↩︎

  33. Beast of Bodmin
    A large feline inhabiting Bodmin Moor.
    Morgawr
    A sea serpent.
    Owlman
    A giant owl-like creature.

    ↩︎

  34. Get out of bed now! ↩︎

  35. Choose your favorite monster

    ↩︎

  36. Photo of a kitten.
    This is my favourite cat.

    ↩︎

  37. I'm not sure this would ever be in a footnote!

    ↩︎

  38. ↩︎

  39. Do Headers Work?

    ↩︎

  40. Cute Puppies Express!

    ↩︎

  41. Frankenstein

    Or: The Modern Prometheus

    ↩︎

  42. I thought This can't be real! ↩︎

  43. “A wizard is never late…” ↩︎

  44. Please press Ctrl + Shift + R to re-render a page. ↩︎

  45.  ↩︎

  46. Several species of salamander inhabit the temperate rainforest of the Pacific Northwest. ↩︎

     ↩︎

  48. at 50/100 ↩︎

  49. ↩︎

    1. Buy ingredients
    2. Make cake
    3. Eat cake

    ↩︎

  51.  ↩︎

  52.  ↩︎

  53. This is the output ↩︎

  54. A paragraph of text. ↩︎

  55. A cool surfer dude.  ↩︎

  56. Preformated text

    ↩︎

  57. 70% ↩︎

  58. When Dave asks HAL to open the pod bay door, HAL answers: I'm sorry, Dave. I'm afraid I can't do that.< ↩︎

  59. 漢 (kan) 字 (ji)  ↩︎

  60. This is struck ↩︎

  61. Keyboard not found
    Press F1 to continue     ↩︎

  62. This is a section.

    ↩︎

  63.  ↩︎

  64. Some very small text. ↩︎

  65. This text is spanned ↩︎

  66. This is super strong ↩︎

  67. H20 ↩︎

  68. E=mc2 ↩︎

  69. The table header
    The table body with two columns
    Footer
    A demo table

    ↩︎

  70.  ↩︎

  71. The concert starts at  ↩︎

  72. You could use this element to highlight speling mistakes ↩︎

    • Cats
    • Dogs
    • Sheep

    ↩︎

  74. The volume of a box is l × w × h, where l represents the length, w the width and h the height of the box. ↩︎

  75.  ↩︎

  76. Fernstraßenbauprivatfinanzierungsgesetz ↩︎

Share this post on…

  • Mastodon
  • Facebook
  • LinkedIn
  • BlueSky
  • Threads
  • Reddit
  • HackerNews
  • Lobsters
  • WhatsApp
  • Telegram

4 thoughts on “Help Wanted! Testing Better Markdown Footnotes”

    1. @edent says:

      Thanks - looks like WordPress adding some extra <p> elements. All sorted now.
      Reply

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.

Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">