Charts in Callout Boxes Overflow Their Boundaries in Typst Format

[produnis]

Description

When generating documents in the Typst format with Quarto, charts placed inside callout boxes are rendered in a way that they overflow the boundaries of the box. This negatively impacts the layout and readability of the document.

Please find a minimal example here:
https://github.com/produnis/minimal_examples/tree/typstboxfit

Any suggestions on how to make them fit into the box?

[mcanouil]

Which version of Quarto?

[produnis]

Sorry, quarto 1.6.37

[cderv]

Here is a reproducible example simplified

---
title: Test
format: typst
keep-md: true
---

::: {.callout-note}

## Plots

::: {layout-ncol=5}

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})
:::

a)  Beschreiben Sie die 5 Verteilungsformen. [5 Punkte]

:::

But I really think it is a matter of having two many content for the column. Without callout would be the same

---
title: Test
format: typst
keep-md: true
---

## Plots

::: {layout-ncol=5}

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})
:::

Add a 2 more and image will reduce by are not bound by the margin

---
title: Test
format: typst
keep-md: true
---

## Plots

::: {layout-ncol=7}

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})
:::

In the callout example, there are not bound by the callout

The typst code is the follwoing

#block[
#callout(
body: 
[
#block[
]
#grid(
columns: (20.0%, 20.0%, 20.0%, 20.0%, 20.0%), gutter: 1em, rows: 1,
  rect(stroke: none, width: 100%)[
#box(image("index_files\\mediabag\\svg-xml-base64,PHN2Z.svg", width: 100%))

],
  rect(stroke: none, width: 100%)[
#box(image("index_files\\mediabag\\svg-xml-base64,PHN2Z.svg", width: 100%))

],
  rect(stroke: none, width: 100%)[
#box(image("index_files\\mediabag\\svg-xml-base64,PHN2Z.svg", width: 100%))

],
  rect(stroke: none, width: 100%)[
#box(image("index_files\\mediabag\\svg-xml-base64,PHN2Z.svg", width: 100%))

],
  rect(stroke: none, width: 100%)[
#box(image("index_files\\mediabag\\svg-xml-base64,PHN2Z.svg", width: 100%))

],
)
#block[
#set enum(numbering: "a)", start: 1)
+ Beschreiben Sie die 5 Verteilungsformen. \[5 Punkte\]
]

]
, 
title: 
[
Plots
]
, 
background_color: 
rgb("#dae6fb")
, 
icon_color: 
rgb("#0758E5")
, 
icon: 
fa-info()
)
]

I don't know if there is a way to constraint the #grid to the size of the #block[#calout()

@gordonwoodhull do you think this is something we can improve ? If we can we probably should...

For callout but maybe also to avoid content going in margin 🤔 We probably have still some work on Article Layout for typst

[gordonwoodhull]

It seems that using the fraction type in the columns

columns: (1fr, 1fr, 1fr, 1fr, 1fr)

fixes this.

I suspect that when you use the ratio

columns: (20.0%, 20.0%, 20.0%, 20.0%, 20.0%)

it uses portion of the page rather than using up the space of the block as we want.

[mcanouil]

It means the code in https://github.com/quarto-dev/quarto-cli/blob/2a2ddd67afc9a0d6ae211fb0d48443bf0db52bb9/src/resources/filters/layout/layout.lua would need to be fixed for Typst.

Or to convert from percentage to relative width in:

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

  Lines 51 to 57 in 39baf40

  	local col_spec = {}
  	for j, col in ipairs(row) do
  	table.insert(col_spec, col.attributes["width"])
  	end
  	-- TODO allow configurable gutter
  	local col_spec_str = "columns: (" .. table.concat(col_spec, ", ") .. "), gutter: 1em, rows: 1,"
  	result:insert(pandoc.RawBlock("typst", "#grid("))

A quick&dirty hack by inserting the following at L55 fixes the issue:

    local all_equal = true
    for i = 2, #col_spec do
      if col_spec[i] ~= col_spec[1] then
        all_equal = false
        break
      end
    end
    if all_equal then
      for i = 1, #col_spec do
        col_spec[i] = "1fr"
      end
    end

Current	Hack

Code

---
title: "Quarto Playground"
format: typst
keep-typ: true
---

::: {layout-ncol=7}

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})
:::


::: {.callout-note}
::: {layout-ncol=7}

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})

![]({{< placeholder format=svg >}})
:::
:::

[gordonwoodhull]

Converted to issue and assigned myself, but feel free to submit a PR. I’m out for a week but I’ll review when I get back.

[mcanouil]

I think I've got a simple general fix.

[gordonwoodhull]

Converted to issue #11578