Page MenuHomePhabricator

smallmatrix not very small in MathML
Closed, ResolvedPublic

Description

In MathML the size reduction of \begin{smallmatrix} compared to \begin{matrix} is only about 75%. In the SVG mode its more like 65% and in PNG mode its close to 50%. It looks like the font size is not decreased at all, whereas in other modes a smaller font is used.

Ideally a greater size is desirable.

In https://en.wikipedia.org/wiki/E8_%28mathematics%29 some quite large matrices which don't need a large font size are used.

In https://en.wikipedia.org/wiki/Hecke_operator a 2 by 2 smallmatix is used as the lower limit in a summation and a much smaller matrix would be preferable.

There are about 400 instances of smallmatrix used in the English wikipedia.

Event Timeline

SalixAlba raised the priority of this task from to Needs Triage.
SalixAlba updated the task description. (Show Details)
SalixAlba added a project: Math.
SalixAlba subscribed.
Physikerwelt subscribed.

Indeed. Let me see what I can do about that. How did you count the number of onstances?

Physikerwelt set Security to None.

About a year back I scanned the database dump to find every instance of mathematical formula. I've got these saved as a bunch of text files so it quite easy to do a grep on them to find uses of specific commands. There are 545870 equations in total and the files are about 35MB.

The generating script and copies of the files can be found in my tools account (salixalba@tools-bastion-01)

Screenshot 2015-07-25 20.16.22(2).png (868×1 px, 172 KB)
That's how it looks on the test instance using the latests mathoid version. http://math.beta.wmflabs.org/w/index.php?title=Special:FormulaInfo&pid=5366&eid=math.5366.3 that is linked from http://math.beta.wmflabs.org/wiki/Hecke_operator#math.5366.3
At least for the mathoid SVG fallback looks very similar to the texvc version. However both MathML variants (LaTeXML and MathJax/Mathoid have too large brakets). It's not clear to me if that's a firefox rendering problem or a problem with the MathML itself.
Is that the same experience that you make?
Statistics: @SalixAlba that's interesting. I tried to get the data by myself by rendering an XMLDump. However, I had only about 380k and a little over 200k unique formulae.

Here is what I get for https://en.wikipedia.org/wiki/Hecke_operator using Gecko:

Hecke_operator-Gecko-LatinModernMath.png (200×400 px, 17 KB)

The formula at the top is the <math> copied into a separate HTML page while the formula at the bottom is the formula viewed in the original page. So I'm wondering whether it's a bug in Gecko or whether the style on the Wiki page is interfering with the native MathML rendering...

As for the LaTeXML rendering, it seems to be a bug in the MathML code generated by LaTeXML: the columnspacing/rowspacing are not set so the matrix has large gaps and mathsize="70%" is put on the matrix elements. Since the size is already automatically reduced by the scriptlevel incrementation, multiplying again by 70% makes the font size even smaller. Note that both native MathML and SVG renders badly:

Hecke_operator-Gecko-LatinModernMath-LaTeXML.png (200×650 px, 27 KB)

So I'm wondering whether it's a bug in Gecko or whether the style on the Wiki page is interfering with the native MathML rendering...

OK, I found the problem for the line spacing. Looking at the developer tool, I see that .mw-body-content has a rule to set line-height to "1.6". This seems to confuse the MathML rendering. If I set line-height: normal on the <math> then the vertical linespacing in the matrix is correct. This can be fixed in the MediaWiki / custom user stylesheet by doing:

math {
  line-height: normal;
}

I'll report that to Gecko so that it can be integrated in the user-agent stylesheet.

line-height: normal also improves the linespacing of https://en.wikipedia.org/wiki/E8_%28mathematics%29 but I'm not sure what's expected for the font-size.

@fredw: So to fix this problem we could include

math {
  line-height: normal;
}

To our custom math.css?

Regarding the font-size itself: this seems to be a bug in MathJax. If I set <mstyle scriptlevel="+1"> around the <mtable>, I get the expected text size reduction in Gecko.

The row for displaystyle in http://www.w3.org/TR/MathML/chapter3.html#presm.mtable.attrs says that the default is "false" and that scriptlevel is not changed. The MathML generated by MathJax explicitly sets displaystyle to "false" ; this is not problematic but MathJax has some code to remove "useless" attributes, so that's a bit surprising to see that attribute... The SVG output generated by MathJax seems to increment the scriptlevel, contrary to what the spec says.

