Some multi-part figures get stretched

[Robinlovelace]

Bug description

As shown below and documented in #9927 multi-part figures became stretched in recent versions. The patch works, but not for figures with subcaptions.

Steps to reproduce

firefox https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=447558863 # or other browser
# then open a terminal and run:
quarto preview
# edit block beginning as follows to remove the subcaptions:
#| label: fig-raster-slope

You get this before:

Expected behavior

The figures should not be stretched, as was the case in previous versions and as is the case after removing subcaptions:

Actual behavior

See screenshot with stretched images above

Your environment

• VS Code but only the quarto version is relevant for this example I think

Quarto check output

quarto check
Quarto 1.5.47
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.2.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.41.0: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.5.47
      Path: /opt/quarto/bin

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

[✓] Checking LaTeX....................OK
      Tex:  (not detected)

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

[✓] Checking Python 3 installation....OK
      Version: 3.11.4
      Path: /usr/local/bin/python3
      Jupyter: 5.7.2
      Kernels: python3

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

[✓] Checking R installation...........(None)

      Unable to locate an installed version of R.
      Install R from https://cloud.r-project.org/

[cscheid]

Thanks for the devcontainer, but we do need a small reproducible case if at all possible.

[Robinlovelace]

Sorry, just wanted to report this in the quickest way. I imagine the reprex in #9927 but with subcaptions will do the trick but have not had time to test.

[Robinlovelace]

With apologies, it seems that it's not the captions causing it. I'm not sure of the cause and not sure how to generate a reprex at this stage..

[Robinlovelace]

Here's a minimal reproducible example:

```{python}
#| label: fig-test1
#| fig-cap: Slope and aspect calculation from a DEM
#| layout-ncol: 2
import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()

plt.plot([8,65,23,90])
plt.show()

#| label: fig-test2
#| fig-cap: Test
#| layout-ncol: 3
import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()

plt.plot([8,65,23,90])
plt.show()

plt.plot([8,65,23,90])
plt.show()

[Robinlovelace]

Output:

If you open one of these figures it's not stretched.

[Robinlovelace]

Issue is with the HTML as far as I can tell, although a bit outside my comfort zone, does this look right from the source code input above?

<figure class="quarto-float quarto-subfloat-fig figure">
<div aria-describedby="fig-test2-2-caption-0ceaefa1-69ba-4598-a22c-09a6ac19f8ca">
<img src="[test_files/figure-html/fig-test2-output-2.png](view-source:http://localhost:5391/test_files/figure-html/fig-test2-output-2.png)" id="fig-test2-2" data-ref-parent="fig-test2" width="566" height="411" class="figure-img">
</div>
<figcaption class="quarto-float-caption-bottom quarto-subfloat-caption quarto-subfloat-fig" id="fig-test2-2-caption-0ceaefa1-69ba-4598-a22c-09a6ac19f8ca">
</figcaption>
</figure>
</div>
</div>
<div class="cell-output cell-output-display quarto-layout-cell-subref quarto-layout-cell" data-ref-parent="fig-test2" style="flex-basis: 33.3%;justify-content: flex-start;">
<div id="fig-test2-3" class="quarto-float quarto-figure quarto-figure-center anchored" height="411" width="566">
<figure class="quarto-float quarto-subfloat-fig figure">
<div aria-describedby="fig-test2-3-caption-0ceaefa1-69ba-4598-a22c-09a6ac19f8ca">
<img src="[test_files/figure-html/fig-test2-output-3.png](view-source:http://localhost:5391/test_files/figure-html/fig-test2-output-3.png)" id="fig-test2-3" data-ref-parent="fig-test2" width="566" height="411" class="figure-img">
</div>
<figcaption class="quarto-float-caption-bottom quarto-subfloat-caption quarto-subfloat-fig" id="fig-test2-3-caption-0ceaefa1-69ba-4598-a22c-09a6ac19f8ca">
</figcaption>
</figure>
</div>
</div>
</div>
</div>
<figcaption class="quarto-float-caption-bottom quarto-float-caption quarto-float-fig quarto-uncaptioned" id="fig-test2-caption-0ceaefa1-69ba-4598-a22c-09a6ac19f8ca">
Figure&nbsp;2
</figcaption>
</figure>

[cscheid]

Ok, so the problem here is the absence of subcaps, but the presence of captions.

```` --- title: Good --- ```{python} #| label: fig-test #| layout-ncol: 2 #| fig-subcap: #| - " " #| - " " #| fig-cap: cap import matplotlib.pyplot as plt plt.plot([1,23,2,4]) plt.show() plt.plot([8,65,23,90]) plt.show() ``` ````
```` --- title: Bad --- ```{python} #| label: fig-test #| layout-ncol: 2 #| fig-cap: cap import matplotlib.pyplot as plt plt.plot([1,23,2,4]) plt.show() plt.plot([8,65,23,90]) plt.show() ``` ````

