I think Joplin is allergic to <figure>/<figcaption>

Trying to find a way of setting up image captions that I like the look of and ran across <figure>/<figcaption>, and in the process of trying to write up the original version of this post with examples of said HTML tags acting weird when exported to HTML/PDF it’s gotten to where I’m not even sure what on earth is going on. This is going to be a bit of a long post because I’m just going to list Joplin code snippets and the insanity that resulted…



This renders as expected inside Joplin, but when exported to HTML/PDF the caption also captions the image/caption combo (nested a second time, but just the text).

Joplin raw:

<figure><img src=":/identifiergibberish"/>
<figcaption><small>caption</small></figcaption></figure>

Relevant bit of code from the exported HTML:

<figure><figure><img src="_resources/identifiergibberish.jpeg"/>
<figcaption><small>caption</small></figcaption></figure>
<figcaption><small>caption</small></figcaption></figure>


Empty image link - Joplin places the caption where the image would be in addition to the actual caption, this carries over to HTML/PDF exports.

Joplin raw:

<figure><img src=""/>
<figcaption><small>caption</small></figcaption></figure>

Relevant HTML is the same as above, just the image source string is blank.



This is were it starts getting weird(er), I tried inserting a line-break between the two code snippets above so I could include a single convenient screen crop…

Joplin raw:

<figure><img src=""/>
<figcaption><small>caption</small></figcaption></figure>
*****
<figure><img src=":/identifiergibberish"/>
<figcaption><small>caption</small></figcaption></figure>

In Joplin this results in:

          caption
     *****
          <broken image link icon>
          caption
     caption
*****
     <image>
     caption

The relevant bit of HTML ends up as:

<figure><figure><img src=""/>
<figcaption><small>caption</small></figcaption></figure>
*****
<figure><img src="_resources/identifiergibberish.jpeg"/>
<figcaption><small>caption</small></figcaption></figure>
<figcaption><small>caption</small></figcaption></figure>
*****
<figure><figure><img src=""/>
<figcaption><small>caption</small></figcaption></figure>
*****
<figure><img src="_resources/identifiergibberish.jpeg"/>
<figcaption><small>caption</small></figcaption></figure>
<figcaption><small>caption</small></figcaption></figure>

In neither case are there any actual line breaks, the asterisks are displayed as asterisks



Joplin version is 1.0.179 on Win7, however all Joplin-internal behavior also occurs in the Android app (Joplin 1.0.316, Android 9.something). If I tripped across some weird sub-category of a known exporting quirk apologies for the clutter, but I figured it was worth posting just in case. For now, I think I may stick to using tables to box in picture/caption combos, for sanity’s sake if nothing else…

PS - For what it’s worth, sticking the third Markdown snippet into Typora and exporting as a style-free HTML got precisely what was expected, without any doubling or recursive shenanigans.

Typora’s HTML:

<figure><img src="">
<figcaption><small>caption</small></figcaption></figure>
<hr />
<figure><img src="image file link">
<figcaption><small>caption</small></figcaption></figure>

Decided I preferred how figure/figcaption looked compared to tables to deal with the extra HTML fuss (doesn’t like MD formatting in the caption, not too surprised) which reminded me I’d posted here, so I figured I’d toss the relevant files up although they don’t really contribute much to what I posted prior other than saving a few steps. figure figcaption demo files.zip (49.6 KB)

This definitely seems like a bug ergo there probably ought to be a bug report somewhere, but I don’t know if this is a Joplin hiccup or the embedded editor’s so I don’t know it ought to be posted…

What’s the issue exactly? Could you post the Markdown you are using, the result (as a screenshot) and what result you expect please? Not too familiar with figcaption, etc. so not sure if it’s a bug or not.

There’s some weird double-calling/nesting of the <figcaption> part of <figure> in how Joplin handles/exports things. I think I included all the Markdown I experimented with in the first post, along with the actual content bits from the various exported HTML files (and the zip file posted above should contain all the relevant files?), but here’s a screenshot of the most dramatic of the scenarios:

Upper left browser window is the webpage exported by Joplin, upper right is the same Markdown code pasted into Typora (with the image link updated accordingly) and exported as plain HTML, and the bottom right is the Joplin window with said code and the in-program rendering thereof.


For normal usage within Joplin, the HTML tags in question at least seem to behave fine (insert quip here about looking gift horses in the mouth) which is why I decided to switch to using them; I don’t expect to ever export anything and if I do either hopefully this peculiarity will be fixed or I can just throw a Notepad++ find-and-replace at it and call it a day. But when you export things get weird, and when you start adding broken/missing images they get weird inside the program and when you add line breaks well… /points up at screenshot