typst: generic font families / font stack aliases

this is a minimal implementation using Noto Sans as the sans-serif font
and the built-in Typst fonts for serif, math, monospace

each has a synonym, e.g. ui-sans-serif

other generic font families could be added
and we could ship fonts to replace the built-in Typst fonts

fixes #11683 "big numbers"

i can't figure out a way to automate this test
but we should have it for visual testing

Author: gordonwoodhull

dev-docs/feature-format-matrix/qmd-files/css-properties/font-family/document.qmd

@@ -19,7 +19,7 @@ _quarto:
     typst:
       ensureTypstFileRegexMatches:
         -
-          - '#set text\(font: \("Georgia", "serif"\)\); #table\('
+          - '#{set text\(font: \("Georgia", "Libertinus Serif"\)\); table\('
         - []
 ---
 

dev-docs/feature-format-matrix/qmd-files/css-properties/font-family/generic-font-families.qmd

@@ -0,0 +1,54 @@
+---
+format:
+  html:
+    quality: 1
+  pdf:
+    quality: na
+  typst:
+    quality: 2
+    comment: "table only"
+    include-in-header:
+      text: |
+        #set text(fallback: false)
+  dashboard:
+    quality: 1
+  docx:
+    quality: na
+  pptx:
+    quality: na
+keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - '#{set text\(font: \("Libertinus Serif"\)\); table\('
+          - '#show heading: set text\(font: "Noto Sans", \)'
+          - '#show raw.where\(block: true\): set text\(font: "DejaVu Sans Mono", \)'
+        - []
+      ensurePdfRegexMatches:
+        -
+          - 'heading is noto sans'
+          - 'base is libertinus serif'
+          - 'code should appear in a monospace font'
+        - []
+brand:
+  typography:
+    base: serif
+    headings: sans-serif
+    monospace: monospace
+---
+# heading is `#context text.font`{=typst}
+
+base is `#context text.font`{=typst}
+
+```{=html}
+<table style="font-family: serif;">
+    <tr><td>A</td><td>B</td></tr>
+</table>
+```
+
+```
+// This code should appear in a monospace font
+```
+

src/command/render/pandoc.ts

@@ -21,6 +21,7 @@ import { Document } from "../../core/deno-dom.ts";
 import { execProcess } from "../../core/process.ts";
 import { dirAndStem, normalizePath } from "../../core/path.ts";
 import { mergeConfigs } from "../../core/config.ts";
+import { quartoConfig } from "../../core/quarto.ts";
 
 import {
   Format,
@@ -1601,6 +1602,9 @@ async function resolveExtras(
       }
       fontdirs.add(font_cache);
     }
