Help Wanted! Testing Better Markdown Footnotes

By on   4 comments 1,100 words, read ~307 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 footnote1.

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 HTML2.

And they cope with Markdown3.

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

They don't choke on entities5.

And plain quote marks are fine6.

Nested elements should work7.

Very long footnotes are truncated8.

Fully multilingual9.

Also Emoji10 compatible.

Although some may be split if they use ZWJ11.

Every Element

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

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

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

  • <address>14

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

  • <article>16

  • <aside>17

  • <audio>18

  • <b>19

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

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

  • <blockquote>22

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

  • <button>24

  • <cite>25

  • <code>26

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

  • <del>28

  • <details><summary>29

  • <dfn>30

  • <dialog>31

  • <div>32

  • <dl><dt><dd>33

  • <em>34

  • <fieldset><legend>35

  • <figure><figcaption>36

  • <footer>37

  • <form>38

  • <h1>39

  • <header>40

  • <hgroup>41

  • <i>42

  • <img>4

  • <ins>43 datetime isn't shown.

  • <kbd>44

  • <label>45

  • <mark>46

  • <menu><li>47

  • <meter>48

  • <nav>49

  • <ol><li>50

  • <optgroup>51

  • <option>52

  • <output>53

  • <p>54

  • <picture><source>55

  • <pre>56

  • <progress>57

  • <q>58

  • <ruby><rp><rt>59

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

  • <samp>61

  • <section>62

  • <select>63

  • <small>64

  • <span>65

  • <strong>66

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

  • <sup>68 Neither is superscript

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

  • <textarea>70

  • <time>71 datetime isn't displayed

  • <u>72

  • <ul>73 If there is no space between the elements, the tooltip may look odd. Here, the HTML is <ul><li>Cats</li><li>Dogs</li><li>Sheep</li></ul>

  • <var>74

  • <video>75

  • <wbr>76

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

  14. Click to go Left


  15. Text inside an article.

  17. This is bold text 
  18. الرجل القوي إيان: 4th place 
  19. This text will go right to left. 
  20. This text is in a blockquote.

  21. This
    new line. Which is nice
    isn't it? 
  23. More information can be found in [ISO-0000] 
  24. The push() method adds one or more elements to the end of an array and returns the new length of the array. 
  25. High Score 
  26. There is nothing 
  27. Details

    Something small enough to escape casual notice.


  28. 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. 
  29. Greetings, one and all! 
  30. Everyone loves a div

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

  32. Get out of bed now
  33. Choose your favorite monster

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


  35. Do Headers Work?

  36. Cute Puppies Express!

  37. Frankenstein

    Or: The Modern Prometheus

  38. I thought This can't be real! 
  39. “A wizard is never late…” 
  40. Please press Ctrl + Shift + R to re-render a page. 
  42. Several species of salamander inhabit the temperate rainforest of the Pacific Northwest. 

  44. at 50/100 
    1. Buy ingredients
    2. Make cake
    3. Eat cake

  47. This is the output 
  48. A paragraph of text. 
  49. A cool surfer dude.  
  50. Preformated text

  51. 70% 
  52. When Dave asks HAL to open the pod bay door, HAL answers: I'm sorry, Dave. I'm afraid I can't do that.

  53. (kan)
  54. This is struck 
  55. Keyboard not found
    Press F1 to continue
  56. This is a section.

  58. Some very small text. 
  59. This text is spanned 
  60. This is super strong 
  61. H2
  62. E=mc2 
  63. The table header
    The table bodywith two columns
    A demo table

  65. The concert starts at  
  66. You could use this element to highlight speling mistakes 
    • Cats
    • Dogs
    • Sheep

  67. The volume of a box is l × w × h, where l represents the length, w the width and h the height of the box. 
  69. Fernstraßenbauprivatfinanzierungsgesetz 

Share this post on…

4 thoughts on “Help Wanted! Testing Better Markdown Footnotes

  1. @Edent it would be really interesting to get them standardised somewhere, perhaps CommonMark. I’ve used several markdown engines over the years and none agreed on the finer points for footnotes (if they supported them at all)

    1. @edent says:

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


What are your reckons?

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