Typst: Unable to fit mermaid diagram into columns

[cderv]

Discussed in https://github.com/quarto-dev/quarto-cli/discussions/8542

^{Originally posted by **jkub6** February 1, 2024} ### Description I have been unable to find a way to get my figure to fit within its column in a 2 column Typst document. Is there a way to auto shrink-to-fit figures? (Or is this a bug with Typst in Quarto?) ## Example  ````qmd --- title: 2 Column Layout format: typst: columns: 2 --- ## Heading 1 Some text here. This should wrap when it hits the column. ```{mermaid} graph LR A---B---C---D---E---F ``` ```{mermaid} graph LR A---B---C---D---E---F---G---H---I---J ``` More text here. This should also wrap when it hits the column. ````

[cscheid]

The problem here comes from the fact that the mermaid diagrams are emitted like so:

::::::{.cell layout-align="default"}

:::::{.cell-output-display}

::::{}
`<figure class=''>`{=html}

:::{}

![](8543_files/figure-typst/mermaid-figure-1.png){width="4.28in" height="0.52in"}
:::
`</figure>`{=html}
::::
:::::
::::::

Typst respects the requested size, which spills over the column.

This is the generated .typ:

#block[

#block[
#box(image("8543_files/figure-typst/mermaid-figure-2.png", height: 0.52in, width: 7.34in))

]

]

[cscheid]

I keep going back and forth here.

This is, ultimately, another instance of Quarto's inability to tell default values from explicitly set values.

If a user had explicitly declared the desired width and height for the diagram, then we should respect it, independently of the column size. But for a plain mermaid declaration, there are two similarly bad choices:

• We don't resize the image. The generated image has exactly the size that the diagram renderer thought was necessary, and resizing causes (eg) font sizes to be distorted.
• We do resize the image. The resulting image now fits in columns, but will potentially have much smaller size than desired.

[cscheid]

I think this is also partly a problem with how Typst handles image sizing (which I know they've expressed interested in improving.) For example,

#box(image("8543_files/figure-typst/mermaid-figure-1.png", width: 8in), width: 100%, fill: gray)

This will create output like this:

Notice the gray line - that's the background for the box. The box itself is 100%, but the image still spills over. So I don't think there's a currently a way in Typst to communicate "at least x inches, but not more than the width of the containing box".

Currently, the best workaround is to explicitly size the diagram from the mermaid cell, like so:

```{mermaid}
%%| fig-width: 3in
graph LR
  A---B---C---D---E---F

I think we'll sit on this until Typst makes a call on their sizing system.