Jell-o text rendering (please see screenshots)

[Slos]

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

 <p>Rate of descent (RoD) is a function of descent angle and velocity.</p>

    <p>$$\text{Rate of Descent} = \frac{\left (D \times V\right) - \left (T \times V\right )}{W}$$</p>

    <p>therefore:</p>

    <p style="margin-top: 40px;;">$$\text{Rate of Descent} = \frac{\text{Power Required} - \text{Power Available}}{W}$$</p>

[dpvc]

Yes, Safari has always had some difficulty with round-off errors, even though all the characters have the same baseline.

One work-around would be to use a system font for the contents of \text{} rather than the MathJax math fonts. You can either inherit the surrounding text font or force a specific one. E.g.,

MathJax = {
  chtml: {
    mtextInheritFont: true
  }
}

or

MathJax = {
  chtml: {
    mtextFont: Times
  }
}

See the documentation for more.

[benchristel]

I found that using a system font causes incorrect rendering when the text is embedded in a more complex expression.

For example, \dfrac{2~\text{meters}}{3~\text{seconds}} renders like this:

Accents from the textmacros package cause the output to be illegible. E.g. \text{G\"odel} renders as:

I found another possible workaround for this issue, though: hardcoding the height of text characters.

mjx-mtext > mjx-c::before {
    padding-top: 0.75em !important;
}

Text rendered in Safari 15.6.1 on macOS 12.6 with the CSS workaround above:

Without the workaround:

I'm very surprised that this works. It causes accents from the textmacros package to display in the wrong place, though for me that's a minor issue, and can be hacked around with more CSS. What other issues might this workaround cause?

[dpvc]

I am not able to reproduce your first two examples. Are you pre-rendering the pages on the server, or is MathJax running in the browser? If in the browser, is the content initially in a container with display:none? It looks like MathJax is not able to measure the width of the text, which is usually due to one of those situations.

The padding-top solution is one I've suggested as a last-ditch option for several people (which may be where you got it), and that certainly does get the text to align. But it also has other ramifications, as you found with the accents, and it can cause vertical alignment issues for other situations, like \sqrt{\mtext{a}} for example, or \text{a}^2. But if you have limited use of \text, and it is mostly for explanations and such, then it should be OK.

[benchristel]

Thanks! I am rendering on the server, so that is probably the explanation for what I was seeing.

[dpvc]

I am rendering on the server, so that is probably the explanation for what I was seeing.

Yes, that would account for it, as fonts other than the ones provided by MathJax can't be measured there. You could consider using a puppeteer-based solution, however, since that uses a headless Chrome that does handle the document layout just as Chrome does, and so the measurements will be possible in that case. There is an example in the MathJax node demos repository that might serve as a starting point if you want to try that out.