mi-tag with mathvariant creates extra spans

[Diaan]

I have an mi-tag with multiple characters in it that I want printed italic. According to the MathML specs I should add the mathvariant attribute and set it to italic. This works, it prints the contents italic, but it also adds unnecessary span-tags; all but the first character are in a seperate span with the font-family set as a style property.
This causes issues for me because I copy the generated HTML and the extra spans cause issues there.

I found the issue started arising in version 2.4.
I made two codepens, one with version 2.3-latest, which can be found here
And one with 2.7-latest, which can be found here
I've added some css to show the spans in the generated code.
I also added some alternative versions, with mtext and mo-tags, also using mathvariant="italic", but with those there are no issues.

Is this a feature that can somehow be disabled with a configuration setting or is it a bug?

[pkra]

This is a bit complicated, I'm afraid.

On the one hand, your demos use a combined configuration file that specifies the SVG output but since you are mentioning spans you're probably not actually using that. The configuration indicates that you're using the HTML-CSS output. Is that correct?

Assuming that's the case, I can't actually reproduce the issue -- the relevant piece (<mi mathsize="13px" mathvariant="italic" >omtrek</mi>) ends up in one span. The only spans with red outlines that I can see are after = and π; those are expected (needed for spacing purposes).

However, the HTML-CSS output is highly client dependent so depending on your browser, OS and installed fonts you might get different results (in my case, Chrome 59 on Linux). Can you provide more information and perhaps a screenshot?

In particular, it's not a good idea to copy the output from the HTML-CSS output. You can do this with CommonHTML output which works across browsers and platforms though. (Since it's layout is more modern, it also won't have the "spacing spans" that I described for the HTML-CSS output earlier).

[Diaan]

In this screenshot I'm using chrome 59 on windows 7
I've also tested chrome 58 and 59 on window 10, with the same problem.
I also checked in Firefox 53 on windows 7 and Chrome 60 on OSX and there I don't see any extra spans.

I've updated the codepens with what i think is the right configuration: TeX-MML-AM_HTMLorMML
I indeed intend to use the `HMTL-CSS' output.

[pkra]

@dpvc will know best, but I'm guessing that's just another Chrome+windows specific hack that the HTML-CSS output needed at some point.

[dpvc]

I was going to say that I couldn't reproduce it either, but your screen shot gave me the clue I needed to figure out what was going on. MathJax's HTML-CSS output has mechanism for dealing with tags that include characters from several fonts by putting some inside spans that specify the different fonts. It turns out that there is an interaction between that mechanism and another one that patches a problem that Chrome had with loading web fonts with italic or bold variants. That second issue only affects web fonts, and since I (and I presume Peter) have the MathJax fonts installed locally, we didn't trigger the web-font patch, and so didn't get the interaction you are seeing. When I use web fonts, then I see the issue that you describe.

I suspect that Chrome has fixed the bug that MathJax works around, and so one possible work-around is to turn off that fix. It first appeared in Chrome 32, but I don't know when it may have been fixed. There were quite a few buggy versions for a while (I remember 38 was pretty bad, if I recall correctly). So you might try adding

<script type="text/x-mathjax-config">
if (MathJax.Hub.Browser.isChrome && MathJax.Hub.Browser.versionAtLeast('40.0')) {
  MathJax.Hub.Register.StartupHook("HTML-CSS Jax Ready", function () {
    MathJax.OutputJax['HTML-CSS'].FontFaceBug = false;
  });
}
</script>

I don't know if version 40.0 is really the right one, but Chrome is pretty aggressive about updating itself, so you are probably OK with this.

In any case, Peter's comment about copying the resulting HTML is correct: you don't want to copy the HTML-CSS output, as it is browser dependent (and also OS dependent, and dependent on the fonts installed on your system, and a couple of other things). If you want something portable, use the CommonHTML output instead.

[dpvc]

The issue1774 branch of my fork of MathJax includes a fix for the problem.

[Diaan]

This seems to be working! Thanks!

[dpvc]

==> Merged

[dpvc]

==> In testsuite

MathMLToDisplay/Characters/issue1774.html