[GitHub] [echarts] htr3n opened a new issue #16127: ECharts server-side rendering SVG contains invalid font style specification

[GitBox]

htr3n opened a new issue #16127:
URL: https://github.com/apache/echarts/issues/16127


   ### Version
   5.2.2 (and 5.2.1)
   
   ### Reproduction link
   
[https://codesandbox.io/s/echarts-ssr-uxfju](https://codesandbox.io/s/echarts-ssr-uxfju)
   
   ### Steps to reproduce
   1. Create a server-side rendering of ECharts (5.2.2) with JsDOM and Node 
Canvas
   2. Configure to render a simple chart to SVG
   
   ```javascript
   const echarts = require('echarts');
   const { JSDOM } = require('jsdom');
   const { createCanvas } = require('canvas');
   const fs = require('fs');
   
   const config = {
     option: {
       animation: false,
       xAxis: {
         data: ['1493190351122']
       },
       yAxis: {
         name: 'Y Axis',
         type: 'value',
       },
       series: [
         {
           type: 'line',
           name: 'Series 1',
           data: [39],
         }
       ]
     },
   };
   
   function render() {
     const ctx = createCanvas(1920, 1080);
   
     if (ctx) {
       ctx.font = 'Arial';
     }
   
     echarts.setCanvasCreator(() => {
       return ctx;
     });
   
     const virtualDom = new JSDOM();
     global.window = virtualDom.window;
     global.document = virtualDom.window.document;
     const root = global.document.createElement('div');
     if (root) {
       root.style.cssText = 'width: 1920px; height: 1080px;';
       Object.defineProperty(root, 'clientWidth', { value: 1920 });
       Object.defineProperty(root, 'clientHeight', { value: 1080 });
       let chart = echarts.init(root, null, {
         width: 1920,
         height: 1080,
         renderer: 'svg',
       });
       if (chart) {
         chart.setOption(config.option);
         let result = root.querySelector('svg')?.outerHTML ?? null;
         chart.dispose();
         return result;
       }
     }
     return null;
   }
   
   const buffer = render();
   console.log(buffer);
   
   fs.writeFile(`output.svg`, buffer, function (err) {
     if (err) return console.log(err);
   });
   ```
   
   ### What is expected?
   The `<text>` elements inside the resulting SVG should have valid font 
specification inside `style=""`. 
   
   ```xml
   <text xml:space="preserve" style="font: normal sans-serif 12px;">
   ```
   
   ### What is actually happening?
   The SVG's `<text>` elements contain invalid font specification so that the 
SVG text will be rendered incorrectly.
   
   ```xml
   <text xml:space="preserve" style="font: sans-serif 12px normal normal normal 
12px;">
   ```
   
   ---
   Per CSS `font`  property (see 
https://developer.mozilla.org/en-US/docs/Web/CSS/font), it should be  
   
   ```
   [ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || 
<'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | 
caption | icon | menu | message-box | small-caption | status-bar
   ```
   
   I found this bug when I tried to configure the Y axis `nameTextStyle` to 
bold and small size and realised that the font styles and weight I set there do 
not affect the outcome at all. 
   
   This issue is only seen with server-side rendering. I use an identical 
configuration for a React front-end, it works fine, produces valid CSS.
   
   ```xml
   <text xml:space="preserve" fill="#101010" fill-opacity="1" stroke="none" 
transform="matrix(0,-1,1,0,27,122)" dominant-baseline="central" 
text-anchor="middle" x="0" y="-8.5" style="font: bold normal normal 12px 
Arial;">Axis Title</text>
   ```
   
   <!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
   <!-- This issue is in English. DO NOT REMOVE -->


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org