mathjax / MathJax

Beautiful and accessible math in all browsers
http://www.mathjax.org/
Apache License 2.0
10.19k stars 1.16k forks source link

Superscript under square root very close to the bar sometimes #2778

Open jmitsdarfer opened 3 years ago

jmitsdarfer commented 3 years ago

Issue Summary

At 100% zoom, sometimes a superscript w/in an msqrt appears to almost be touching the square root bar, depending on the exact equation. For example, this one looked fine:

`x

= b 2 4 a c ` ![image](https://user-images.githubusercontent.com/82107944/135621457-89d9791e-472b-4a57-8fb0-9f5c2b51ff7c.png) However, this one looked very tight: ` a n 2 + 1 ( n a 2 + X c ) ` ![image](https://user-images.githubusercontent.com/82107944/135621606-4df42d59-b3c4-40f1-be7b-51832a1428cb.png) I didn't really understand what the difference could be in these seemingly similar equations to be causing the different square root forms/sizes, so I did a little further testing... I tested changing the "n" to a "b", but that didn't make a difference. Then, I tried this: `a = n 2 + 4 ` also looks tight between the superscript "2" and the square root bar, i.e., ![image](https://user-images.githubusercontent.com/82107944/135623340-e902e4bf-d5a8-4c08-afb7-29bf86224b6f.png) However, just changing the plus sign to a minus sign changes the look of the square root and thus the superscript "2" isn't so tight to the square root bar in this case, i.e., `a = n 2 4 ` ![image](https://user-images.githubusercontent.com/82107944/135623527-d8ca2973-3eb3-43c0-a6da-e6489e050a4a.png) I don't understand why having a plus sign there or having a minus sign there would change the look of the equation. If I blow these up to like 200%, I can see that there is indeed a very slight amount of white space between the superscript "2" and the bar ![image](https://user-images.githubusercontent.com/82107944/135625112-0f693fb3-b0f3-4756-a9a5-c44042e9f5af.png) At 100% zoom, though, it seems a little too close for comfort sometimes. ### Technical details: MathJax Version: master - latest commit: MathJax.js v2.7.9 Client OS: Windows Browser: Version 94.0.4606.61 (Official Build) (64-bit) Renderer: HTML-CSS
dpvc commented 3 years ago

The placement of the horizontal bar of the square root has been a perennial problem. As you can see from your last image, the issue here is that the bar is not quite in the proper position (the surd extends a bit above it, and it should really be at the top of the surd). The HTML-CSS output jax is the oldest one (at 12 years old at this point), and its output is both browser and operating system dependent, with a lot of fragile hacks. Rounding differences (and bugs) in different browsers can cause such effects. For example, in Firefox on a Mac, I see

mj1

which is perfectly fine. The differences can be affected by browser, OS, screen resolution, magnification, font's available, font size on screen, and other variables. Because the output is correct in other browsers and OS, if I tried to fix it for your case, it would likely be off in the other direction for other browsers. it is unlikely that this is going to be resolved in the HTML-CSS output. You might try the SVG output to see if that is better for you.

As for the minus sign, that has to do with the bounding box for the minus sign. It is supposed to be the same height and depth as the plus sign, so that when they are used in superscripts, for things like atomic charges, they line up correctly. It appears that there is some extra depth being added to the minus in the STIX font data (but not the STIX-Web data). There is a comment that this is because the minus is used as an arrow extender, but there is a separate adjustment for that, so it may be that this is left over from an earlier attempt to deal with the arrows (12-year old code has lots of cruft in it).

Here is an adjustment you can use to remove that extra space:

MathJax.Hub.Register.StartupHook("HTML-CSS Jax Ready", function () {
  var FONT = MathJax.OutputJax['HTML-CSS'].FONTDATA.FONTS['STIXGeneral'];
  if (FONT) FONT[0x2212][1] -= 100;
});

One possible solution for this particular example would be to add a bit more depth to the expression via something like

      <mpadded depth=".2em"></mpadded>

just inside the msqrt. That should force the next size for the surd, which will give a bit more space. Alternatively, you could add height, but I think the result will look better with a bit more depth instead.