pandoc-crossref
pandoc-crossref copied to clipboard
lierdakil
Subfigure labels don't appear next to figures in subfigure grid
When viewed as HTML output the subfigure examples given at https://lierdakil.github.io/pandoc-crossref/#subfigures produce different behavior. For the first example Subfigure (containing {#fig:figureRefA} and {#fig:figureRefB}), the labels a and b appear below the images, as well as in the caption. However, for the fig:coolFig, (with a 3x2 grid of figures) the labels do not appear near the images, and are only printed in the caption.
Is there any way to recover the subfigure labels near the subfigures themselves when using a subfigGrid, so its easy to visually map the caption to the corresponding subfigure?
(Note: the subfigure labels do appear in PDF output, just not in the HTML output)
Did you set the subfigGrid option? It's not on by default. Otherwise, I couldn't reproduce with pandoc 2.19.2, pandoc-crossref v0.3.14.0:
$ cat test.md
<div id="fig:coolFig">
{#fig:cfa width=30%}
{#fig:cfb width=60%}
{#fig:cfc width=10%}
{#fig:cfd}
{#fig:cfe}
{#fig:cff}
Cool figure!
</div>
$ pandoc -t html -F pandoc-crossref -MsubfigGrid test.md
<div id="fig:coolFig" class="subfigures">
<table style="width:100%;">
<colgroup>
<col style="width: 30%" />
<col style="width: 60%" />
<col style="width: 10%" />
</colgroup>
<tbody>
<tr class="odd">
<td style="text-align: center;"><figure>
<img src="coolfiga.png" id="fig:cfa" style="width:100.0%" alt="a" />
<figcaption aria-hidden="true">a</figcaption>
</figure></td>
<td style="text-align: center;"><figure>
<img src="coolfigb.png" id="fig:cfb" style="width:100.0%" alt="b" />
<figcaption aria-hidden="true">b</figcaption>
</figure></td>
<td style="text-align: center;"><figure>
<img src="coolfigb.png" id="fig:cfc" style="width:100.0%" alt="c" />
<figcaption aria-hidden="true">c</figcaption>
</figure></td>
</tr>
<tr class="even">
<td style="text-align: center;"><figure>
<img src="coolfigd.png" id="fig:cfd" style="width:100.0%" alt="d" />
<figcaption aria-hidden="true">d</figcaption>
</figure></td>
<td style="text-align: center;"><figure>
<img src="coolfige.png" id="fig:cfe" style="width:100.0%" alt="e" />
<figcaption aria-hidden="true">e</figcaption>
</figure></td>
<td style="text-align: center;"><figure>
<img src="coolfigf.png" id="fig:cff" style="width:100.0%" alt="f" />
<figcaption aria-hidden="true">f</figcaption>
</figure></td>
</tr>
</tbody>
</table>
<p>Figure 1: Cool figure!. a — caption a, b — caption b, c — caption c,
d — caption d, e — caption e, f — caption f</p>
</div>
Ah, maybe you mean literal captions? That's controlled via templates, see https://lierdakil.github.io/pandoc-crossref/#subfigure-templates. To give a concrete example:
---
subfigureChildTemplate: $$i$$ - $$t$$
subfigureTemplate: $$figureTitle$$ $$i$$$$titleDelim$$ $$t$$
subfigGrid: true
---
<div id="fig:coolFig">
{#fig:cfa width=30%}
{#fig:cfb width=60%}
{#fig:cfc width=10%}
{#fig:cfd}
{#fig:cfe}
{#fig:cff}
Cool figure!
</div>
<div id="fig:coolFig" class="subfigures">
<table style="width:100%;">
<colgroup>
<col style="width: 30%">
<col style="width: 60%">
<col style="width: 10%">
</colgroup>
<tbody>
<tr class="odd">
<td style="text-align: center;">
<figure>
<img src="coolfiga.png" id="fig:cfa" style=
"width:100.0%" alt="a - caption a">
<figcaption aria-hidden="true">
a - caption a
</figcaption>
</figure>
</td>
<td style="text-align: center;">
<figure>
<img src="coolfigb.png" id="fig:cfb" style=
"width:100.0%" alt="b - caption b">
<figcaption aria-hidden="true">
b - caption b
</figcaption>
</figure>
</td>
<td style="text-align: center;">
<figure>
<img src="coolfigb.png" id="fig:cfc" style=
"width:100.0%" alt="c - caption c">
<figcaption aria-hidden="true">
c - caption c
</figcaption>
</figure>
</td>
</tr>
<tr class="even">
<td style="text-align: center;">
<figure>
<img src="coolfigd.png" id="fig:cfd" style=
"width:100.0%" alt="d - caption d">
<figcaption aria-hidden="true">
d - caption d
</figcaption>
</figure>
</td>
<td style="text-align: center;">
<figure>
<img src="coolfige.png" id="fig:cfe" style=
"width:100.0%" alt="e - caption e">
<figcaption aria-hidden="true">
e - caption e
</figcaption>
</figure>
</td>
<td style="text-align: center;">
<figure>
<img src="coolfigf.png" id="fig:cff" style=
"width:100.0%" alt="f - caption f">
<figcaption aria-hidden="true">
f - caption f
</figcaption>
</figure>
</td>
</tr>
</tbody>
</table>
<p>Figure 1: Cool figure!</p>
</div>
Ah, thanks. The subfigGrid option does the trick. It does reduce the size of the graphics quite a bit though compared to subfigGrid: false.
Well, granted, figures have to fit on the page. But you can control relative widths of columns, see https://lierdakil.github.io/pandoc-crossref/#subfigure-grid
Right. I just meant that quite a bit of cell padding gets added when using subfigGrid.
subfigGrid: true
subfigGrid: false
Can the amount of padding be adjusted?
That padding (actually margin) is added by the browser :shrug: You can either include an HTML style block into your document to adjust that, use a custom HTML template with appropriate styles defined, or use --css. One of the easier options is doing something like this in your metadata:
header-includes:
- "`<style>.subfigures figure{margin: 0;}</style>`{=html}"