'font' CSS shorthand property ignored in SVG 'text' elements

febdoctor commented 1 month ago

The font properties set via a 'font' CSS shorthand property seem to be totally ignored when rendering text elements inside SVG images.

Here is a minimal SVG to reproduce the issue:

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 400 400">

<style>
   .octl text {
         font: 7mm cursive;
          fill: purple;
          stroke: white;
          stroke-width: 0.1mm;
          stroke-linecap: butt;
          stroke-linejoin: miter;
   }

    line {
        stroke: black;
    }
</style>
<g class="octl">
<text class="octl" x="7mm" y="7mm">Text 14mm in cursive.</text>
<line x1="7mm" y1="7mm" x2="7mm" y2="0mm" />
<line x1="7mm" y1="10mm" x2="14mm" y2="10mm" />
</g>
</svg>

It renders well in the PDF from Firefox:

screenshot_firefox

But Weasyprint uses default font family and size:

screenshot_weasyprint

font1-firefox.svg.pdf font1-weasyprint.svg.pdf

febdoctor commented 1 month ago

Replacing the "font" CSS property by specific properties like "font-size" and "font-family" works. This can be used as a workaround.

liZe commented 1 month ago

Hi, and thanks for the report!

This missing feature is caused by the dirty code used for SVG attributes management. We should use the real validated and computed values of SVG attributes and take care of font here:

https://github.com/Kozea/WeasyPrint/blob/a5d8412d0f11e815db31652fdd88fed2fecfeb66/weasyprint/svg/text.py#L27-L43

Kozea / WeasyPrint

'font' CSS shorthand property ignored in SVG 'text' elements #2255