CODEWITHSUNDEEP
mathjax
han-tyumi
han-tyumi

Reputation: 245

Uppercase letters and numbers in mathjax are too big

I'm setting up a webpage in Github using Jekyll. I've implemented Mathjax in order to render mathematical text. My configuration is minimal:

<!-- Mathjax -->
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']],
      processEscapes: true
    }
  });
</script>
<script type="text/javascript" src="path-to-mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <script type="text/javascript"
  src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

It works fine, except for the fact that inline math text and uppercase letters look to big, considering the surrounding text. I set up this page as an example.

So far the only thing I've been able to do is to scale down the math by a factor of the surrounding text, by using

"HTML-CSS": {
scale: 90
}

The problem is that it scales all math expressions, including lowercase letters that seem to have the right size without scaling.

So my question is if there is a way to fix this discrepancy.

Upvotes: 0

Views: 637

Answers (1)

Davide Cervone
Davide Cervone

Reputation: 12205

is ... there is a way to fix this discrepancy?

No. MathJax matches the surrounding font by scaling its own fonts so that the ex-height matches that of the surround font. That means that lower-case letters should be approximately equal in height, as is shown in your example. So MathJax is correctly determining the ex-height of the surrounding and matching that.

The reason the capitals don't match is that different fonts have different ratios between the heights of the upper- and lower-case letters. So if you get the lowercase letters to match, the uppercase ones will not (and vice versa). With fonts that have a different uppercase-to-lowercase height ratio than the MathJax fonts, you won't be able to get both to match the surrounding font. That is inherent in the design of the two fonts.

The only other possibility would be to scale the uppercase letters differently from the lowercase ones, but that would mean the weights would not match, and the quality of the math layout would suffer.

So, no, you can't get both, in general.

Edit 30 April 2020:

In the comment below we discuss the meaning of the em unit, which is the same as the (computed) font-size for the font. Unfortunately, that is not the same as the height of the capital letters in the font. For example, the code below shows an M inside a red box of height and width 1em and an x inside a box of height and width 1ex for the fonts Times, Courier, Impact, and Zapfino. Run it to see the results.

div {
  font-size: 60px;
  display: inline-block;
  min-width: 120px;
}
em-box {
  display: inline-block;
  background-color: red;
  width: 1em; height: 1em;
  margin-right: -1em;
}
ex-box {
  display: inline-block;
  background-color: red;
  width: 1ex; height: 1ex; 
  margin-right: -1ex;
  margin-left: 10px;
}
M-box {
  display: inline-block;
  min-width: 1em;
}
x-box {
  display: inline-block;
  min-width: 1ex;
}
<div style="font-family: Times">
<em-box></em-box><M-box>M</M-box><ex-box></ex-box><x-box>x</x-box>
</div>
<div style="font-family: Courier">
<em-box></em-box><M-box>M</M-box><ex-box></ex-box><x-box>x</x-box>
</div>
<div style="font-family: Impact">
<em-box></em-box><M-box>M</M-box><ex-box></ex-box><x-box>x</x-box>
</div>
<div style="font-family: Zapfino">
<em-box></em-box><M-box>M</M-box><ex-box></ex-box><x-box>x</x-box>
</div>

Here is an image in case you can't view the results above.

enter image description here

Note that the em boxes (red) are the same in all cases, and are the height specified in the CSS (50px), whereas the height of the M varies within that box (whereas the height of the x matches its box). So the em-size can't be used to tell the height of the capital letters in the font.

I don't know of a way to determine the actual height of the M.

Upvotes: 3

Related Questions