Regression: Multi-part figures get stretched in recent versions

[Robinlovelace]

Bug description

Quarto creates outputs in which figures are distorted with layout-ncol values above one, e.g. in the following reproducible example:

#| label: fig-raster-slope
#| fig-cap: Slope and aspect calculation from a DEM
#| layout-ncol: 3
#| fig-subcap: 
#| - Input DEM
#| - Slope (degrees)
#| - Aspect (degrees)
# Input DEM
src_srtm = rasterio.open('output/srtm_32612.tif')
srtm = src_srtm.read(1).astype(float)
srtm[srtm == src_srtm.nodata] = np.nan
fig, ax = plt.subplots()
rasterio.plot.show(src_srtm, cmap='Spectral_r', ax=ax)
fig.colorbar(ax.imshow(srtm, cmap='Spectral_r'), ax=ax);
# Slope
src_srtm_slope = rasterio.open('output/srtm_32612_slope.tif')
srtm_slope = src_srtm_slope.read(1)
srtm_slope[srtm_slope == src_srtm_slope.nodata] = np.nan
fig, ax = plt.subplots()
rasterio.plot.show(src_srtm_slope, cmap='Spectral_r', ax=ax)
fig.colorbar(ax.imshow(srtm_slope, cmap='Spectral_r'), ax=ax);
# Aspect
src_srtm_aspect = rasterio.open('output/srtm_32612_aspect.tif')
srtm_aspect = src_srtm_aspect.read(1)
srtm_aspect[srtm_aspect == src_srtm_aspect.nodata] = np.nan
fig, ax = plt.subplots()
rasterio.plot.show(src_srtm_aspect, cmap='twilight', ax=ax)
fig.colorbar(ax.imshow(srtm_aspect, cmap='twilight'), ax=ax);

Steps to reproduce

See code chunk above.

To reproduce, follow steps here: https://github.com/geocompx/geocompy

You can also reproduce in a devcontainer hosted on GitHub:

From there try typing quarto preview in the terminal.

Expected behavior

It should look like this, as it did in previous versions of Quarto:

Source: geocompx/geocompy#230 (comment)

Actual behavior

The figures are stretched

Your environment

• IDE: VS Code. This has nothing to do with the IDE though.

Quarto check output

quarto check
Quarto 1.5.41
[✓] 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.41
      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/

[Robinlovelace]

See work-around here: geocompx/geocompy#233

Follow-on question, are there any good work-arounds on the quarto side?

[mcanouil]

Thanks for the report.

Could you share a small self-contained example as you seem to imply the code cell options snippet (not reproducible) is enough?

It's really important you strip out everything unrelated to s in your case (your GitHub repository) there are many possible cofounders.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ```  The end. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ```  The end. ````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[Robinlovelace]

OK will try to create a minimal reprex..

[mcanouil]

Thanks!

[Robinlovelace]

OK will try to create a minimal reprex..

Here you go:

---
title: "Reproducible Quarto Document"
format: html
engine: jupyter
---

This is a reproducible Quarto document.

```{python}
#| layout-ncol: 3

import rasterio
import numpy as np
import matplotlib.pyplot as plt
from rasterio.plot import show

# Example raster dataset: SRTM

src_srtm = rasterio.open('https://github.com/geocompx/geocompy/raw/main/data/srtm.tif')
srtm = src_srtm.read(1).astype(float)
srtm[srtm == src_srtm.nodata] = np.nan
fig, ax = plt.subplots()
rasterio.plot.show(src_srtm, cmap='Spectral_r', ax=ax)

```

The end.

[Robinlovelace]

Try rendering that doc. You will see something like this, if the bug persists on your computer (figure should be square):

I see no good reason for Quarto to stretch figures vertically like this without any instructions to do so or prior warning that it will. As per image above, it looked fine without the stretching.

[Robinlovelace]

How it should look is shown in the image in the original post: #9927 (comment)

That is how it does look on older versions of Quarto before this regression I think. We're not sure when the regression was introduced.

[cscheid]

You've requested layout-ncol: 3 here. What did you expect to happen?

[mcanouil]

You titled "regression", but compared to which version?

[mcanouil]

The markdown code emitted for the images contain an absolute size, so no resizing can happen responsively.
layout-ncol makes a constraint on the width but Quarto has no way to know what kind of content there is: it can be as simple as an image, but it can be a mix of anything thus you cannot also add a constraint on height.

If I set the height/width myself in your code:

Quarto document

HTML