I think the issue about mtable behavior for http://www.w3.org/TR/MathML/chapter3.html#presm.scriptlevel had already been reported to the MathJax team a long time ago and discussed with the MathML WG, so I'm not sure why it is still there. Is it possible that we use an old version that does not include the fix?

@fredw: So to fix this problem we could include

math {
  line-height: normal;
}

To our custom math.css?

I think this will fix the line-spacing problem. I already prepared https://bugzilla.mozilla.org/show_bug.cgi?id=1187673 to integrate it into Gecko user agent stylesheet.

However, the scriptlevel bug should probably be fixed in MathJax or we should upgrade Mathoid to integrate a fix.

@fredw: Do you have a reference to the MathJax bug. We use https://github.com/wikimedia/MathJax for that beta server.

Not beforehand, but if you search "displaystyle" on the MathJax github issue or on the MathML mailing list, you should be able to find it.

Just to be sure to chatch the right one you mean this https://github.com/mathjax/MathJax/issues/839 bug?

Yes, that seems to be that one. The scriptlevel issue was mentioned on

https://github.com/dpvc/MathJax/commit/98e3f098bd519dabe9bf558736c5bf6438fbc217#commitcomment-7761186

so I hope/expect it was addressed.

In MathML the size reduction of \begin{smallmatrix} compared to \begin{matrix} is only about 75%. In the SVG mode its more like 65% and in PNG mode its close to 50%. It looks like the font size is not decreased at all, whereas in other modes a smaller font is used.

@SalixAlba: I'm not sure about the exact percentage values, but here is what I understand.

The MathML spec (used by MathJax's HTML-CSS/SVG rendering and Gecko's MathML rendering) says that the scriptsizemultiplier is 0.71. So the base size is 1, the script size is .71 and the script script size .71*71 = .5041.

The texvc PNG rendering uses LaTeX rules which might have their own font-specific values (here those of the Computer Modern font) for script size and script script size. I expect the values from the OpenType MATH table to be the same as the LaTeX's one so it might be possible to use them instead of MathML's scriptsizemultiplier, if there is a significant difference. I opened https://bugzilla.mozilla.org/show_bug.cgi?id=1187682 in Gecko.

Any updates here https://bugzilla.mozilla.org/show_bug.cgi?id=1187682 seems to be stalled.

Per https://bugzilla.mozilla.org/show_bug.cgi?id=1187682#c3 this won't change anything for Latin Modern Math.

Anyway, https://bugzilla.mozilla.org/show_bug.cgi?id=1187673 is fixed in the latest Gecko release, so as explained above the remaining issue is in MathJax's LaTeX-to-MathML generation. Did you check that the latest release correctly handles scriptlevel?

@fredw: Looks https://en.wikipedia.org/w/index.php?title=User:Physikerwelt&oldid=688503637 good to you?
How would one have to change the MathML input to get a "PNG like" rendering to get in Firefox?

See https://phabricator.wikimedia.org/T106890#1483157 for how force an increment of scriptlevel (btw, it would probably more convenient if the scriptlevel attribute was allowed on the mtable element...)

@fredw: Just to summarize what I did understand
Currentlty this input string \left(\begin{smallmatrix}a & b\\ c & d\end{smallmatrix}\right) is transformed to this MathML expression

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <semantics>
    <mrow class="MJX-TeXAtom-ORD">
      <mstyle scriptlevel="0" displaystyle="true">
        <mrow>
          <mo>(</mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mtable displaystyle="false" columnspacing="0.333em" rowspacing=".2em">
              <mtr>
                <mtd>
                  <mi>a</mi>
                </mtd>
                <mtd>
                  <mi>b</mi>
                </mtd>
              </mtr>
              <mtr>
                <mtd>
                  <mi>c</mi>
                </mtd>
                <mtd>
                  <mi>d</mi>
                </mtd>
              </mtr>
            </mtable>
          </mrow>
          <mo>)</mo>
        </mrow>
      </mstyle>
    </mrow>
    <annotation encoding="application/x-tex">{\displaystyle \left({\begin{smallmatrix}a&amp;b\\c&amp;d\end{smallmatrix}}\right)}</annotation>
  </semantics>
</math>

