Mathjax: Use font-size in ex to match surrounding fonts rather than measuring ex-heights directly.

Created on 11 Apr 2016 · 10Comments · Source: mathjax/MathJax

Something like

<style>
.mjx-chtml {font-size: 2.26ex ! important}
.mjx-chtml .mjx-chtml {font-size: inherit ! important}
</style>

works for CommonHTML output, and something similar could be used for HTML-CSS and PreviewHTML as well. This would avoid having to measure em and ex heights (though a corresponding adjustment would need to be made for text with mtextInheritFont set). This should also resolve some problems with mobile devices that change the font size after the page is loaded (and after MathJax has already measured the size), causing the math to be scaled incorrectly for the new font size.

Note that for HTML-CSS, each of the different web fonts would require a different scaling factor (since their em-to-ex ratios differ, and this font-size is the em-size divided by the ex-height).

Browser Bug Feature Request Upstream

Source

dpvc

All 10 comments

It turns out this isn't going to work after all. It works when the page is not zoomed, but it looks like WebKit has a bug that if the font-size is in relative units like ex, then when you zoom the page, the fonts get extra zoom (Firefox doesn't exhibit the behavior).

<!DOCTYPE html>
<html>
<head>
<title>Test of MathJax_Main in different sizes</title>
<style>
@font-face {
  font-family: MJX;
  src: url("http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/woff/MathJax_Math-Regular.woff") format("woff");
}
.MJX {font-family: MJX}
</style>
</head>
<body>

x<span style="font-size:2.38ex"><span class="MJX">x</span></span>

</body>
</html>

produces

no-zooom

in Safari and Chrome without zoom, but when zoomed in three levels, produces

zoom-3

I don't see any way around that, so the idea, while good, won't be practical until WebKit fixes that problem.

dpvc on 8 Jul 2016

Actually, it looks like only ex are affected that way. Units of em scale properly (as does rem). go figure.

dpvc on 8 Jul 2016

I can't find one for WebKit but the relevant Chromium bug seems to be https://bugs.chromium.org/p/chromium/issues/detail?id=408777 (only 2 years old. sigh.)

pkra on 11 Jul 2016

👍1

I've also opened https://bugs.webkit.org/show_bug.cgi?id=159617

pkra on 11 Jul 2016

👍1

Thanks for the info and making the bug report.

dpvc on 11 Jul 2016

I'm dropping this from the milestone, because of the WebKit bug that makes it not practical to use it. Oh well.

dpvc on 12 Jul 2016

The chromium bug has been fixed.

pkra on 26 Aug 2019

It seems webkit seems to have been fixed as well (I didn't test Safari though so it may not yet have been fixed there).

pkra on 26 Aug 2019

@pkra, yes, I saw that there had been action on that bug. It looks like it might be worth giving this another try.

dpvc on 28 Aug 2019

I am using MathJax 3 and my page renders to SVG. I have noticed that when I (as a browser user) reduce the font size, the size of the formulas aren't reduced. Is this due to this bug? (if so I won't make a new issue).