Search code examples
htmlcssmathjax

Make Mathjax underscore the same height as other characters

Here is the latex I am using with Mathjax.

\class{mathjaxCursor}{\text{_}}

...and here is the css:

.mathjaxCursor
{
 font-weight: bold;
 background-color: red;
}

This produces the following:

enter image description here

Now some different latex:

5\class{mathjaxCursor}{\text{_}}

Same CSS but this produces:

enter image description here

I've included the red background to illustrate the problem. When the 5 comes along the height of the underscore is the full font height, without it the height is just the height of the underscore. Can you suggest a change to the CSS so that the underscore has a normal character height?

The reason being, when I wrap a root around the underscore it comes out looking like this:

enter image description here

The centre of the root symbol is at the level of the underscore, whereas it should be like this:

enter image description here

Solution

  • You can use \vphantom{...} to simulate the height of any chararacters 

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML" async></script>


$$\sqrt{\vphantom{1}\class{mathjaxCursor}{\text{_}}}$$

    or explore other options

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML" async></script>


$$\sqrt{\class{mathjaxCursor}{\text{_}}}$$