How do I create tables with custom styles using Python in Quarto+Typst and render them on PDF & HTML with applied styles?

[DDyuti]

Description

In my .qmd file (where I am using Typst extension in Quarto)-
-I am creating some tables using simple python functions and applying new styles to them.

• Currently I am able to see the new formats of the tables on the browser when I do 'Quarto preview' ; that means it is showing on the HTML .
  -However, when I do 'Quarto render' and exporting them to pdf, my tables just show up as raw tables , without any style.

I want to be able to apply custom css ( hopefully an external css file that can take all my table styling) to all my tables and render them on HTML and PDF

[mcanouil]

Use any libraries of the Python ecosystem to produce the desired output.
Currently libraries are not really supporting Typst so you won't get a better result than writing the code yourself.
Quarto can use HTML table and produce Typst table but again the styling might not be preserved because the two languages are quite different.

Regarding CSS and Typst, since 1.5, Quarto supports it, see https://quarto.org/docs/output-formats/typst.html#typst-css.
This page also includes code example for tables.

That's not really a Quarto question.

[DDyuti]

Hi , thank you for your reply. Sorry if it isn't the right Quarto question.
I was not able to get related answer in any of the discussions.

While the article suggests that css is now readable by Quarto and Typst (which is true ; I am able to apply custom CSS) ,

for Typst (extension in quarto) :

the css only reflects in pdf if I write them on the '.typ' file not '.qmd' file. But again I can't render the '.typ' file in HTML (it can be only complied to pdf ?)

for Quarto:

I can see the css in HTML , but nothing goes to the pdf

Any idea ?

Many thanks !

[mcanouil]

Unfortunately, it's quite not clear what you are saying and the fact that you do not provide code does not help us help you.

I was not able to get related answer in any of the discussions.

This is very likely for the reason I've just exposed.

for Typst (extension in quarto) :

What is that?

the css only reflects in pdf if I write them on the '.typ' file not '.qmd' file.

How do you set the CSS?

But again I can't render the '.typ' file in HTML (it can be only complied to pdf ?)

Typst is to generate PDF not HTML why would you expect to generate HTML out of Typst? (You might be able to do that with Pandoc alone, but that's not Quarto).

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[DDyuti]

Hello,
Sharing a simple example here explaining what is the problem I am facing : -

editing in file : Typstnew.qmd

---
title: "Hello Typst!"
author: "ABCD"
format:
  pdf: default
  typst:
    embed-resources: true
    keep-typ: true
    toc: true
    section-numbering: A.1.a
    # columns: 2
    papersize: "a4"
    execute:
      echo: false
      warning: false
---
# Hello Typst!

```{python}
import pandas as pd
import numpy as np

temps = pd.DataFrame({
  'year': [*range(1920, 1925)],
  'Jan': [40.6, 44.2, 37.5, 41.8, 39.3], 
  'Jun': [58.5, 58.7, 57.8, 52.7, 57.7]
}).set_index('year')

def make_pretty(styler):
  styler.background_gradient(axis=None,
    vmin=31, vmax=66, cmap="RdYlGn_r")
  return styler

temps.style.pipe(make_pretty)

After running this I can see the output in the interactive screen , as well as in the localhost , which looks like this:

but when I run : Quarto render Typstnew.qmd ; ideally I would want to see the same styles in the exported pdf as well. but I see the below format

---

I recently found a way out , where I compile a .typ file to see the actual formatting of the table style in the pdf (so that is one extra step)
A .typ file gets autogenerated when we do Quarto render Typstnew.qmd

So , New command : quarto typst compile Typstnew.typ
Then the '.typ' file regenerates the pdf file and produces the correct output.

Is there a simpler way I can achieve the same look and feel of the tables in my localhost as well as my pdf ?

[gordonwoodhull]

You probably don't want both format pdf and format typst. The Typst format generates PDFs while the PDF format uses Latex, and there is not usually a reason to use both. (Yes we know this is confusing.)

You are probably seeing the Latex PDF overwrite the Typst PDF. If you remove format PDF you should see just the Typst output.

[DDyuti]

Thank you very much @gordonwoodhull , that makes a lot of sense.
I created a separate project folder with just one .qmd and removed the additional format : pdf and it worked.

However, I think because I am referring to more than one .qmd file in a .yml file and creating a book ; the latex pdf overwrites somewhere there in the .yml file. Could that be a reason in multiple .qmd to pdf conversion ?

[mcanouil]

Only LaTeX/PDF and HTML are supported for books.