--- format: html engine: jupyter keep-md: true --- ```{python} #| layout-ncol: 3 import rasterio import numpy as np import matplotlib.pyplot as plt from rasterio.plot import show # Example raster dataset: SRTM src_srtm = rasterio.open('https://github.com/geocompx/geocompy/raw/main/data/srtm.tif') srtm = src_srtm.read(1).astype(float) srtm[srtm == src_srtm.nodata] = np.nan fig, ax = plt.subplots(figsize=(2, 2)) rasterio.plot.show(src_srtm, cmap='Spectral_r', ax=ax) plt.show() ```

If you look at the intermediate markdown the image looks like this:

![](index_files/figure-html/cell-2-output-1.png){width=207 height=188}

The same thing without computations:

Quarto document	HTML
--- format: html keep-md: true --- ::: {layout-ncol="3"}    ::: --- ::: {layout-ncol="3"} {width=450 height=450}   :::

[Robinlovelace]

You titled "regression", but compared to which version?

We're not sure when the regression was introduced.

[Robinlovelace]

You've requested layout-ncol: 3 here. What did you expect to happen?

I would expect the aspect ratio of the images not to altered, see the aspect ratio of the image below (zoomed in version of image in original post to highlight that this was also generated by Quarto):

Source: geocompx/geocompy#230 (comment)

In terms of the version of Quarto that generates that expected non-stretched version, I'm not sure but Michael might. @michaeldorman do you know what version of Quarto generated the image shown above? Thanks all.

[mcanouil]

If you have the HTML, the Quarto version is written as metadata in it.

[Robinlovelace]

- fig, ax = plt.subplots()
+ fig, ax = plt.subplots(figsize=(2, 2))

That looks like a good work-around. Would be great if the figures were not stretched without adding figsize arguments, as seems to have happened in older versions of Quarto.

[cscheid]

I've bisected it to a change from 1.4.366 to 1.4.367 - 1.4.367 is the FloatRefTarget release, somewhat unsurprisingly.

[cscheid]

This is interesting, though. In the "good" versions, Quarto is completely removing the height attribute from the image as provided. The keep-md output is:

---
format: html
engine: jupyter
keep-md: true
---


::: {#dda85de0 .cell layout-ncol='3' execution_count=1}
``` {.python .cell-code}
import rasterio
import numpy as np
import matplotlib.pyplot as plt
from rasterio.plot import show

# Example raster dataset: SRTM

src_srtm = rasterio.open('https://github.com/geocompx/geocompy/raw/main/data/srtm.tif')
srtm = src_srtm.read(1).astype(float)
srtm[srtm == src_srtm.nodata] = np.nan
fig, ax = plt.subplots()
rasterio.plot.show(src_srtm, cmap='Spectral_r', ax=ax)

plt.show()
```

::: {.cell-output .cell-output-display}
![](9927_files/figure-html/cell-2-output-1.png){width=443 height=411}
:::
:::

Note {width=443 height=411} specifically.

The HTML output we produce in 1.4.366 (the "good" version) has

<p><img src="9927_files/figure-html/cell-2-output-1.png" class="img-fluid" width="443"></p>

Note how the height attribute got dropped.

I think the fundamental problem here is that it's impossible for Quarto to properly handle existing sizing constraints on images inside a layout-ncol declaration.

In a vacuum, what would be desired outcome here? layout-ncol:3 specifies the desire for three evenly-spaced columns, in which case each column has a max-width lower than the image. Because height is explicitly specified instead of aspect ratio, the web browser goes "cool, I'll keep the height while squeezing the width".

In 1.4.366, Quarto actively decides to drop the height of the images in a layout cell, see

quarto-cli/src/resources/filters/layout/layout.lua

Line 132 in c5b6176

transferImageWidthToCell(fig, cellDiv)

which calls

quarto-cli/src/resources/filters/layout/width.lua

Lines 129 to 135 in c5b6176

	function transferImageWidthToCell(img, divEl)
	divEl.attr.attributes["width"] = img.attributes["width"]
	if sizeToPercent(attribute(img, "width", nil)) then
	img.attributes["width"] = nil
	end
	img.attributes["height"] = nil
	end

Note how line 134 drops the height.

We'll fix this soon.

[Robinlovelace]

great job! Will look to install latest version to fix on our book also.

[Robinlovelace]

Any ideas of ETA when there will be a release with this patch? Just looking here https://github.com/quarto-dev/quarto-cli/releases

[Robinlovelace]

Hi @cscheid I'm sorry to report that the issue persists for us. As I said, it was not an issue in previous versions but it persists. Any suggestions to keep the aspect ratio unchanges please let us know. Happy to provide more details.

[Robinlovelace]

Fully reproducible example inside a devcontainer:

• Click here: https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=447558863
• Open a terminal and run quarto preview
• As shown below I've tried on the latest version of Quarto

quarto --version
1.5.47

[Robinlovelace]

I've identified the cause here: subcaptions. Will open a new issue.