mathvariant=Monospace produces bold letters

[dmmargarint]

Issue Summary

The mathvariant="monospace" mtext renders the letters in a bolder fashion, making them stand out and prone to be misinterpreted as intentionally bold letters, e.g. vector notations.

Steps to Reproduce:

Add the following mathML inside math> mrow > mtable > mtr > mtd > mstyle
<msub> <mrow> <mtext mathvariant="monospace">SN</mtext> </mrow> </msub>

Technical details:

• MathJax Version: 4.1.2
• Client OS: Mac OS 26.3.1
• Browser: Chrome, Build 147.0.7727.138

I am using the following MathJax configuration:

         ...  
        displayOverflow: 'linebreak',
        font: 'mathjax-tex',
        mathmlSpacing: true,
        linebreaks: {
          inline: true,
          width: /Firefox/.test(navigator.userAgent) ? '40%' : '90%',
          lineleading: 0.2,
          LinebreakVisitor: null,
        },
      }

and loading MathJax via

<script src="'https://cdn.jsdelivr.net/npm/mathjax@4.1.2/mml-chtml.js"></script>

Supporting information:

In the following equation the letters SN, TN and Lick are all monospace.

Link to live article: https://elifesciences.org/articles/95802

[dpvc]

The monospace variant uses the characters from the monospace section of the Math Alphanumerics block of the New Computer Modern font, so this is the set of characters their font designers have specified to be used in this case.

Here is part of your expression in actual LaTeX, using Computer Modern fonts:

This is MathJax's output with its default mathjax-newcm font:

The New Computer Modern font is a bit more bold overall than the original Computer Modern font, but is very much in line with the LaTeX output. Here is MathJax's output using mathjax-modern, based on the Latin Modern font:

which is nearly identical to the actual LaTeX output.

So this is the expected output for MathJax for the expression you have given in the default MathJax font. Note, however, that there are several fonts that you could choose from, and some of the others have monospaced characters that are balanced with the other characters. For example, the mathjax-stix2 font

might be more to your liking.

Alternatively, you could specify a different font using something like

<mi style="font-family:courier new">TN</mi>

giving you

though this is less efficient, and can produce poorer placement of in some cases (like superscripts), since MathJax doesn't have the bounding box information about the courier new font. If you want to go this route, it would be possible to use a MathJax MathML filter that would replace mathvariant="monospace" with style="font-family: courier new" automatically; it could be included as part of your MathJax configuration.

[dpvc]

PS, I note that the line breaking in the expression you give in your image produces output that is deceptive, since the first column seems to extend over the equal sign making it elide with the second column, so the expression appears to be

... \mathbf{Z}_{i,j,l}, \beta_0(s) + ...

rather than

... \mathbf{Z}_{i,j,l}, \gama_{i,l}(s)] = ...

This is because the equal sign is at the end of the entry in the first column rather than at the beginning of the second column, where it is usually placed in LaTeX alignments. Because the first column is right aligned while the second is left aligned, with a column spacing of 0em, that means that when the first column has a line break (as it does here), the first line of that column will butt up against the second column, and they will appear to be part of the same expression.

Removing <mo>=</mo><mspace width="thinmathspace"></mspace>, from the first column and adding <mi></mi><mo>=</mo> to the beginning of the second column will improve this situation. But to get a better alignment between the two columns, you should add data-break-align="bottom top" to the mtable so that the alignment between the two columns will have the bottom of the first column aligned with the top of the second.

