CODEWITHSUNDEEP
javascriptandroidhtmlwebviewmathjax
P5music
P5music

Reputation: 3337

MathJax in Android WebView - injecting the script after the HTML page is loaded

I have to add MathJax functionality to my app.

According to some examples the correct script to be added is

<script type='text/x-mathjax-config'>"
                            +"MathJax.Hub.Config({ "
                           + "showMathMenu: false, "
                           + "jax: ['input/TeX','output/HTML-CSS'], "
                           + "showProcessingMessages: false, "
                           + "messageStyle: 'none', "
                           + "extensions: ['tex2jax.js'], "
                           + "TeX: { extensions: ['AMSmath.js','AMSsymbols.js',"
                           + "'noErrors.js','noUndefined.js'] } "
                           + "});</script>"
                           + "<script type='text/javascript' "
                           + "src='file:///android_asset/MathJax/es5/tex-mml-svg.js'"
                           + "></script><span id='math'></span>

The script is loaded from local folder inside the Asset directory.

I have to add that script to a local HTML file when loaded in the Android WebView from another folder on the filesystem (private app folder).

The HTML page has math formulas inside that have to be read by the MathJax functions.

I cannot inject the script as a tag in the HTML file before loading. But also the rendering of the formulas have to be performed immediately after loading.

In the examples they suggest something like:

webView.loadDataWithBaseURL("http://bar", "<script type='text/x-mathjax-config'>"
                        +"MathJax.Hub.Config({ "
                       + "showMathMenu: false, "
                       + "jax: ['input/TeX','output/HTML-CSS'], "
                       + "showProcessingMessages: false, "
                       + "messageStyle: 'none', "
                       + "extensions: ['tex2jax.js'], "
                       + "TeX: { extensions: ['AMSmath.js','AMSsymbols.js',"
                       + "'noErrors.js','noUndefined.js'] } "
                       + "});</script>"
                       + "<script type='text/javascript' "
                       + "src='file:///android_asset/MathJax/es5/tex-mml-svg.js'"
                       + "></script><span id='math'></span>","text/html","utf-8","");

That instruction is executed after the page is loaded, followed by

webView.evaluateJavascript("MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");

that I think is the instruction to render all the math tags in the document

but I get

I/chromium: [INFO:CONSOLE(1)] "Uncaught ReferenceError: MathJax is not defined"

What is the correct way to inject the script in the loaded page and perform the rendering?

Upvotes: 0

Views: 272

Answers (1)

P5music
P5music

Reputation: 3337

The solution for my case was the following code

String scriptText=
                        "MathJax.Hub.Config({ "
                        + "showMathMenu: false, "
                        + "jax: ['input/TeX','output/HTML-CSS'], "
                        + "showProcessingMessages: false, "
                        + "messageStyle: 'none', "
                        + "extensions: ['tex2jax.js'], "
                        + "TeX: { extensions: ['AMSmath.js','AMSsymbols.js',"
                        + "'noErrors.js','noUndefined.js'] } "
                        + "});";

                
String js_command = "var newScript = document.createElement(\"script\");"
+"newScript.setAttribute('type','text/x-mathjax-config');"
+"var inlineScript = document.createTextNode(\""+scriptText+"\");"
+"newScript.appendChild(inlineScript);"
+"document.body.appendChild(newScript);"

+"newScript = document.createElement(\"script\");"
+"newScript.setAttribute('type','text/javascript');"
+"newScript.setAttribute('src','file:///android_asset/MathJax/es5/tex-mml-svg.js');"
+"document.body.appendChild(newScript);";

without the subsequent calling instruction

MathJax.Hub.Queue(['Typeset',MathJax.Hub]);

The code is called this way:

webView.evaluateJavascript(js_command);

After some seconds the script works and the rendering is done, that is, the formulas appear as real math expressions (with right font, layout, and so on).

Upvotes: 1

Related Questions