Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading