typst css: font-weight and font-style

Author: gordonwoodhull

dev-docs/feature-format-matrix/qmd-files/css-properties/font-style/div-font-style-italic.qmd

@@ -0,0 +1,32 @@
+---
+format:
+  html:
+    quality: 1
+  pdf:
+    quality: na
+  typst:
+    quality: 2
+    comment: "td, span only"
+  dashboard:
+    quality: 1
+  docx:
+    quality: na
+  pptx:
+    quality: na
+keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - '#block\[\s*#set text\(style: "italic"\); Italic div\s*\]'
+        - []
+---
+
+::: {style="font-style: italic"}
+
+Italic div
+
+:::
+
+

dev-docs/feature-format-matrix/qmd-files/css-properties/font-style/td-font-style-italic.qmd

@@ -0,0 +1,31 @@
+---
+format:
+  html:
+    quality: 1
+  pdf:
+    quality: na
+  typst:
+    quality: 2
+    comment: "td, span only"
+  dashboard:
+    quality: 1
+  docx:
+    quality: na
+  pptx:
+    quality: na
+keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - '\[#set text\(style: "italic"\); B\]'
+        - []
+---
+
+```{=html}
+<table>
+    <tr><td>A</td><td style="font-style: italic;">B</td></tr>
+</table>
+```
+

dev-docs/feature-format-matrix/qmd-files/css-properties/font-style/td-font-style-normal.qmd

@@ -0,0 +1,31 @@
+---
+format:
+  html:
+    quality: 1
+  pdf:
+    quality: na
+  typst:
+    quality: 2
+    comment: "td, span only"
+  dashboard:
+    quality: 1
+  docx:
+    quality: na
+  pptx:
+    quality: na
+keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - '\[#set text\(style: "normal"\); B\]'
+        - []
+---
+
+```{=html}
+<table>
+    <tr><td>A</td><td style="font-style: normal;">B</td></tr>
+</table>
+```
+

dev-docs/feature-format-matrix/qmd-files/css-properties/font-style/td-font-style-oblique.qmd

@@ -0,0 +1,31 @@
+---
+format:
+  html:
+    quality: 1
+  pdf:
+    quality: na
+  typst:
+    quality: 2
+    comment: "td, span only"
+  dashboard:
+    quality: 1
+  docx:
+    quality: na
+  pptx:
+    quality: na
+keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - '\[#set text\(style: "oblique"\); B\]'
+        - []
+---
+
+```{=html}
+<table>
+    <tr><td>A</td><td style="font-style: oblique;">B</td></tr>
+</table>
+```
+

dev-docs/feature-format-matrix/qmd-files/css-properties/font-weight/div-font-weight-demi-bold.qmd

@@ -0,0 +1,32 @@
+---
+format:
+  html:
+    quality: 1
+  pdf:
+    quality: na
+  typst:
+    quality: 2
+    comment: "td, span only"
+  dashboard:
+    quality: 1
+  docx:
+    quality: na
+  pptx:
+    quality: na
+keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - '#block\[\s*#set text\(weight: "semibold"\); Demi-bold div\s*\]'
+        - []
+---
+
+::: {style="font-weight: demi-bold"}
+
+Demi-bold div
+
+:::
+
+

dev-docs/feature-format-matrix/qmd-files/css-properties/font-weight/td-font-weight-bold.qmd

@@ -0,0 +1,31 @@
+---
+format:
+  html:
+    quality: 1
+  pdf:
+    quality: na
+  typst:
+    quality: 2
+    comment: "td, span only"
+  dashboard:
+    quality: 1
+  docx:
+    quality: na
+  pptx:
+    quality: na
+keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - '\[#set text\(fill: rgb\(255, 0, 255\)\); B\]'
+        - []
+---
+
+```{=html}
+<table>
+    <tr><td>A</td><td style="color: magenta;">B</td></tr>
+</table>
+```
+

dev-docs/feature-format-matrix/qmd-files/css-properties/font-weight/td-font-weight-ultra-light.qmd

