Basic Typst --> HTML Question

[connortwiegand]

Hi there,

I might be a bit confused about the conversion of .typ files to .html files. Currently I am using Quarto's pre-packaged Pandoc, currently 3.2.0. Let's say I have a minimal typst example -- call it foo.typ -- like so:

#let foo(x: "hello", y: "world") = {
  set text(fill: blue)
  [#x to the #y]
}

#foo()

#set text(fill: red)

= Bar

When I run

quarto pandoc foo.typ -f typst -t html -s -o test-out.html

the resulting test-out.html file has no mention of the colors used. I have gathered from similar discussions/issues that this may be expected, and further that the solution involves post-processing and escaping certain characters, I just can't seem to find a good reference for this. Maybe there isn't one, but I'm not even sure that I'm on the right track here. Any help is appreciated!

[jgm]

Pandoc's internal document model has no way to represent colors, so these get "lost in translation."

[connortwiegand]

Wow, thanks for the quick reply! That's good to know, and I guess my MWE was too minimal. Please consider the following typst example instead (this uses an excerpt from ``

#let edu(
  institution: "",
  date: "",
  degrees: (),
  location: ""
) = {
  pad(
    bottom: 2.5%,
    // bottom: 2pt,
    grid(
      columns: (auto, 1fr),
      align: (left, right),
      [
        #strong(institution) | #emph(location)
        // #if gpa != "" [| #emph[GPA: #gpa]]
        \ 
        #for degree in degrees [
          #h(1em)#strong(degree.at(0)) | #emph(degree.at(1)) \
        ]
      ], [
        #emph(date)
        // #if location != "" [\ #emph(location)]
      ]
    )
  )
}

#edu(
  institution: "University of Foo",
  date: "2019 -- 2024",
  degrees: (
    ("Ph.D.", "Economics"),
  ),
  location: "Bar Town"
)

Hopefully this isn't too overkill. The resulting html [body] is empty.

[jgm]

With --verbose you get a bit more information:

[INFO] Ignored element unknown inline element pad at Just (line 28, column 2)

pad is not implemented. We should presumably have pandoc just pass through its contents...

[connortwiegand]

Oh perfect, thank you!

I'm a bit out of my lane here, but FWIW I think Typst's #pad() is roughly the same as padding on an HTML element. I'm not sure if and how Pandoc's AST handles this, but I imagine that translating #pad() to a div element with the relevant padding could work.

Cheers!

[jgm]

No, the pandoc AST doesn't have a way to represent this. We could use a Div, I suppose, to avoid losing the information. Not sure.