Draft of css to typst property translation

[gordonwoodhull]

Hi @cscheid! Thought I'd open a draft to show my work in progress on translation of CSS properties to Typst.

There are a few loose ends:

• The juice.ts script is not integrated

  • as you suggested as a first step, I'm pulling in juice from the 'Net rather than using import maps
  • script in wrong location src/resources/scripts
  • parsehtml.lua has hard-coded paths (wish I could disable tests for a draft PR, obv this won't work)

• parsehtml.lua has to use a temporary file because the standard Lua library does not support io.popen() with both read and write

  • It is using the temporary filename juice-in.html which probably needs to be made more unique, and cleaned up.
  • I looked at the standard Quarto trace and it is easy to find the juice input in there. Might be nice to also record the juice output before it is parsed by Pandoc, but I see no need for keep-juice.

• I added this as a second Typst post-processor but perhaps they should be rolled up together to not add another filter pass. I want to keep css props stuff in its own script because it is going to grow.

typst-css-to-props.lua is only a bare-bones implementation of the translator. It only handles tables and table cells, and only a handful of properties:

• font-family, font-sizebut not font shorthand
• background-color, (text) color but no synonyms
• vertical-align - Pandoc does horizontal text-align itself, and the writer coalesces Typst's align property.
• padding-{left,top,right,bottom} but not padding shorthand (skipping for now, see below)
• border-{left,top,right-bottom}-{width,color,style} but not shorthands like border, border-left, border-color

Pandoc also has support for Typst property output on divs and spans, but those are unused here so far.

Shorthands and more elements would require a little thought, particularly because Typst is statically typed and any mistakes lead to errors.

One nice thing about this design is that users can add their own filters if they want a property we don't support. I did all my development just using filters: in my notebook, and only integrated typst-css-to-props.lua today.

It needs tests in the FF matrix (I propose a top-level folder called CSS). Will write those today and push to this branch.

I don't propose to merge this until the next Pandoc release, just want to wrap it up while it's fresh in my mind.

[cscheid]

I didn't catch where this is supposed to go

I don't think we've decided that. IIRC we don't really have anything like it right now in the codebase. The natural place for it is somewhere inside src/resources because we add everything from that directory to the installers. For example, we have a src/resources/scripts directory. All it has right now is some old scripts that were needed when we were diagnosing cold startup times for deno.

[cscheid]

I think (but not sure) that the stream redirection you're using in io.popen might not work on Windows. It's probably safer to communicate through temporary files; there's Pandoc Lua APIs for that.

[gordonwoodhull]

Definitely not trivial to integrate this due to the weird lua-to-deno script execution.

I've switched to using pandoc.system.with_temporary_directory and a command line argument instead of redirection, and that also took care of cleaning up the temporary file.

There are 7 CSS properties as features in the matrix, with 8 tests.

Think I'm ready to put this down for now. Maybe we can figure out the remaining issues next week.

[gordonwoodhull]

I made the code at least somewhat portable by using QUARTO_DENO and QUARTO_ROOT, and most tests are passing.

However, QUARTO_DENO is only available with quarto render and not in tests, so I did something inexcusable that nonetheless works most of the time. I wonder if we could have QUARTO_DENO in tests?

EDIT: it may not be a bad idea to add QUARTO_DENO to the environment for tests (in run_tests.{sh/ps1}) but it's only needed because this invokes Deno directly instead of using quarto run, so fixing the import is probably a better solution.

Since the tests for these features are only in the feature-format matrix, it looks like I'm going to need to take a stab at a runner for matrix tests.

[gordonwoodhull]

I'm disabling the attempt at translating CSS padding to Typst inset because either

• it's hard to get right, or
• it may be surfacing some Typst bugs

Not sure what is happening, but we seem to end up with tiny or no padding/inset in some cases:

Looks better for now to just not do anything. Will revisit padding/inset after we merge this.

[gordonwoodhull]

Hurray, all tests pass with cleaned up imports and paths/env usage.

Remaining work:

• font shorthand(s)
• border shorthands
• more comprehensive color value translation
• color synonyms
• more defensive translation with failure mode of do nothing instead of possibly emitting invalid Typst (which will crash / fail, very unlike invalid CSS)

We're also waiting for the next Pandoc release.

[gordonwoodhull]

Subsumed by #9619