How to span tables or images across two-column layout in Typst-PDF output

[produnis]

Description

I'm using Quarto to write and typeset academic articles. For PDF output, I use Typst, and my layout is typically two-column, which I activate via the following line in my Typst template:

show: columns.with(2)

Sometimes, though, I want to place a wide table or image that spans both columns.

In Typst, this is easy using the place function:

#place(top+center, scope: "parent", float: true)[CONTENT OVER TWO COLUMNS]

In Quarto, I can achieve this by manually opening and closing typst chunks around the content. Here's an example that uses a Markdown table:

```{{=typst}}
#place(top+center, scope: "parent", float: true)[
```


| **Default** | **Left** | **Right** | **Center** | **Default** | **Left** | **Right** | **Center** |
|:-----------|:--------|---------:|:--------:|:-----------|:--------|---------:|:--------:|
| 12         | 12      | 12       | 12       | 12         | 12      | 12       | 12       |
| 123        | 123     | 123      | 123      | 123        | 123     | 123      | 123      |
| 1          | 1       | 1        | 1        | 1          | 1       | 1        | 1        |

: Tolle Tabelle {#tbl-mulitcolumn1}

```{{=typst}}
]
```

While this works, it's not exactly the “Quarto way” of doing things.

To improve this, I wrote a small Lua filter called multicolumn.lua, which wraps any .multicolumn div in the proper #place(...) Typst code:

function Div(div)
  if div.classes:includes("multicolumn") then
    local typst_start = pandoc.RawBlock("typst", '#place(top+center, scope: "parent", float: true)[')
    local typst_end = pandoc.RawBlock("typst", ']')

    local result = {typst_start}
    for _, el in ipairs(div.content) do
      table.insert(result, el)
    end
    table.insert(result, typst_end)
    return result
  end
end

Then, in the YAML front matter, I just enable the filter:

      filters:
        - multicolumn.lua

Now I can write clean Quarto content like this:

:::{.multicolumn}

| **Default** | **Left** | **Right** | **Center** | **Default** | **Left** | **Right** | **Center** |
|:-----------|:--------|---------:|:--------:|:-----------|:--------|---------:|:--------:|
| 12         | 12      | 12       | 12       | 12         | 12      | 12       | 12       |
| 123        | 123     | 123      | 123      | 123        | 123     | 123      | 123      |
| 1          | 1       | 1        | 1        | 1          | 1       | 1        | 1        |

: My span table {#tbl-span2}

:::

The table is now automatically placed across both columns. This approach also works well for images and R code chunks.

Hope this is helpful to somebody.. :-)

[cscheid]

Thanks for sharing, this is great!

Relatedly, I really think we should consider adding https://github.com/christopherkenny/typst-function to the core of Quarto's typst functionality, together with a corresponding Lua API. Writing the .multicolumn filter could, hypothetically, be as simple as:

function Div(div)
  if div.classes:includes("multicolumn") then
    return quarto.typst.function_call("place", "top+center", div, { scope = "parent", float = true })
  end
end