Vertical alignment issues on Webkit based browsers

[ajinkya-k]

The vertical alignment of characters in math formula on webkit browsers is messed up. See examples below:

I noticed that the math rendering in the MathJax on webkit based browsers is inconsistent. Here is an example of the in section B2.4 of an online book, where the vertical alignment of the characters is really off. See the Var and AΣA' rendered in safari on macos:

This also happens in Orion -- another Webkit based browser which makes me think its an issue upstream especially because these issues don't seem to happen in Firefox on macos (which does not use webkit):

Firefox:

This issue occurs on all webkit based browsers i checked:

• Safari on MacOS
• Orion on MacOS
• Safari on iOS
• Chrome on iOS (which uses WebKit)

[dpvc]

This is a duplicate of several other issues. See, for example, #2866. This is a WebKit bug, and one that MathJAx can't do much about. In v4, the situation for multi-character identifiers (like your Var) is improved, but that doesn't take care of all the situations that are affected. Switching to SVG may be the best option for WebKit users.

[ajinkya-k]

thanks! I run into this when using quarto and I dont know much about javascript so IDK how I can setup my html/css/js to render svg instead of mathjax based on browser engine. Can you point me to some resources?

[dpvc]

I don't know anything about quarto, but a quick google search suggests that including

format:
   html-math-method:
     method: mathjax
     url: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"

in your _quatro.yaml file might do the trick.