CODEWITHSUNDEEP
htmlcssmathjax
James Rowe
James Rowe

Reputation: 33

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

Upvotes: 2

Views: 945

Answers (2)

scraaappy
scraaappy

Reputation: 2886

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{_}}}$$

Upvotes: 2

James Rowe
James Rowe

Reputation: 33

Not an ideal solution but adding another character (1 in this case) after the underscore with the same colour as the background works.

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

CSS:

.white
{
 color: white;
 font-size:xx-small;
}

It does leave a little gap to the right of the cursor which is not ideal.

Upvotes: 0

Related Questions