Search code examples
javascriptnode.jssvgmathjax

MathJax not rendering column lines in an array

I'm running MathJax on the server side with Node, because I need to render math expressions into SVGs. However, a feature I really need, column lines in arrays - useful for augmented matrices - don't render correctly when converting to SVG, even though they do when directly rendering to HTML.

Here's a minimal example:

import fs from "fs";

const MathJax = await (await import("mathjax")).init({
    loader: {
        load: ['input/tex', 'output/svg']
    },
});

const mathExpression = String.raw`\left(\begin{array}{cc|c}  
 2 & 0 & 1\\  
 0 & 1 & 1
\end{array}\right)`;

const renderedSvg = MathJax.startup.adaptor.innerHTML(
    MathJax.tex2svg(mathExpression)
);

fs.writeFileSync("test.svg", renderedSvg);

Here's how that TeX is supposed to look, as rendered by TeX and even by MathJax in HTML:

correctly rendered expression

Here's how it actually shows up in SVG:

incorrectly rendered expression

What's especially odd is that there is an almost imperceptible but definitely present amount of extra whitespace where the column line is supposed to be in the SVG, which means it's certainly doing something. But I don't quite know what and why the actual line does not render.

Here's the actual, raw SVG output: https://pastebin.com/raw/JXVefkft

Solution

  • Adding the following styling information to the file

    <style>
.mjx-solid {
  stroke-width: 80px;
}
</style>

    makes the vertical line visible for me. You can make the stroke-width bigger or smaller to make the line more or less visible.