[cscheid]

We clearly need to handle this case better in Jupyter. We're fairly late in 1.5 and are being very conservative about fixes, so we'll do that in 1.6.

But the workaround I shared should get you unblocked for 1.5.

[Robinlovelace]

Hey @cscheid, update after some tests our side. Unfortunately the work-around does not seem to work in our case:

The "good" example from the thread you mentioned does work fine standalone... but when embedded in our book, it becomes stretched but with digits also stretched only in the local preview

See here for details: https://github.com/geocompx/geocompy/issues/230#issuecomment-2198484209

Do you know of any other work-arounds we could try?

An ETA for a fix would be greatly appreciated as will help us decide how much if any effort to put into working-around this issue vs supporting a fix upstream.

On that note any way we can help please let us know, and many thanks for building Quarto, Geocomputation with Python would not be possible in its current state without it!

[cscheid]

We still need a minimal example to be able to tell precisely what's going on.

[Robinlovelace]

Minimal example without subcaps as shared above:

---
title: Bad
---

```{python}
#| label: fig-test
#| layout-ncol: 2
#| fig-cap: cap
import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()

plt.plot([8,65,23,90])
plt.show()

[Robinlovelace]

I don't have time to test this but imagine that adding some more plots and other changes to this example should demonstrate how the suggested work-around fails in some cases, this isn't a reprex of the issue but would be the suggested starting point for anyone wanting to generate a more minimal example in which figures are stretched where there are captions and subcaps:

---
title: Good
---

```{python}
#| label: fig-test
#| layout-ncol: 2
#| fig-subcap:
#|   - " "
#|   - " "
#| fig-cap: cap
import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()

plt.plot([8,65,23,90])
plt.show()

Great job on creating these reprexes, they form a good foundation for debugging the issue. In terms of timings, do you have a rough idea of v1.6 release dates?

[cscheid]

I mean a minimal example where the workaround I suggested doesn't work.

No timing on v1.6 to share.

[Robinlovelace]

I don't have time to test this at the moment but can try to find time to build on the examples shared above to explore what causes the bug to also affect plots that have subcaptions, as in the full reproducible example, at some point, if that would be helpful.

[github-actions[bot]]

Thank you for using Quarto and reporting an issue!

Unfortunately, this issue is now considered stale because it has been opened since 14 days without providing a "working" reproducible example to help us investigate. If you are still facing the issue, please review the "Bug Reports" guide on how to provide a fully reproducible example as a self-contained Quarto document or a link to a Git repository. Without a reproducible example, it is unlikely that the issue will be addressed.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)

The end.

[Robinlovelace]

Unfortunately, this issue is now considered stale because it has been opened since 14 days without providing a "working" reproducible example to help us investigate.

There is a reproducible example:

---
title: Bad
---

```{python}
#| label: fig-test
#| layout-ncol: 2
#| fig-cap: cap
import matplotlib.pyplot as plt
plt.plot([1,23,2,4])
plt.show()

plt.plot([8,65,23,90])
plt.show()

There was a request to provide a reprex for a particular manifestation of the bug where there suggested workaround fails. But the main issue, that some figures get stretched in HTML, has a reproducible example.

[Nowosad]

For others having the same issue -- we were able to fix it by adding a small piece of css code -- https://github.com/geocompx/geocompy/issues/230#issuecomment-2416559222

img {
    max-width: 100%;
    height: auto;
}

[mcanouil]

@Nowosad thanks for sharing.

[cscheid]

Pushing this to 1.7 since we have other high-priority issues ahead of our release, and the workaround appears to cover these cases.

[Robinlovelace]

Thanks for logging this @cscheid and good luck with 1.6 release.