I'm working on a node.js microservice that uses Mathjax to convert equations into SVGs so that they can be used by PrinceXML when generating PDFs. The code is here:

https://github.com/pressbooks/pb-mathjax

I'm having trouble controlling the size of the equations in relationship to the surrounding text. I set "Blacker:0" as described here [1] and saw some improvement but would like more help.

Given that the SVGs included in the testcase.zip file are what's generated by MathJax, and given that I am embedding them using <img> tags, does anyone have any tips to make them look more like they belong in the text?

[1] https://www.princexml.com/forum/topic/4116/svg-output-differs-between-browser-and-prince

1. testcase-screenshot.png‎ 43.9 kB ‎
   Screenshot
2. testcase.zip‎ 716.8 kB ‎
   XHTML, CSS, SVG Files

It's hard to tell what's going on here without seeing the MathJax configuration which is used to generate the SVGs. MathJax has a ton of configuration options which control the look of the supported output formats. For SVG one of them is mtextFontInherit which tries to adapt the font size of the generated formulas to the surrounding text. mathjax-node can only rely on a DOM implementation (jsdom) but not on a browser-like layout engine, so any size calculations that MathJax may have to do probably won't be as exact as if MathJax would be running in a browser. It's well possible that the MathJax configuration has to be tweaked for every type of (your) document(s).

You could also look at this thread for some more information.

Thanks for the insights.

I've improved the pb-mathjax microservice to support all the available fonts.(TeX, STIX-Web, Asana-Math, Neo-Euler, Gyre-Pagella, Gyre-Termes and Latin-Modern) [1] This lets the user pick a different font if they don't like the default. Not a great solution, but better than before.

Now, I have a different problem!

STIX-Web font has trouble rendering SVG in PDF format and winds up turning a lot of characters into question marks.

Attached are files and screenshots showing the issue. Any ideas for this follow up question?


[1] http://docs.mathjax.org/en/latest/options/output-processors/SVG.html#configure-svg

1. Math-Jax-Sprint-1561910818._print.pdf‎ 420.6 kB
2. SVG-In-Chrome.png‎ 96.7 kB
3. SVG-In-Prince.png‎ 62.0 kB
4. equation.svg‎ 2.2 kB

In the MathJax output there are the letters 𝑝 𝐹 and 𝑡 and the font used by MathJax for it is monospace. Obviously this monospace font (which will be used by Prince) lacks these characters. I took a look at imageGenerator.js, it could be possible that you have to use double quotes in the SVG section of your mathJaxConfig Object (eg. font: "STIX-Web"), but I'm not sure.

This is an excerpt of my configuration for SVG:

MathJax.Hub.Config({
  // Tex input, SVG output
  jax: ["input/TeX", "output/SVG"],
  extensions: ["tex2jax.js"], // default
  showProcessingMessages: false,
  messageStyle: "none",
  displayAlign: "center", // default
  positionToHash: false, // default true
  showMathMenu: false,
  tex2jax: {
    inlineMath: [ ["$","$"], ["\\(","\\)"] ],
    displayMath: [ ["$$","$$"], ["\\[","\\]"] ]
  },
  TeX: {
    // Load all extensions by default (includes, for example, chemistry)
    extensions: ["autoload-all.js"],
    equationNumbers: {
      autoNumber: "AMS", // default "none"
    }
  },
  SVG: {
    font: "TeX",
    //font: "STIX-Web",
    //font: "Asana-Math",
    //font: "Gyre-Pagella",
    //font: "Gyre-Termes",
    //font: "Latin-Modern",
    //font: "Neo-Euler",
    scale: 90, // default 100
    blacker: 0, // default 10
    mtextFontInherit: true, // default false
    //matchFontHeight: false, // default true
    EqnChunk: 200,
    EqnChunkFactor: 1.5,
    EqnChunkDelay: 100
  }
});

Thanks for the feedback. I don't think double quotes in the JSON config are the issue. if I generate using STIX-Web, the source of the SVG contains ids made up of: STIXWEBNORMALB. If I generate using TeX it's MJMATHI. Because the SVG is mostly strokes then I'm confident that these are working as intended. I think "monospace" is the culprit here, but I'd like to more discussion around this idea:

> Obviously this monospace font (which will be used by Prince) lacks these characters.

Why? This is a fallback font. It's not specifying a font called monospace, but rather any font that is monospace; the generic family name. The code is:

`<text font-family="monospace" font-style="italic" font-weight="bold" stroke="none" transform="scale(71.759) matrix(1 0 0 -1 0 0)">𝑝</text>`

Are you saying that the unusual `𝑝` (not ASCII) is not available in Prince's fallback monospace font?

I did some tests and I think you are right. Simply putting `<span font-family="monospace" font-style="italic" font-weight="bold">𝑝</span>` or even `<p>𝑝</p>` directly in the HTML document (not even in the SVG) is giving me the same results when exporting a PDF.

I find this strange... Is this expected?

> I did some tests

Some clarification. Inline HTML test didn't work in DocRaptor. Works in Prince...

The latest build of Prince now supports MathJax 3, as demonstrated here.