width property for computed figures should be passed to markdown

[erentar]

Description

As title says. When cell properties #| width: 70 or #| fig-width: 10 are specified, they do not get passed to the figure.

The following notebook

plot-py.ipynb:

---
title: "Reproducible Quarto Document"
format: pdf
engine: jupyter
keep-tex: true
keep-md: true
---

# %%
#| fig-width: 10
#| width: 80
#| fig-pos: h!
import numpy as np
import matplotlib.pyplot as plt
x = np.arange(0, 5*np.pi, 0.1)
y = np.sin(x)
plt.plot(x, y, color='green')
plt.show()

produces the matching markdown

---
title: "Reproducible Quarto Document"
format: pdf
engine: jupyter
keep-tex: true
keep-md: true
---


::: {.cell execution='{"iopub.execute_input":"2025-03-19T18:03:40.687851Z","iopub.status.busy":"2025-03-19T18:03:40.687018Z","iopub.status.idle":"2025-03-19T18:03:41.767304Z","shell.execute_reply":"2025-03-19T18:03:41.765908Z","shell.execute_reply.started":"2025-03-19T18:03:40.687800Z"}' fig-width='10' width='80' execution_count=1}
``` {.python .cell-code}
import numpy as np
import matplotlib.pyplot as plt
x = np.arange(0, 5*np.pi, 0.1)
y = np.sin(x)
plt.plot(x, y, color='green')
plt.show()
```

::: {.cell-output .cell-output-display}
![](plot-py_files/figure-pdf/cell-2-output-1.png){fig-pos='h!'}
:::
:::

As you can see, fig-pos is passed perfectly well to the figure, however width is not.

The width property should also be passed to the figure, allowing for resizing the figure regardless of engine.

Currently, knitr is the only engine allowing resizing figures, which is via the fig-width property.
There is no reason (as far as i can see) to not pass width the same way fig-pos is passed

[cscheid]

There is no reason (as far as i can see)

Unfortunately, there is a reason. This is quite hard to do in general for jupyter because Quarto doesn't control the kernel being used, and so there isn't a single mechanism for communicating per-cell information from Quarto to an arbitrary programming language.

[cscheid]

(On jupyter) Not on a per-cell basis, it's not. It only works as document or project metadata.

To make sure that I am being precise: the computation itself doesn't have access to that information.

In other words, the width information is not accessible to the Python code (and so the figures can't be resized in Python). Neither is fig-pos - that information is inserted by Quarto, and not by the IPython kernel.

But you might be able to achieve what you want via Lua filters. The syntax will be a little awkward, but you should be able to wrap the executable code cell with a fenced div that contains the information you want, and then catch that div and process it as you need.

[erentar]

I do not want the computation to modify the properties.
I do not want to resize the figure in python. I just want the width property as specified in the header of the cell via the #| directives to be passed to pandoc. Just like it is passed with fig-pos. I want quarto to pass this property to the pandoc markdown intermediate.

The language I am using does not support DPI for cell outputs, thus the instructions for resizing cell outputs do not work. Having the #| width property passed to the pandoc markdown would allow any arbitrary language to have resizeable figures.

I will look into lua filters to achieve this. Thank you

[cscheid]

Here's a minimal example to get you started:

forward.qmd

---
format: html
filters:
  - forward.lua
---

::: {.forward width=100}

```{python}
import numpy as np
import matplotlib.pyplot as plt
x = np.arange(0, 5*np.pi, 0.1)
y = np.sin(x)
plt.plot(x, y, color='green')
plt.show()
```

:::

forward.lua

return {
  {
    Div = function(div)
      if div.classes:includes("forward") then
        div = div:walk({
          Div = function(inner)
            for k, v in pairs(div.attributes) do
              inner.attributes[k] = v
            end
            return inner
          end
        })
        return div.content -- remove scaffolding
      end
    end
  },
  {
    Div = function(div)
      print(div.attributes)
    end
  }
}

The syntax in the filter with the nested array of objects means "return a two-stage filter". This filter runs in order. The first filter finds the .forward div and annotates the inner divs. The second filter would be the one you would use to set values as you desire on images.

There are more direct ways to do this using Quarto's APIs and (new in 1.7) custom traversals, but the example above is straightforward and explains what's going on. If you run it, you'll find that the print function is called twice, because of the nested div structure in the cell output from the engine.

[erentar]

Could you take a look at erentar@bf3a4ac

I've implemented fig-width as a cell option, it is working on my machine.

This is a minimal example, I have not added documentation or anything, and I do not know javascript or typescript so this is very primitive, however this shows that it is possible and indeed there is no underlying limitation to prevent quarto from doing this.

With this patch, i am able to pass #| fig-width: 50% cell option to the intermediate markdown as ![](jupyter_files/figure-pdf/){width=50%}.

Please consider implementing this for quarto

[cderv]

@erentar you could open a draft PR to discuss your proposal. That will make it easier to see diff and comment about the change. Thanks !

[mcanouil]

Could you properly format your post using code blocks for code and terminal outputs? Thanks.
If your code contains code blocks, you need to enclose it using more backticks, i.e., usually four ````.
See https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us.