+    const srcDir = Deno.env.get("QUARTO_SRC_PATH") ||
+        join(quartoConfig.sharePath(), "../../src");
+    fontdirs.add(join(srcDir,'resources/fonts'));
     let fontPaths = format.metadata[kFontPaths] as Array<string> || [];
     if (typeof fontPaths === "string") {
       fontPaths = [fontPaths];

src/resources/filters/modules/typst_css.lua

@@ -551,7 +551,7 @@ local function output_length(length, warnings)
   if not csf then
     output_warning(warnings, 'unit ' .. length.unit .. ' is not supported in ' .. length.csslen )
     return nil
-  end 
+  end
   return csf(length.value, length.unit, length.csslen, warnings)
 end
 
@@ -595,6 +595,10 @@ local function quote(s)
   return '"' .. s .. '"'
 end
 
+local function dequote(s)
+  return s:gsub('^["\']', ''):gsub('["\']$', '')
+end
+
 local same_weights = {
   'thin',
   'light',
@@ -636,6 +640,36 @@ local function translate_font_weight(w, warnings)
   end
 end
 
+local generic_font_families = {
+  ['sans-serif'] = 'Noto Sans',
+  serif = 'Libertinus Serif',
+  math = 'New Computer Modern Math',
+  monospace = 'DejaVu Sans Mono',
+}
+
+local gff_synonyms = {
+  ['ui-sans-serif'] = 'sans-serif',
+  ['system-ui'] = 'sans-serif',
+  ['ui-serif'] = 'serif',
+  ['ui-monospace'] = 'monospace'
+}
+
+local function translate_font_family(ff)
+  ff = gff_synonyms[ff] or ff
+  return generic_font_families[ff] or ff
+end
+
+local function translate_font_family_list(sl)
+  local strings = {}
+  for s in sl:gmatch('([^,]+)') do
+    s = dequote(trim(s))
+    s = translate_font_family(s)
+    table.insert(strings, quote(s))
+  end
+  return '(' .. table.concat(strings, ', ') ..')'
+end
+
+
 local function translate_border_style(v, _warnings)
   local dash
   if v == 'none' then
@@ -762,6 +796,8 @@ return {
   translate_border_style = translate_border_style,
   translate_border_color = translate_border_color,
   translate_font_weight = translate_font_weight,
+  translate_font_family = translate_font_family,
+  translate_font_family_list = translate_font_family_list,
   consume_width = consume_width,
   consume_style = consume_style,
   consume_color = consume_color

src/resources/filters/quarto-post/typst-brand-yaml.lua

@@ -117,7 +117,7 @@ function render_typst_brand_yaml()
         if headings and next(headings) then
             quarto.doc.include_text('in-header', table.concat({
               '#show heading: set text(',
-              conditional_entry('font', headings.family),
+              conditional_entry('font', _quarto.modules.typst.css.translate_font_family(headings.family)),
               conditional_entry('weight', _quarto.modules.typst.css.translate_font_weight(headings.weight)),
               conditional_entry('style', headings.style),
               conditional_entry('fill', headings.color, false),
@@ -138,7 +138,7 @@ function render_typst_brand_yaml()
         if monospaceInline and next(monospaceInline) then
             quarto.doc.include_text('in-header', table.concat({
               '#show raw.where(block: false): set text(',
-              conditional_entry('font', monospaceInline.family),
+              conditional_entry('font', _quarto.modules.typst.css.translate_font_family(monospaceInline.family)),
               conditional_entry('weight', _quarto.modules.typst.css.translate_font_weight(monospaceInline.weight)),
               conditional_entry('size', monospaceInline.size, false),
               conditional_entry('fill', monospaceInline.color, false),
@@ -157,7 +157,7 @@ function render_typst_brand_yaml()
         if monospaceBlock and next(monospaceBlock) then
           quarto.doc.include_text('in-header', table.concat({
             '#show raw.where(block: true): set text(',
-            conditional_entry('font', monospaceBlock.family),
+            conditional_entry('font', _quarto.modules.typst.css.translate_font_family(monospaceBlock.family)),
             conditional_entry('weight', _quarto.modules.typst.css.translate_font_weight(monospaceBlock.weight)),
             conditional_entry('size', monospaceBlock.size, false),
             conditional_entry('fill', monospaceBlock.color, false),
@@ -309,7 +309,7 @@ function render_typst_brand_yaml()
       local base = _quarto.modules.brand.get_typography(brandMode, 'base')
       if base and next(base) then
         meta.brand.typography.base = {
-          family = base.family,
+          family = _quarto.modules.typst.css.translate_font_family(base.family),
           size = base.size,
         }
       end
@@ -324,7 +324,7 @@ function render_typst_brand_yaml()
         local weight = _quarto.modules.typst.css.translate_font_weight(headings.weight or base.weight)
         weight = weight and pandoc.RawInline('typst', tostring(quote_string(weight)))
         meta.brand.typography.headings = {
-          family = headings.family or base.family,
+          family = _quarto.modules.typst.css.translate_font_family(headings.family or base.family),
           weight = weight,
           style = headings.style or base.style,
           decoration = headings.decoration or base.decoration,

src/resources/filters/quarto-post/typst-css-property-processing.lua

@@ -32,14 +32,6 @@ function render_typst_css_property_processing()
     end
   end
 
-  local function dequote(s)
-    return s:gsub('^["\']', ''):gsub('["\']$', '')
-  end
-
-  local function quote(s)
-    return '"' .. s .. '"'
-  end
-
   local function translate_vertical_align(va)
     if va == 'top' then
       return 'top'
@@ -270,15 +262,6 @@ function render_typst_css_property_processing()
     end
     return span
   end
-
-  local function translate_string_list(sl)
-    local strings = {}
-    for s in sl:gmatch('([^,]+)') do
-      s = s:gsub('^%s+', '')
-      table.insert(strings, quote(dequote(s)))
-    end
-    return '(' .. table.concat(strings, ', ') ..')'
-  end
 
   return {
     Table = function(tab)
@@ -289,7 +272,7 @@ function render_typst_css_property_processing()
         for clause in tabstyle:gmatch('([^;]+)') do
           local k, v = to_kv(clause)
           if k == 'font-family' then
-            tab.attributes['typst:text:font'] = translate_string_list(v)
+            tab.attributes['typst:text:font'] = _quarto.format.typst.css.translate_font_family_list(v)
             has_typst_text = true
           end
           if k == 'font-size' then