local MathJax work weird with v4.1.0

[g4gilson]

I try to use MathJax with a local configuration:

:stem:
:mathjaxdir: local/MathJax-2.7.6

but I get a strange rendering:

I tried with Mathjax v2.4.0, v2.7.5 and v2.7.6.

In html I get a link like: local/MathJax-2.7.6/MathJax.js?config=TeX-MML-AM_HTMLorMML

when I modify it by (don't work with Mathjax v2.4.0, but I do it with v2.7.6 not check with v2.7.5): local/MathJax-2.7.6/MathJax.js?config=TeX-MML-AM_CHTML I get this:

So, I don't know what change between these configuration but, in local and online (I do not clear cache) I get a good render with: config=TeX-MML-AM_CHTML configuration.

[ggrossetie]

Are you using a local HTTP server to preview the presentation? Any errors in the Web console? Also, which browser are you using?

For reference, we are using the same config as the built-in HTML5 converter: https://docs.mathjax.org/en/v2.7-latest/config-files.html#the-am-chtml-configuration-file

On the browser extension, I'm already using the CHTML output (with MathJax 3).

The CommonHTML output processor renders your mathematics using HTML with CSS styling. It produces high-quality output in all modern browsers, with results that are consistent across browsers and operating systems. This is MathJax’s primary output mode since MathJax version 2.6. Its major advantage is its quality, consistency, and the fact that its output is independent of the browser, operating system, and user environment. This means you can pre-process mathematics on a server, without needing to know the browser, what fonts are available, and so on. (In version 2, both the HTML-CSS and NativeMML processors produced different output for different browsers and user environments.)

http://docs.mathjax.org/en/latest/output/html.html#html-support

So we might consider switching to CommonHTML but first I want to understand why you are experiencing this issue (or rather under what conditions this happens).

[g4gilson]

I have no error in console and I haven't using a local server, I just open the html with my navigator. In firefox 84.0 inspector: When the page work, config=TeX-MML-AM_CHTML, I have in the html to print the ≈ :

<span id="MJXc-Node-47" class="mjx-mo" style="padding-left: 0.333em; padding-right: 0.333em;">
<span class="mjx-char MJXc-TeX-main-R" style="padding-top: 0.201em; padding-bottom: 0.313em;">≈
</span>
</span>

When the page doesn't work, config=TeX-MML-AM_HTMLorMML, I have in the html to print the ≈ :

<span class="mo" id="MathJax-Span-47" style="padding-left: 0.333em; padding-right: 0.333em;">
<img src="file:///local/MathJax-2.7.6/fonts/HTML-CSS/TeX/png/Main/Regular/476/2248.png?V=2.7.6" style="width: 34px; height: 20px; vertical-align: 2px; margin-right: 0.056em;">
</span>

file:///local/MathJax-2.7.6/fonts/HTML-CSS/TeX/png/Main/Regular/476/2248.png is this image:

When I use the same configuration but instead of use a local link, I use : https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-MML-AM_HTMLorMML I have this in html:

<span class="mo" id="MathJax-Span-47" style="font-family: MathJax_Main; padding-left: 0.333em; padding-right: 0.333em;">≈</span>

and it is printed properly. I don't know how it is possible, I download the MathJax v2.7.6 to use it locally here: https://github.com/mathjax/MathJax/releases/tag/2.7.6

[ggrossetie]

I cannot reproduce this issue, I just did a test with MathJax 2.7.6 and it's working fine in both Chrome and Firefox (with or without a local HTTP server).

I don't know why but it seems that in your case MathJax is falling back to images instead of HTML + CSS. Since we apply a style on all <img> elements (most specifically a black border) it does not look so great.

Here's the result on my end:

Chrome

Firefox

[g4gilson]

I think that I find out somrthing. to reproduce the error:

1. download MathJax v2.7.6 to use it locally here: https://github.com/mathjax/MathJax/releases/tag/2.7.6
2. In examples/mathjax-cdn.adoc replace the

:mathjaxdir: [...]

by

:mathjaxdir: ../MathJax-2.7.6

and place the download MathJax dir properly 3) convert it with ascii doctor reveal js v4.1.0 and print it in a navigator I have that: 4) replace again the same line by

:mathjaxdir: MathJax-2.7.6

and place the download MathJax dir properly 5) convert it with ascii doctor reveal js v4.1.0 and print it in a navigator I have that:

the relative path with .. seems to not work properly

[ggrossetie]

@g4gilson I can only reproduce this issue using Firefox without a local HTTP server. On Chrome it's working even when I'm not using a local HTTP server.

Anyway, I think it's a limitation/issue on MathJax.

We can keep this issue open to make sure that this issue is gone once we've upgraded to MathJax 3: https://github.com/asciidoctor/asciidoctor-reveal.js/issues/369

[g4gilson]

Nice, I find a way that can be reproduced. Thanks for your answers :+1:. So if I understand, I can fix it with a local HTTP server. How can I setup that? I can launch one reveal js http server on port: 18736 but how can I configure it in .adoc to get it?

[ggrossetie]

You need to convert your AsciiDoc presentation to HTML and then serve this HTML file using a local HTTP server.

Depending on your environment you have several options. I guess using Python SimpleHTTPServer is probably the easiest solution:

$ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...

You will need to serve from the root, otherwise .. won't be resolved. In other words, if you have the following directory structure, you will need to start the local HTTP server at the root (not in the docs directory):

.
├── docs
│   ├── presentation.adoc
│   └── presentation.html
└── mathajax-2.7.6

And use http://localhost:8000/docs/presentation.html to preview your presentation.

[g4gilson]

thank you, that works as expected :+1:

[archiloque]

@Mogztter as the update to MathJax 3 has been done, shall this issue be closed ?