Weird MathJax output when using TeX-AMS_CHTML-full

dotlambda commented 7 years ago

I have no idea why the math displayed in reveal.js using MathJax's CommonHTML output (which is the deafult since MathJax v2.6.) looks like that: 2017-06-18-020850_1920x1080_scrot The source code for this is:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="reveal.js/css/reveal.css">
  <link rel="stylesheet" href="reveal.js/css/theme/black.css" id="theme">
</head>
<body>
  <div class="reveal">
    <div class="slides">
<section id="conclusion" class="slide level1">
<h1>Conclusion</h1>
<ul>
<li>And the answer is…</li>
<li><span class="math inline">\(f(x)=\sum_{n=0}^\infty\frac{f^{(n)}(a)}{n!}(x-a)^n\)</span></li>
</ul>
</section>
    </div>
  </div>

  <script src="reveal.js/lib/js/head.min.js"></script>
  <script src="reveal.js/js/reveal.js"></script>

  <script>

      Reveal.initialize({
        math: {
          mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
          config: 'TeX-AMS_CHTML-full'
        },

        dependencies: [
          { src: 'reveal.js/plugin/math/math.js', async: true },
        ]
      });
    </script>
    </body>
</html>

benni336 commented 7 years ago

Is this an reveal.js issue?

dotlambda commented 7 years ago

Yes, because when using MathJax CHTML output on a blank website without reveal.js, it works just fine.

mbotsch commented 6 years ago

I just had the same problem and found a partial solution: You have to disable the style reset for in reveal's CSS, i.e., remove ".reveal span" from line 11 of reveal.js/css/reveal.css. This solved the font and spacing issues for me.

However, it seems that on slide changes equations are not always properly typeset. The equations appear way too small. Reloading that slide triggers a correct typesetting. No clue what the problem is, since the plugin math.js seems to trigger MathJax typeset on slide change events.

NuclearCookie commented 6 years ago

The issue comes from the way that reveal.js does the reset styles. the reset only applies to subclasses of the div with a class reveal. Sadly, this adds specificity for the css parser. It's more specific to set a property on .reveal span than on .MJX-char for example. So it overrides the font usage.

A good solution for that would be to reset all html elements instead of only the ones in the reveal div.

Beramos commented 6 years ago

I've come across the same issue and ended up with the same solution as @mbotsch. However, the solution proposed by @NuclearCookie would be a more permanent solution for the future usage of reveal.js + MathJax

mbotsch commented 6 years ago

I use Reveal for teaching math-heavy courses and found the CommonHTML output of MathJax to be more consistent between browsers and between operating systems than the old HTML output. Since the default output of MathJax is CommonHTML since version 2.7, it would be really cool if Reveal could switch to that.

Here's the solution that worked for me:

1) Remove the style reset for .reveal span from reveal.css. I agree that the solution of @NuclearCookie is probably better.

2) Even then I had problems that with fonts being way too small when I set Reveal's viewDistance to a small value (which I have to for some performance reasons) and then switch to a slide with equations that becomes visible but was not visible at the time of (re)loading the slides. This problem is caused by MathJax trying to adjust its font size in order to match the text's actual, rendered font size. I just disabled the font size adjustment, which also resolved the problem that the same equation on two successive slides might slightly change its size. I had to adjust the MathJax config like this:

MathJax.Hub.Config({ jax: ["input/TeX","output/CommonHTML"], "CommonHTML": { matchFontHeight: false } });

With these two adjustments, which could probably be integrated easily, the CommonHTML works like a charme.

eddieschoute commented 6 years ago

KaTeX fonts are also being overriden by .reveal span. This results in ugly typesetting.

csimaoferreira commented 4 years ago

This solution appears to work, where the font size is consistent at first load.

math: { mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js', config: 'TeX-MML-AM_CHTML-full', // pass other options into MathJax.Hub.Config() TeX: { Macros: { RR: "{\bf R}" } , equationNumbers: { autoNumber: "AMS" }}, jax: ["input/TeX","output/CommonHTML"],"CommonHTML": { matchFontHeight: false, scale: 120 } },

hakimel / reveal.js

Weird MathJax output when using TeX-AMS_CHTML-full #1924