@@ -0,0 +1,31 @@
+---
+format:
+  html:
+    quality: 1
+  pdf:
+    quality: na
+  typst:
+    quality: 2
+    comment: "td, span only"
+  dashboard:
+    quality: 1
+  docx:
+    quality: na
+  pptx:
+    quality: na
+keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - '\[#set text\(weight: "extralight"\); B\]'
+        - []
+---
+
+```{=html}
+<table>
+    <tr><td>A</td><td style="font-weight: ultra-light;">B</td></tr>
+</table>
+```
+

src/resources/filters/modules/typst_css.lua

@@ -598,40 +598,39 @@ end
 local same_weights = {
   'thin',
   'light',
-  'normal',
   'regular',
   'medium',
   'bold',
   'black',
 }
 
 local weight_synonyms = {
+  ['normal'] = 'regular',
   ['ultra-light'] = 'extra-light',
   ['demi-bold'] = 'semi-bold',
   ['ultra-bold'] = 'extra-bold',
 }
 
 local dashed_weights = {
   'extra-light',
-  'ultra-light',
   'semi-bold',
-  'demi-bold',
   'extra-bold',
-  'ultra-bold',
 }
 
 local function translate_font_weight(w, warnings)
   if not w then return nil end
   local num = tonumber(w)
   if num and 1 <= num and num <= 1000 then
     return num
-  elseif tcontains(same_weights, w) then
+  end
+  w = weight_synonyms[w] or w
+  if tcontains(same_weights, w) then
     return w
-  elseif tcontains(dashed_weights, w) then
-    w = weight_synonyms[w] or w
+  end
+  if tcontains(dashed_weights, w) then  
     return w:gsub('-', '')
   else
-    output_warning(warnings, 'invalid font weight ' .. tostring(w))
+    output_warning(null, 'invalid font weight ' .. tostring(w))
     return nil
   end
 end
@@ -770,6 +769,8 @@ local function expand_side_shorthand(items, context, warnings)
 end
 
 return {
+  quote = quote,
+  dequote = dequote,
   set_brand_mode = set_brand_mode,
   parse_color = parse_color,
   parse_opacity = parse_opacity,

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

@@ -170,6 +170,10 @@ function render_typst_css_property_processing()
           opacity = _quarto.format.typst.css.parse_opacity(v, _warnings)
         elseif k == 'font-size' then
           cell.attributes['typst:text:size'] = _quarto.format.typst.css.translate_length(v, _warnings)
+        elseif k == 'font-weight' then
+          cell.attributes['typst:text:weight'] = _quarto.format.typst.css.quote(_quarto.format.typst.css.translate_font_weight(v, _warnings))
+        elseif k == 'font-style' then
+          cell.attributes['typst:text:style'] = _quarto.format.typst.css.quote(v)
         elseif k == 'vertical-align' then
           local a = translate_vertical_align(v)
           if a then table.insert(aligns, a) end
@@ -306,6 +310,10 @@ function render_typst_css_property_processing()
             div.attributes['typst:text:font'] = _quarto.format.typst.css.translate_font_family_list(v)
           elseif k == 'font-size' then
             div.attributes['typst:text:size'] = _quarto.format.typst.css.translate_length(v, _warnings)
+          elseif k == 'font-weight' then
+            div.attributes['typst:text:weight'] = _quarto.format.typst.css.quote(_quarto.format.typst.css.translate_font_weight(v, _warnings))
+          elseif k == 'font-style' then
+            div.attributes['typst:text:style'] = _quarto.format.typst.css.quote(v)
           elseif k == 'background-color' then
             div.attributes['typst:fill'] = _quarto.format.typst.css.output_color(_quarto.format.typst.css.parse_color(v, _warnings), nil, _warnings)
           elseif k == 'color' then

tests/docs/smoke-all/typst/gt-islands.qmd

@@ -11,7 +11,7 @@ _quarto:
   tests:
     typst:
       ensureTypstFileRegexMatches:
-        - ['#set text\(size: 1.25em , fill: rgb\("#333333"\)\); Large Landmasses of the World']
+        - ['#set text\(size: 1\.25em , weight: "regular" , fill: rgb\("#333333"\)\); Large Landmasses of the World']
         - []
 ---