MathJax formulas are not rendered correctly with the HTML-CSS output on Docker

[JanoschDeurer]

If I try to create a pdf from a reveal.js presentation then all mathjax formulas are replaced by decktape with boxes which makes them unreadable. Am I supposed to somehow load an additional math font or something?

[astefanutti]

@JanoschDeurer you may find some information in #50 and #72. Let me know if that helps.

[JanoschDeurer]

Thanks for the quick response. My description was a bit imprecise so I attached a screenshot this time:

As you can see the formula is not rendered with the wrong spacing or font but with actual boxes around it.

[astefanutti]

Would you be able to produce a minimal sample so that I can reproduce?

[JanoschDeurer]

I produced a minimal example here: https://wobble.ninja/temp/demo-minimal.zip (I couldn't upload it as a comment attachment for some reason, hence the link)

While trying to create an example as small as possible I noticed that the formula must be at least on the 9th page. If you remove one of the previous pages the boxes will go, but the formula will still be rendered incorrectly.

[astefanutti]

Thanks for the minimal example and sorry for the delay.

I've just tried exporting the example with DeckTape 1.0.0 and have been able to produce the following PDF: test.pdf. I've tested it on Mac OS X and Linux, without being able to reproduce your issue.

Note that I've just changed the example to use the latest MathJax lib from their CDN. Besides, could you confirm you use DeckTape version 1.0.0. What OS are you using?

Let me know if I can do anything else.

[JanoschDeurer]

Hey, thanks for the answer. I use the latest docker image, I should have mentioned this before to make reproducing the error easier. My setup is as follows:

I make revealjs available on port 8000 using the following docker image I created: https://hub.docker.com/r/agiled/reveal.js-docker/

I just updated my local version of the container to the latest MathJax from Github, so this should be ok as well.

I execute a script that goes recursively through a given path finds all index.html files and runs your docker image on all these files. I attached the script here: pdfgen.zip, but a simple use of the docker image over http should suffice.

Thank you for your help :)

[astefanutti]

I've been able to reproduce the issue with the following:

$ docker run --rm -v `pwd`:/slides astefanutti/decktape index.html test.pdf --load-pause=20000

There are multiple things:

• Reveal loads the MathJax extension asynchronously, so adding the --load-pause option make sure all the dependencies get loaded (that explains the behaviour change when adding or removing empty slides);
• The TeX-AMS_HTML-full MathJax configuration uses the HTML-CSS output, which is supposed to download the necessary webfonts and fontdata dynamically as documented in MathJax font support However, it seems to fail and fallback to PNG font data (like https://cdn.mathjax.org/mathjax/2.7-latest/fonts/HTML-CSS/TeX/png/Math/Italic/476/0045.png?V=2.7.0), which I suspect is the reason why white boxes get rendered.

I've tried changing the MathJax RevealJS extension configuration to use the SVG output, e.g.:

Reveal.initialize({

    math: {
      mathjax: 'https://cdn.mathjax.org/mathjax/latest/MathJax.js',
      config: 'TeX-AMS_SVG'
    },
...

And that fixes the issue. So that can be a potential work-around (in addition to using binaries instead of Docker) in the short term.

I've tried updating the Docker image by installing the fonts-mathjax package, though that does not change the rendering. So it seems that there is an issue with the HTML-CSS output where dynamic fonts downloading does not work.

[astefanutti]

As an additional note, it seems the HTML-CSS output retrieve the font data for the formulas from: https://cdn.mathjax.org/mathjax/latest/jax/output/HTML-CSS/fonts/STIX/fontdata.js?V=2.7.0. It may be that PhantomJS is not capable of taking those fonts into account correctly.

[astefanutti]

Should be fixed in version 2.0.1 that uses headless Chrome. Let me know if you still face this issue.