great tables with quarto and typst

[boshek]

Description

I have noticed some differences between great tables output versus that which I get when I use great tables with typst and quarto. I have just started using typst so these could very well be skill issues. Additionally I am opening this first here but feel free to suggest if I should open these in the great tables repo.

I've written a small qmd that replicates what I am noticing. My approach is to create a table but also write on an artifact. When replicated with format:html the table renders as expected. Here is what is generated from the great tables code when I save them as pngs. This is the expected behaviour:

cell_borders

italics

bold

And then here is what the qmd looks like as a pdf when rendered with typst:

I was not expecting 100% replication of a PDF table to an HTML table but my assumption was that styles would be implemented. Sorry I'm not familiar enough with typst to resolve the HTML to typst process (though I'm happy to receive any tips!)

---
format: typst
execute: 
  echo: false
---

```{python}
from great_tables import GT, style, loc, exibble
exibble_sm = exibble[["num", "fctr", "row", "group"]].head(5)
gt_tbl = GT(exibble_sm)
gt_tbl
```


## cell borders

```{python}
cell_borders = (
    GT(exibble_sm)   
    .tab_style(
        style=style.borders(sides=["bottom"], weight='2px', color="red"),
        locations=loc.body(rows=[3])
    ) 
)
cell_borders
```

```{python}
cell_borders.save("cell_borders.png")
```

## italics

```{python}
italics = (
    GT(exibble_sm)   
    .tab_style(
        style=style.text(style="italic"),
        locations=loc.body(rows=[3])
    ) 
)
italics
```

```{python}
italics.save("italics.png")
```

## bold

```{python}
bold = (
    GT(exibble_sm)   
    .tab_style(
        style=style.text(weight="bold"),
        locations=loc.body(rows=[3])
    ) 
)
bold
```

```{python}
bold.save("bold.png")
```

[cscheid]

Those kinds of differences are unavoidable, because the rendering engines are not precisely the same. The idea of this feature is not for tables to come out looking identical: it exists to empower you to change the styles in a similar way as you would in HTML.

[boshek]

Gotcha. Thanks for this response.

[cscheid]

I should have read a bit further, though, and I think we might be able to improve the bold/italic/etc rendering in the future - but padding, outlines, and precise placement will never quite perfectly match.

And, I'm not sure how to explain the differences, but this is what I see:

[aito123]

Good to hear that this issue is solvable. Is this bug-fix going to be present in the comming updates of quarto? That would be really great. Thanks.

[aito123]

Hello,
I can confirm that this behaviour is also present in R {gt} package. I'm using Quarto 1.7 and Typst 0.13

This is the qmd reprex:

---
title: "test1"
format: typst
---

## gt tables

```{r}
pacman::p_load(gt, tidyverse)
```

### border

```{r}
exibble %>% 
  select(1:3) %>% 
  gt() %>% 
  tab_style(style = list(cell_borders(color = "red")),
              locations = cells_body(rows = char %in% "apricot"))

```


### italics

```{r}
exibble %>% 
  select(1:3) %>% 
  gt() %>% 
  tab_style(style = list(cell_text(style = "italic")),
              locations = cells_body(rows = char %in% "apricot"))
```


### bold

```{r}
exibble %>% 
  select(1:3) %>% 
  gt() %>% 
  tab_style(style = list(cell_text(weight = "bold")),
              locations = cells_body(rows = char %in% "apricot"))
```

Tables should look like this:

But look like this:

Quarto info

Quarto 1.7.21
[>] Checking environment information...
Quarto cache location: D:\Users\santiago.sotelo\AppData\Local\quarto
[>] Checking versions of quarto binary dependencies...
Pandoc version 3.6.3: OK
Dart Sass version 1.85.1: OK
Deno version 1.46.3: OK
Typst version 0.13.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
Version: 1.7.21
Path: D:\Users\santiago.sotelo\AppData\Local\Programs\Quarto\bin
CodePage: 1252

[>] Checking tools....................OK
TinyTeX: v2024.11
Chromium: (not installed)

[>] Checking LaTeX....................OK
Using: TinyTex
Path: D:\Users\santiago.sotelo\AppData\Roaming\TinyTeX\bin\windows
Version: 2024

[>] Checking Chrome Headless....................OK
Using: Chrome found on system
Path: C:\Program Files\Google\Chrome\Application\chrome.exe
Source: Windows Registry

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
Version: 3.11.12
Path: D:/Users/santiago.sotelo/AppData/Local/R/cache/R/reticulate/uv/cache/archive-v0/vHld6hSKmvUV1AGM3oRJl/Scripts/python.exe
Jupyter: (None)

  Jupyter is not available in this Python installation.
  Install with py -m pip install jupyter

[>] Checking R installation...........OK
Version: 4.4.2
Path: D:/Users/santiago.sotelo/AppData/Local/Programs/R/R-4.4.2
LibPaths:
- D:/Users/santiago.sotelo/AppData/Local/Programs/R/R-4.4.2/library
knitr: 1.50
rmarkdown: 2.29

[>] Checking Knitr engine render......OK

[cderv]

@gordonwoodhull Are these known limitations for CSS translation support in Typst? Do we need to log an issue about them?

[gordonwoodhull]

Thanks for the heads-up! Not sure how I missed this discussion the first time around.

font-weight and font-style are not implemented, but I did a quick experiment and they easily could be. These are pretty important!

In general, this table in the advanced docs summarizes what element/property combinations are supported.

[cderv]

Awesome! I let you open an issue with your experiment findings so that we don't forget that for 1.8

[cderv]

In fact this is here:

• Feature/typst font weight & style #12554

[gordonwoodhull]

Thanks! It’s annoying that GH doesn’t create backlinks for discussions when you refer to them, the same way it does for issues.

[cderv]

Yes definitely. It creates some links if you create an issue from a discussion, but its rarely done this way; Hopefully they'll do an update