Why has Text in MathJax html-css fractions different letter sizes in the same fraction part, and how to prevent it?

[Knuth Lohse]

Currently I am trying to get some formulas into a doxygen generated HTML document using MathJax

Somehow I do not understand why for example in \text{TEST} all letters are the same size, but in \frac{TEST}{2} the T is smaller then the E and S: .

I could prevent this by using \dfrac instead of \frac, but this has other side effects like enlarging everything.

I am also a bit stumbled, because this only happens when MathJax renders in HTML-CSS or common HTML. For example as SVG, the letters are all the same size.

Can someone explain why these different size letters are generated, and what other options are available to prevent this?

MathJax 2 and MathJax 3 produce the same output.

[Davide Cervone]

I am not able to reproduce the image you have.  What browser and OS are you using?  What is the font size of the surrounding font?  Does it change if you zoom in or out in the browser?

The heights of the characters in the font do actually differ slightly: the E has height .68em, the S has height .707em, while the T has height .677em (the smallest of all the capital letters). When the characters are rendered on screen the browser must match these heights to actual pixels on the screen, and that means that in some cases, the height might round up to the next pixel and sometimes down.  The break appears to be happening in between the .677em and .68em height (the higher rounds up and the smaller rounds down).  I suspect that is the source of the issue, here.

If the SVG versions are working for you, why not switch to that output renderer?  (Note that the SVG letters are done via SVG paths not text, so a completely different rendering method is used by the browser.)  You might also try changing the font size of the surrounding text, or change the MathJax scaling factor slightly to see if that helps the situation.

Davide

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/30dcd425-478c-406f-a901-8fe0db8fd33en%40googlegroups.com.

[Knuth Lohse]

Thanks Davide, for the response. 

We use Chrome on Windows 10. The surrounding font is 'Roboto, sans-serif' with font-size of 14px and weight of 400. This would cause T to be 14 * 0.677 = 9.478 ⇒ 9px and E to be 14 * 0.68 = 9.52 ⇒ 10px. It seems like your assumption was correct.

The embedded SVG does somehow not look crisp and looks even worse.

 

I assume to get a evenly sized output, I should change the font? Any suggestions for a font with same sized letters?

[Davide Cervone]

We use Chrome on Windows 10. The surrounding font is 'Roboto, sans-serif' with font-size of 14px and weight of 400. This would cause T to be 14 * 0.677 = 9.478 ⇒ 9px and E to be 14 * 0.68 = 9.52 ⇒ 10px. It seems like your assumption was correct.

The embedded SVG does somehow not look crisp and looks even worse.

Windows 10's SVG support was not that great, as I recall (it has been a while since I used Windows 10).  What version of Chrome are you using?

 I assume to get a evenly sized output, I should change the font? Any suggestions for a font with same sized letters?

Or you could adjust the font size, even by a fraction of a pixel might be enough.

You could try setting mtextFontInherit to true in the HTML-CSS section of your MathJa configuration so that `\text{}` content will be shown in the surrounding text font.  That might work better for this situation.

Version 2 provided 7 different font choices: TeX, STIX-Web, Asana-Math, Neo-Euler, Gyre-Pagella, Gyre-Termes, and Latin-Modern.  The Latin-Modern should have the same metrics as the TeX fonts, so you don't want that one.  Neo-Euler doesn't have very much character coverage, so probably not that one either.  Asana-Math and Gyre-Pagella have the height of the E and T the same (and same for most capital letters), so those might give better results.  Gyre-Termes and STIX-Web have all three letters (T, E, S) of different thoughts, but the differences are less than with the TeX font, so they might also work.  You will have to try them out and see what you like best.

To select a font, use the "fonts" option in the HTML-CSS section of your configuration.  E.g.,

MathJax.Hub.Config({

  "HTML-CSS": {

    fonts: ['Asana-Math']

  }

});

Version 3 only supports the MathJax TeX font, but v4 (now out in beta release) has support for 11 fonts.  You might give that a try if you want to move on from v2, or if the v2 fonts don't work for you.

Davide

Davide Cervone schrieb am Freitag, 23. Februar 2024 um 16:54:38 UTC+1:

I am not able to reproduce the image you have.  What browser and OS are you using?  What is the font size of the surrounding font?  Does it change if you zoom in or out in the browser?

The heights of the characters in the font do actually differ slightly: the E has height .68em, the S has height .707em, while the T has height .677em (the smallest of all the capital letters). When the characters are rendered on screen the browser must match these heights to actual pixels on the screen, and that means that in some cases, the height might round up to the next pixel and sometimes down.  The break appears to be happening in between the .677em and .68em height (the higher rounds up and the smaller rounds down).  I suspect that is the source of the issue, here.

If the SVG versions are working for you, why not switch to that output renderer?  (Note that the SVG letters are done via SVG paths not text, so a completely different rendering method is used by the browser.)  You might also try changing the font size of the surrounding text, or change the MathJax scaling factor slightly to see if that helps the situation.

Davide

On Feb 23, 2024, at 5:39 AM, Knuth Lohse <knuth...@gmail.com> wrote:

Currently I am trying to get some formulas into a doxygen generated HTML document using MathJax

Somehow I do not understand why for example in \text{TEST} all letters are the same size, but in \frac{TEST}{2} the T is smaller then the E and S: .

I could prevent this by using \dfrac instead of \frac, but this has other side effects like enlarging everything.

I am also a bit stumbled, because this only happens when MathJax renders in HTML-CSS or common HTML. For example as SVG, the letters are all the same size.

Can someone explain why these different size letters are generated, and what other options are available to prevent this?

MathJax 2 and MathJax 3 produce the same output.

-- 
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/30dcd425-478c-406f-a901-8fe0db8fd33en%40googlegroups.com.

-- 
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/d9e6bb28-b958-41d0-81db-6b3cd2e88006n%40googlegroups.com.
<fracSVG.png>