Math looks bold in macOS Safari, Windows Firefox

[Michael Boudreau]

Our site is currently using MathJax 4.0.0-beta.4, and in mid-to-late-May we noticed that math was suddenly appearing bold in macOS Safari (v17.5) and Windows Firefox (v126.0). In other browsers there has been no apparent change in the font weight.

Is this by any chance a known issue with MathJax 4 and these browsers? I don't know when our vendor began using this version of MathJax.

--Michael Boudreau

The University of Chicago Press

[Davide Cervone]

Michael:

Can you provide an image of what you are seeing?  I don't know of anything in May that should change the MathJax output unless you have either changed the font being used on your site (MathJax v4 has 11 fonts to choose from) or changed the renderer (e.g., from SVG to CHTML).  The latter can be done using the MathJax contextual menu (Math Settings -> Renderer), and that is a sticky change, so it will stay in effect between sessions.  Is it possible you changed that in Safari and Firefox at some point, but not other browsers?  Also, is this something that everyone is seeing, or just you?

When 4.0.0-beta.6 was released in April, the fonts were updated, but that should not have affected the weight of the glyphs, as they were not changed.  You could configure MathJax to use the v4.0.0-beta.4 versions if that turns out to be the issue, though I would have expected it to have affected you in April, not May.

Davide

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/657b4723-c187-4d0c-9b56-4645a88f9689n%40googlegroups.com.

[mrb...@gmail.com]

Davide:

Here's what everyone in my office is seeing on various browsers. The article I used for this example is Open Access and available at https://www.journals.uchicago.edu/doi/10.1086/728111

macOS Safari v17.5 (math is bold)

macOS Firefox v127.0 (math is normal, Chrome looks similar)

Windows Firefox 127.0 (math is bold)

Windows Chrome 126.0 (math is normal, Edge looks similar)

I've heard from our vendor that they upgraded our site to MathJax 4.0.0-beta.4 last month, which corresponds to when the bold math appeared. I think we were using version 3.2.2 before then (though I had no occasion to check). On all the browsers I tested, the renderer is set to CHTML--another thing I never paid attention to before, and something I doubt anybody changed on their own. When I tried changing the renderer to SVG, the style of the math glyphs was noticeably different (looked more like TeX, for lack of a better description), so I think that CHTML is probably not a new setting for us.

One other wrinkle I've discovered while testing this with my colleagues: the math in macOS Safari shifts from normal to bold if you alternately make Safari and other windows on the desktop active. I haven't seen the same effect in Windows Firefox--it's consistently bold.

I've been searching other academic journal sites for MathJax. Sites using version 3.2.2 appear to be fine. However, this article from another publisher, also on our vendor's platform, also using MathJax 4, shows the same problem: https://royalsocietypublishing.org/doi/10.1098/rspa.2023.0370

[Davide Cervone]

Thanks for the link and the images.  It turns out that you page's MathJax configuration includes

                        style: {
                            "mjx-container mjx-math": {
                                "font-size": "0.9em",
                                "font-weight": "bold"
                            }
                        }

which sets the font-weight to "bold" (they have added special code to insert this style declaration into the page).  That is what is giving you the bold characters.  If you turn off that font-weight in the browser console's DOM inspector, the bold effect should disappear.

The MathJax fonts aren't set up to have font-weight or font-style applied to them, and different browsers handle this differently.  Safari will use a "poor-man's-bold" approach to this (if I remember correctly) by taking a non-bold font and place a second copy of the character that is shifted to the right by 1 pixel, making it bolder.  It looks like Windows Firefox does the same.

In any case, you should ask the vendor to remove that CSS declaration from their MathJax configuration.  The 0.9em declaration is also ill advised, as it can throw off MathJax's layout.  MathJax picks the font size it uses so that the height of a typeset "x" will match the height of an "x" in the surrounding font (provided that font has its font dimensions properly set, and not all do).  But if they want to modify that size, they should use

output: {

  scale: .9

}

as part of their MathJax configuration rather than using CSS attached to MathJax DOM elements.  Note that when you switch to SVG output, the size of the math gets larger.  That is because the CSS they are using to reduce the size only affects CHTML output.  The "output" configuration I give above would apply to both CHTML and SVG output.

Finally, I note that there isa mixture of CSS-styled math and MathJax math.  (That is, not all the math in the page is processed by MathJax.)  That can lead to a poor experience for users with assistive needs, as the CSS-styled math may not be read properly be screen readers, for example, and some math will be read one way and other math will be read another way.  This can lead to a confusing experience.

In any case, the font bold problem is with the page's CSS styling.

Davide

On Jun 12, 2024, at 4:51 PM, mrb...@gmail.com wrote:

Davide:

Here's what everyone in my office is seeing on various browsers. The article I used for this example is Open Access and available at https://www.journals.uchicago.edu/doi/10.1086/728111

macOS Safari v17.5 (math is bold)

<macOS Safari.png>

macOS Firefox v127.0 (math is normal, Chrome looks similar)

<macOS Firefox.png>

Windows Firefox 127.0 (math is bold)

<Windows Firefox.png>

Windows Chrome 126.0 (math is normal, Edge looks similar)

<Windows Chrome.png>

I've heard from our vendor that they upgraded our site to MathJax 4.0.0-beta.4 last month, which corresponds to when the bold math appeared. I think we were using version 3.2.2 before then (though I had no occasion to check). On all the browsers I tested, the renderer is set to CHTML--another thing I never paid attention to before, and something I doubt anybody changed on their own. When I tried changing the renderer to SVG, the style of the math glyphs was noticeably different (looked more like TeX, for lack of a better description), so I think that CHTML is probably not a new setting for us.

One other wrinkle I've discovered while testing this with my colleagues: the math in macOS Safari shifts from normal to bold if you alternately make Safari and other windows on the desktop active. I haven't seen the same effect in Windows Firefox--it's consistently bold.

I've been searching other academic journal sites for MathJax. Sites using version 3.2.2 appear to be fine. However, this article from another publisher, also on our vendor's platform, also using MathJax 4, shows the same problem: https://royalsocietypublishing.org/doi/10.1098/rspa.2023.0370

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/CAJ60roKhn8bgqO2RvDq5CXiLMReSLV3KWAaOvdLtMid260Chug%40mail.gmail.com.