Since you are doing automatic line breaking, it would be best to not force the line break after the plus sign on the right, because that is a bit too far to the right, and MathJax has to break before that. That moves one term to the next line, but the forced line break causes that second line to be shorter than needed, leading to an awkward break. Removing that line break (that is, only using one table row, so removing

          </mstyle>
        </mtd>
      </mtr>
      <mtr>
        <mtd>
          <mstyle displaystyle="true" scriptlevel="0"></mstyle>
        </mtd>
        <mtd>

and just letting MathJax do the breaking should lead to a better result:

This is from the MathML

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <mrow>
    <mtable columnalign="right left" columnspacing="0em 2em" displaystyle="true" rowspacing="3pt" data-break-align="bottom top">
      <mtr>
        <mtd>
          <mstyle displaystyle="true" scriptlevel="0">
            <mrow>
              <mi mathvariant="double-struck">E</mi>
            </mrow>
            <mrow>
              <mo>[</mo>
              <mrow>
                <msub>
                  <mrow>
                    <mi>Y</mi>
                  </mrow>
                  <mrow>
                    <mi>i</mi>
                    <mo>,</mo>
                    <mi>j</mi>
                    <mo>,</mo>
                    <mi>l</mi>
                  </mrow>
                </msub>
                <mo stretchy="false">(</mo>
                <mi>s</mi>
                <mo stretchy="false">)</mo>
                <mspace width="thinmathspace"></mspace>
                <mrow>
                  <mo maxsize="1.2em" minsize="1.2em">|</mo>
                </mrow>
                <mspace width="thinmathspace"></mspace>
                <msub>
                  <mrow>
                    <mi mathvariant="bold">X</mi>
                  </mrow>
                  <mrow>
                    <mi>i</mi>
                    <mo>,</mo>
                    <mi>j</mi>
                    <mo>,</mo>
                    <mi>l</mi>
                  </mrow>
                </msub>
                <mo>,</mo>
                <msub>
                  <mrow>
                    <mi mathvariant="bold">Z</mi>
                  </mrow>
                  <mrow>
                    <mi>i</mi>
                    <mo>,</mo>
                    <mi>j</mi>
                    <mo>,</mo>
                    <mi>l</mi>
                  </mrow>
                </msub>
                <mo>,</mo>
                <msub>
                  <mi mathvariant="bold-italic">&#x3B3;</mi>
                  <mrow>
                    <mi>i</mi>
                    <mo>,</mo>
                    <mi>l</mi>
                  </mrow>
                </msub>
                <mo stretchy="false">(</mo>
                <mi>s</mi>
                <mo stretchy="false">)</mo>
              </mrow>
              <mo>]</mo>
            </mrow>
          </mstyle>
        </mtd>
        <mtd>
          <mstyle displaystyle="true" scriptlevel="0">
            <mi></mi>
            <mo>=</mo>
            <msub>
              <mi>&#x3B2;</mi>
              <mn>0</mn>
            </msub>
            <mo stretchy="false">(</mo>
            <mi>s</mi>
            <mo stretchy="false">)</mo>
            <mo>+</mo>
            <msub>
              <mi>&#x3B2;</mi>
              <mn>1</mn>
            </msub>
            <mo stretchy="false">(</mo>
            <mi>s</mi>
            <mo stretchy="false">)</mo>
            <msub>
              <mrow>
                <mtext mathvariant="monospace">SN</mtext>
              </mrow>
              <mrow>
                <mi>i</mi>
                <mo>,</mo>
                <mi>l</mi>
              </mrow>
            </msub>
            <mo>+</mo>
            <msub>
              <mi>&#x3B2;</mi>
              <mn>2</mn>
            </msub>
            <mo stretchy="false">(</mo>
            <mi>s</mi>
            <mo stretchy="false">)</mo>
            <msub>
              <mrow>
                <mtext mathvariant="monospace">TN</mtext>
              </mrow>
              <mrow>
                <mi>i</mi>
                <mo>,</mo>
                <mi>j</mi>
                <mo>,</mo>
                <mi>l</mi>
              </mrow>
            </msub>
            <mo>+</mo>
            <msub>
              <mi>&#x3B3;</mi>
              <mrow>
                <mn>0</mn>
                <mo>,</mo>
                <mi>i</mi>
              </mrow>
            </msub>
            <mo stretchy="false">(</mo>
            <mi>s</mi>
            <mo stretchy="false">)</mo>
            <mo>+</mo>
            <msub>
              <mi>&#x3B3;</mi>
              <mrow>
                <mn>1</mn>
                <mo>,</mo>
                <mi>i</mi>
                <mo>,</mo>
                <mi>l</mi>
              </mrow>
            </msub>
            <mo stretchy="false">(</mo>
            <mi>s</mi>
            <mo stretchy="false">)</mo>
            <mo>+</mo>
            <msub>
              <mrow>
                <mtext mathvariant="monospace">Lick</mtext>
              </mrow>
              <mrow>
                <mi>i</mi>
                <mo>,</mo>
                <mi>j</mi>
                <mo>,</mo>
                <mi>l</mi>
              </mrow>
            </msub>
            <mrow>
              <mo>[</mo>
              <mrow>
                <msub>
                  <mi>&#x3B3;</mi>
                  <mrow>
                    <mn>2</mn>
                    <mo>,</mo>
                    <mi>i</mi>
                  </mrow>
                </msub>
                <mo stretchy="false">(</mo>
                <mi>s</mi>
                <mo stretchy="false">)</mo>
                <mo>+</mo>
                <msub>
                  <mi>&#x3B3;</mi>
                  <mrow>
                    <mn>3</mn>
                    <mo>,</mo>
                    <mi>i</mi>
                    <mo>,</mo>
                    <mi>l</mi>
                  </mrow>
                </msub>
                <mo stretchy="false">(</mo>
                <mi>s</mi>
                <mo stretchy="false">)</mo>
              </mrow>
              <mo>]</mo>
            </mrow>
            <mo>.</mo>
          </mstyle>
        </mtd>
      </mtr>
    </mtable>
  </mrow>
</math>

The first column breaking could probably ly be improved as well, but the changes above make a big difference already, and should be relatively easy to implement.

[dmmargarint]

Thank you for you detailed response @dpvc , we'll try experimenting with different fonts, stix2 seems indeed very promising and could blend in well with the main article font. I also appreciate the detailed help on the linebreaking, I will pass this on to the relevant team.

[dpvc]

I was rereading my comment above and noticed that I had the data-break-align values reversed in the large MathML example, and have corrected them. They were correct in the earlier explanation, but wrong in the complete example.

I should also mention that you could improve the spacing of the second and subsequent lines by adding indentshift="2em" (or a similar value) to the <mstyle> at the beginning of the right-hand <mtd> element.

You could prevent the line break in the left-hand side by adding linebreak="nobreak" to the <mstyle> at the beginning of the first <mtd>. Or you could add a new <mstyle linebreak="nobreak"> around any sub-expression that should nt be broken.