Thursday, 4 May 2017

how to change font-style and font-size in SVG output from Mathjax-node?

I would like to set a different font-style and different font-size in SVG output, I am using MathJax-Node for this and I am currently doing this locally without any server, I can create SVG output from MathML as input but unable to set the font side (sorry I am new to MathJax) also it would be great to know how to scale the SVG output as its not working either

The input is :

<math xmlns="http://www.w3.org/1998/Math/MathML" alttext="math equation" display="inline" altimg-width="467" altimg-height="25" altimg="../images/altmath_5579.png"><mo>⤹</mo><mo>+</mo><mo>Σ</mo><msub><mi>M</mi><mrow><mi>A</mi></mrow></msub><mo>=</mo><mn>0</mn><mo>;</mo><mspace width="10pt"/><mo>(</mo><mn>900</mn><mspace width="0.33em"/><mi mathvariant="normal">l</mi><mi mathvariant="normal">b</mi><mo>)</mo><mo>(</mo><mn>2</mn><mspace width="0.33em"/><mi mathvariant="normal">f</mi><mi mathvariant="normal">t</mi><mo>)</mo><mo>−</mo><mo>(</mo><msub><mi>F</mi><mrow><mi>B</mi><mi>D</mi></mrow></msub><mspace width="0.33em"/><mi mathvariant="normal">s</mi><mi mathvariant="normal">i</mi><mi mathvariant="normal">n</mi><mspace width="0.33em"/><mn>30</mn><mo>°</mo><mo>)</mo><mspace width="0.33em"/><mn>10</mn><mspace width="0.33em"/><mi mathvariant="normal">f</mi><mi mathvariant="normal">t</mi><mo mathvariant="normal">=</mo><mn>0</mn></math>

And my JS file is :

const fs = require("fs"),
mjAPI = require("mathjax-node"),
svgexport = require('svgexport');
var yourMath;

mjAPI.config ({
  MathJax : {
      SVG : {
          scale: 120,
          font : "STIX-Web",
          undefinedFamily:"'Arial Unicode MS',serif",
          addMMLclasses: true
      }
  },
  displayErrors : true,
  displayMessages : false
});
mjAPI.start();

yourMath = '<math xmlns="http://www.w3.org/1998/Math/MathML" alttext="math equation" display="inline" altimg-width="467" altimg-height="25" altimg="../images/altmath_5579.png"><mo>⤹</mo><mo>+</mo><mo>Σ</mo><msub><mi>M</mi><mrow><mi>A</mi></mrow></msub><mo>=</mo><mn>0</mn><mo>;</mo><mspace width="10pt"/><mo>(</mo><mn>900</mn><mspace width="0.33em"/><mi mathvariant="normal">l</mi><mi mathvariant="normal">b</mi><mo>)</mo><mo>(</mo><mn>2</mn><mspace width="0.33em"/><mi mathvariant="normal">f</mi><mi mathvariant="normal">t</mi><mo>)</mo><mo>−</mo><mo>(</mo><msub><mi>F</mi><mrow><mi>B</mi><mi>D</mi></mrow></msub><mspace width="0.33em"/><mi mathvariant="normal">s</mi><mi mathvariant="normal">i</mi><mi mathvariant="normal">n</mi><mspace width="0.33em"/><mn>30</mn><mo>°</mo><mo>)</mo><mspace width="0.33em"/><mn>10</mn><mspace width="0.33em"/><mi mathvariant="normal">f</mi><mi mathvariant="normal">t</mi><mo mathvariant="normal">=</mo><mn>0</mn></math>';

mjAPI.typeset({
  math: yourMath,
  format: "MathML",
  svg:true,
}, function (data) {
  if (!data.errors) {
    fs.writeFile("test.svg", data.svg, function(err){
      if(err){
        return console.log(err);
      }
      console.log('File saved !');
    });
  }

  var mJSON = [{"input":["test.svg"],"output":["123.png"],"quality":["100%"]}];
  svgexport.render(mJSON, function(err){
    console.log(err);
  });
});

So what I need is :

  1. Need to change the font-style in SVG output
  2. Need to change the font size in SVG output

Kindly anybody suggest

Thanks



via Elambarathi Vimal Kannan

No comments:

Post a Comment