and you suggest this should be changed to

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <semantics>
    <mrow class="MJX-TeXAtom-ORD">
      <mstyle scriptlevel="0" displaystyle="true">
        <mrow>
          <mo>(</mo>
          <mrow class="MJX-TeXAtom-ORD">
<mstyle scriptlevel="+1">
            <mtable displaystyle="false" columnspacing="0.333em" rowspacing=".2em">
              <mtr>
                <mtd>
                  <mi>a</mi>
                </mtd>
                <mtd>
                  <mi>b</mi>
                </mtd>
              </mtr>
              <mtr>
                <mtd>
                  <mi>c</mi>
                </mtd>
                <mtd>
                  <mi>d</mi>
                </mtd>
              </mtr>
            </mtable>
</mstyle>
          </mrow>
          <mo>)</mo>
        </mrow>
      </mstyle>
    </mrow>
    <annotation encoding="application/x-tex">{\displaystyle \left({\begin{smallmatrix}a&amp;b\\c&amp;d\end{smallmatrix}}\right)}</annotation>
  </semantics>
</math>

correct?
I checked the http://www.mathmlcentral.com/Tools/FromMathML.jsp to generate a png from the first mathml input and it looks about right. So I'm not sure if that's really a MatJax only bug or if some styles interfere badly.

I checked the http://www.mathmlcentral.com/Tools/FromMathML.jsp to generate a png from the first mathml input and it looks about right.

What do you mean by "right"? In the generated gif, the spacing seems correct but the font-size seems too big. Actually, mathmlcentral just seems to ignore the scriptlevel attribute (try setting it to 10 for example), so I doubt we can trust it.

So I'm not sure if that's really a MatJax only bug or if some styles interfere badly.

Well, I guess the easiest and most appropriate way is to read the MathML spec and to try with a minimal testcase without style. Last time I did that, Mathoid generated MathML output without scriptlevel increment and the calculated SVG rendering was wrong with respect to the MathML spec (and so the font-size was actually correct). Please tell me if you have the same analysis.

@fredw: I agree with you on the proceeding:
I tried the minimal example \begin{smallmatrix}a\end{smallmatrix}
on http://mathoid-rb.testme.wmflabs.org/mediawiki-vagrant.wmflabs.org/v1/?doc#!/Media/post_media_math_format which uses the most recent mathoid version
and got

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block" alttext="multiline equation line 1 a">
    <semantics>
        <mrow class="MJX-TeXAtom-ORD">
            <mtable rowspacing=".2em" columnspacing="0.333em" displaystyle="false">
                <mtr>
                    <mtd>
                        <mi>a</mi>
                    </mtd>
                </mtr>
            </mtable>
        </mrow>
        <annotation encoding="application/x-tex">{\begin{smallmatrix}a\end{smallmatrix}}</annotation>
    </semantics>
</math>

However, I'm not sure how to make the testcase since I'm not sure how spec conform MathML is supposed to look.

This comment was removed by Physikerwelt.

... I removed my last two comments since they were not correct.
For me the situation looks like that:
Chrome SVG rendering:

Screenshot 2015-11-01 20.10.53.png (1×960 px, 145 KB)

Firefox MathML rendering

Screenshot 2015-11-01 20.11.17.png (1×960 px, 189 KB)

I realize that in chrome with SVG rendering SVG and the current PNG rendering look almost identical. At least in the example without brakets.
However, in Firefox there is much more space between the rows.
I'm using FF 41.0.2 running on win8.1

Again, there are two bugs here:

  • One linespacing bug in Gecko which is fixed in Gecko 42 by adding "math { line-height: normal; }" in the user agent style sheet (this can also be added to MediaWiki to handle older versions like yours).
  • One font-size in Mathoid regarding handling of scriptlevel in TeX-to-MathML and MathML-to-SVG phases (which compensate each other to give the expected font-size). Per the MathML spec, all the 1's should have the same size here: <math display="block"><mn>1</mn><mtable><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mtable displaystyle="true"><mtr><mtd><mn>1</mn></mtd></mtr></mtable></math>

@fredw: Thanks, now I understand the situation.
I'll submit a patch for the math { line-height: normal; }.
For the second problem David wrote a fix
https://github.com/dpvc/MathJax/commit/7c39f064d0913a459e05a25edc5b70a20c4a089a
which we can cherry pick.

Update: The pull request for the matrix size is availible at https://github.com/wikimedia/MathJax/pulls

Change 250710 had a related patch set uploaded (by Physikerwelt):
Use normal line-height for math elements

https://gerrit.wikimedia.org/r/250710

Change 250716 had a related patch set uploaded (by Physikerwelt):
Use normal line-height for math elements

https://gerrit.wikimedia.org/r/250716

Change 250716 abandoned by Physikerwelt:
Use normal line-height for math elements

https://gerrit.wikimedia.org/r/250716

Change 250710 merged by Frédéric Wang:
Use normal line-height for math elements

https://gerrit.wikimedia.org/r/250710