How to resize (control) subscript sizes in MathJax

user_6811738 0
Viewed 668

I have included the MathJax library in me HTML by including within the 'head' tag of my HTML. 

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

Then, I used the delimiter to signal the MathJax parsing...

 \[\sigma_{X}^{2} = VAR[X = E[(X-m_X)^2]\]

But note, the terrible sizing ratio between 'm' and its subscript 'X'.

enter image description here

I simply want to control this sizing. Or have MathJax configured to yield, what should be standard ratios between identifier and sub- or super-script.

mathjax latex html
2 Answers

You may control the size with LaTeX syntax (rather than MathJax configuration):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MathJax</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>

<body>
\[\sigma_{\tiny X}^{2} = VAR[X = E[(X-m_X)^2]\]
\[\sigma_{\scriptsize X}^{2} = VAR[X = E[(X-m_X)^2]\]
\[\sigma_{\small X}^{2} = VAR[X = E[(X-m_X)^2]\]
\[\sigma_{X}^{2} = VAR[X = E[(X-m_X)^2]\]
\[\sigma_{\large X}^{2} = VAR[X = E[(X-m_X)^2]\]
\[\sigma_{\Large X}^{2} = VAR[X = E[(X-m_X)^2]\]
\[\sigma_{\LARGE X}^{2} = VAR[X = E[(X-m_X)^2]\]
\[\sigma_{\huge X}^{2} = VAR[X = E[(X-m_X)^2]\]
</body>
</html>

Actually, only footnotesize does not work for me (JSFiddle).

user_35432330

MathJax does use a smaller size for the super- and subscripts, but it is possible that your browser has a minimum font size specified and that this is preventing the size that MathJax requested from being used. Can you check your browser's font settings to see if that is the case?

Also, MathJax has its own setting for the minimum font size that is to be used in super- and subscripts (8px). If your page is typeset in a very small font, it may be that you are running into that. If that is the case, you can override that via the following configuration:

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
  startup: {
    ready: function () {
      var math = MathJax._.core.MmlTree.MmlNodes.math.MmlMath;
      math.defaults.scriptminsize = '0px';
      MathJax.startup.defaultReady();
    }
  }
};
</script>

which sets the minimum to 0px, effectively removing it entirely. Note that this does not override the browser settings, so if it is the minimum size set in the browser that is causing the problem, there is nothing MathJax can do about that.

user_5023340
Related