m.images plugin: CSS of figure legend fails in firefox

[mtewes]

Hi @mosra and all,

we (@FKleinebreil and myself) stumbled upon a strange behaviour:
the "legend" (here: photo credit) that follows the caption (here: A Ship) of the figure directive rendered on https://mcss.mosra.cz/plugins/images/#images-figures does not display in Firefox (tested on macOS and ubuntu) but works fine in Chrome and Safari.

Of course we noticed this with our own content rendered with the pelican plugin, the above link is just a minimal example.
We didn't really investigate why this is happening so far. Any ideas?
Thanks for this very nice theme!

[mosra]

Eh wat 😅

This seems to be due to display: table-caption on the <figure> content. And that's done in order to avoid the caption expanding the figure border. See the "A Somewhat Lengthy Caption For A Photo" test at https://mcss.mosra.cz/css/components/test/#figures :

If you disable the display, the above will become a rather ugly

I'm pretty sure this is a new regression in FF, because when I implemented these, I definitely tested on various browsers (do you have an older version of FF to confirm?). The regression seems to be that it renders only the first element that's marked as a table-caption and totally ignores the others. A workaround that seems to do the trick and doesn't break anything in Chrome seems to be wrapping both <figcaption> and <span> in another <span>. But as far as I know, this is not valid HTML5, (however multiple table captions doesn't seem to be valid either):

<figure class="m-figure">
  <img ...>
  <span> <!-- added extra, this is display: table-caption -->
    <figcaption>A Ship</figcaption>
    <span>Photo © ...</span>
  </span>
</figure>

Any thoughts / other ideas? :)

[mtewes]

I've tried with FF 51.0b9 (on mac), from late 2016, getting the same behavior: legends are not shown. Apart from this, all looks good with this old FF.

But thanks for the suggested workaround! I've added the <span> ... </span> in visit_caption and depart_figure of htmlsanity.py, and (for my purpose) this solves the issue: FF now shows the legend.

It's a terrible hack, of course. Way too ugly to be shared...
But just in case someone else needs a quick dirty fix, here are my changes to htmlsanity.py:

def depart_figure(self, node):
        self.body.append('</span>\n')  # Terribly dirty fix!
        self.body.append('</figure>\n')

def visit_caption(self, node):
        self.body.append(self.starttag(node, 'span'))   # Terribly dirty fix!
        self.body.append(self.starttag(node, 'figcaption', ''))

[mosra]

(Sorry for embarrassingly late replies, finally got a chance to get back to this project.)

I managed to find a solution that's still valid HTML, putting the description inside the <figcaption>. It's however still kinda ugly as I need to undo all caption styling for that, but ... better than nothing. The CSS changes are done in b04d3d3 and the plugin is updated in 7b1dae8. Turns out this affected math and graph figures as well,

I hope I didn't forget to handle some corner cases that would break the rendering -- HTML5 doesn't allow any block elements inside <figure> so ideally the image/math/graph figure descriptions should be just simple paragraphs with inline styling and nothing else.