Unexpected behaviors in marginal figures with subfigures

[homerhanumat]

Bug description

When attempting to make a figure with sub-figures appear in the margin, the caption for the entire figure appears in the main column, and if one formats with layout-ncol the figure shows up in the main column, lying over subsequent content.

Steps to reproduce

Reproduced with source code here.

Expected behavior

Figures and their captions should appear in the margin.

Actual behavior

The caption for the entire figure appears in the main column, and if one formats with layout-ncol the figure shows up in the main column, lying over subsequent content.

Your environment

• OS: Macos Seqoia 15.2
• IDE: RStudio 2024.12.0+467

Quarto check output

Quarto 1.7.9
[✓] Checking environment information...
      Quarto cache location: /Users/homer/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.4.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.46.3: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.7.9
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /Library/TeX/texbin
      Version: 2024

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.9.6
      Path: /Library/Developer/CommandLineTools/usr/bin/python3
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking R installation...........OK
      Version: 4.4.2
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Library/Frameworks/R.framework/Versions/4.4-arm64/Resources/library
      knitr: 1.49
      rmarkdown: 2.29

[✓] Checking Knitr engine render......OK

[mcanouil]

The issue is that you are applying column-margin at the same level as the composite figure.

You should not set column and layout at the same time in a code cell.

In general, you should not mix at the same level layout options.
In regular fenced divs, combining classes is fined but layout options is a bit tricky and lead to unexpected results.

See

Input

Output

--- title: "Test" format: html --- ## Figure With Subfigures, in Margin ::: {.column-margin} ```{r} #| echo: false #| label: fig-test-1 #| fig-cap: "Two subfigures" #| fig-subcap: #| - First subfigure #| - Second subfigure #| layout-row: 2 plot(rnorm(100)) plot(rexp(100)) ``` ::: {{< lipsum 3 >}} ## No computation ::: {.column-margin} ::: {#fig-composite layout-col="1"} {#fig-placeholder-1} {#fig-placeholder-2} Two figures. ::: ::: {{< lipsum 2 >}}

[homerhanumat]

Thanks, that is helpful. I did not see it addressed anywhere in the documentation.

[mcanouil]

it's not, at least not explicitly.

[mcanouil]

To note, the behaviour when combining column+ layout + cross-ref is independent of the engine:

Input

Markdown

--- title: "Test" format: html --- ## Figure With Subfigures, in Margin ```{python} #| echo: false #| label: fig-test-1 #| fig-cap: "Two subfigures" #| fig-subcap: #| - First subfigure #| - Second subfigure #| layout-row: 2 #| column: margin import numpy as np import matplotlib.pyplot as plt fig, ax = plt.subplots(1, 2, figsize=(10, 5)) ax[0].plot([1, 2, 3], [1, 2, 3]) ax[1].plot([1, 2, 3], [3, 2, 1]) plt.show() r = np.arange(0, 2, 0.01) theta = 2 * np.pi * r fig, ax = plt.subplots( subplot_kw = {'projection': 'polar'} ) ax.plot(theta, r) ax.set_rticks([0.5, 1, 1.5, 2]) ax.grid(True) plt.show() ``` {{< lipsum 3 >}}

--- title: "Test" format: html keep-md: true --- ## Figure With Subfigures, in Margin ::: {#fig-test-1 .cell .column-margin layout-row='2' execution_count=1} ::: {.cell-output .cell-output-display} {#fig-test-1-1 width=802 height=411} ::: ::: {.cell-output .cell-output-display} {#fig-test-1-2 width=450 height=439} ::: Two subfigures ::: {{< lipsum 3 >}}

[mcanouil]

After playing around with different tweaks of the syntax, the options can actually be combined (I probably missed when this was fixed).

What's breaking the layout is the code cells classes added, here a reprex showing the working syntax and one mimicking a code cell.

Input

Output

--- title: "Test" format: html --- ## This works ::: {#fig-composite-1 .column-margin layout-col='1'} ::: {} {#fig-placeholder-1a} ::: ::: {} {#fig-placeholder-1b} ::: Two figures. ::: {{< lipsum 2 >}} ## This does not (mimicking the behavior code cells) ::: {#fig-composite-2 .cell .column-margin layout-col='1'} ::: {.cell-output .cell-output-display} {#fig-placeholder-2a} ::: ::: {.cell-output .cell-output-display} {#fig-placeholder-2b} ::: Two subfigures :::

Removing .cell top the parent div makes the layout works.

[mcanouil]

This is a bug in how the fenced div is created in a code cell as the options can be actually combined at least in 1.7.9 and above.

Nesting layout options is a workaround in the end.

[homerhanumat]

Just a note, as people work on this: the issue is not necessarily limited to content with sub-parts. It appears with tables generated by a code cell.

---
title: "Test"
format: html
---


Sadly, the caption of @tbl-test-1 appears in the main column.

```{r echo=FALSE}
#| label: tbl-test-1
#| tbl-cap: "Marginal table with caption in main column"
#| column: margin
plot(rnorm(100))
```

@tbl-test-2 is made with the workaround, applying the styling to an enclosing div:

::: {.column-margin}
```{r echo=FALSE}
#| label: tbl-test-2
#| tbl-cap: "Marginal table with caption in expected place"
plot(rnorm(100))
```
:::

[mcanouil]

Thanks for the additional details.

Side note: do not mix code cells options syntax. Still to YAML.
#| echo: false. In Quarto, you basically should write nothing within the brackets but the language.
Note that, you should not mix syntaxes even in Rmarkdown.

[homerhanumat]

Good to know, that we should not mix syntax.