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>