Standalone MathJax App for Android

I have gotten the MathJax app for Android working in standalone form — that is, with MathJax included in the app package, no need for an internet connection for it to work. Here are links to the files:

I have also updated the links to the online version of the app (the previous version, which requires an internet connection so that it can get MathJax from the CDN) — just to have everything in one place, here are the links to the files for that app:

As usual, you can download the files with right-click -> “Save Link As…”.

Again, some programming notes: As I indicated in an earlier post, one thing I was trying to sort out in developing the standalone app was whether to use application assets or raw resources. I saw some advantages to raw resources because of the internationalization mechanism, but it turns out that the mechanism itself causes some problems with subdirectories, so I had to use assets. I was still having some trouble loading the scripts from the assets directory, though, and I thought I might have to overload the WebViewClient.shouldInterceptRequest() method in order to modify URLs that are called from within the JavaScript and make sure they point to the appropriate places in the assets directory. I did override this method temporarily in order to display the URL in a Toast notification, for diagnostic purposes, but what I discovered was that the problem was more basic than that. Files in the assets directory are accessed using file: URLs, which are not a problem for MathJax, but the standard way of loading a configuration for MathJax uses a URL parameter in the form “?config=...” — it turns out that file: URLs and URL parameters just don’t play well together at all. So I had to use <script type="x-mathjax-config"> tags in the HTML in order to load the configuration. This turned out to be a good thing in the long run — it gave me the flexibility in the configuration to pick and choose what was needed for the WebView and scale down the local MathJax installation. I got the MathJax directory down to about 1.4Mb total (in uncompressed form — that’s down from 20.8Mb for the full installation). This made for a nice, reasonably lean standalone app (the compressed APK is about 1.0Mb). The online version is still much more lightweight (its APK is about 155Kb) and is still available for those who prefer it.

One other point: The standalone app uses the HTML-CSS output mode for MathJax — the other option for the WebView would have been SVG output. I prefer the glyphs in the OTF fonts used by the WebView for HTML-CSS output because they are a bit lighter than the glyphs in the SVG output. There are some long-term advantages to SVG in terms of browser standards, but I don’t expect the app to go that long without needing an update anyway — MathJax version 2.1 is already in the works. I can re-evaluate this choice when I work on the next update.

28 thoughts on “Standalone MathJax App for Android

  1. Hello,

    Your app works like a charm, I am trying to render MathML expression
    I did following changes for MathML but dosent work, would you please suggest What I am missing ?

    w.loadDataWithBaseURL(“http://bar”, “” + “MathJax.Hub.Config({ ”

    + “showMathMenu: true, ” + “jax: ['input/MathML','output/HTML-CSS'], ”

    + “extensions: ['toMathML.js'], ” + “TeX: { extensions: ['AMSmath.js','AMSsymbols.js',"

    + "'noErrors.js','noUndefined.js'] } ” + “});” + “”, “text/html”,

    “utf-8″, “”);

    Thanks
    Makrand

    • It’s already available on my github site — look for MathJaxAppFull.apk (and source directory) at:

      https://github.com/leathrum/android-apps/tree/master/MathJaxApp

      I am also working on yet another version, with a button which will show the translation of the TeX math input into MathML, and copy the MathML onto the system clipboard suitable for pasting using an editor app. I should be posting that on github after the beginning of the year.

      • Hi Nice reading your blog. On sowmheat parallel lines as yours, I did my grad. in computer science, and then through a circuitous route landed up as an business consultant. After several years in this line, I decided to re-learn mathematics too for the fun and satisfaction of it, and started with Strang’s linear algebra Needless to say, I find your blog very helpful!.After Strang I am aiming for Real Analysis by Chapman let’s hope I get there Good luck of your math journey.. and do keep posting!Regards Sharad Bansal

  2. I was using this in my app. But i am facing following problems.

    1) Webview works sometimes but most of the time it does’t. I see following error on logcat.
    unknown chromium error: – 6

    2) Loading of webview is very slow. What can i do to make it fast ??
    Thanks

    Here is my code , I just copied it from your activity. Please let me know if i need to make any changes.

    String ans_tex = getAns();

    WebView w = (WebView) convertView.findViewById(R.id.row_a);
    w.getSettings().setJavaScriptEnabled(true);
    w.getSettings().setBuiltInZoomControls(true);
    w.loadDataWithBaseURL(“http://bar”, “”
    +”MathJax.Hub.Config({ ”
    +”showMathMenu: false, ”
    +”jax: ['input/TeX','output/HTML-CSS'], ”
    +”extensions: ['tex2jax.js'], ”
    +”TeX: { extensions: ['AMSmath.js','AMSsymbols.js',"
    +"'noErrors.js','noUndefined.js'] } ”
    +”});”
    +”",”text/html”,”utf-8″,”");

    w.loadUrl(“javascript:document.getElementById(‘math’).innerHTML=’\\\\["
    +doubleEscapeTeX(ans_tex)+"\\\\]‘;”);
    w.loadUrl(“javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);”);

    • I haven’t been able to reproduce your problem yet, but I am trying to figure out what you are seeing — I didn’t want you to think I wasn’t paying attention here. It might help if you can tell me something about your Android system version and platform.

    • I love the way you render the maths on your site. I am prsneetly using Drupal on my site and also use mathtype (equation editor) to generate images and web pages. I want sometime different, a website where my visitors can ask and input mathematical questions without latex.What is best opinion of how i should go about this.I think you should add capthacha to your site to prevent abuse. I have experienced that alot on my site

  3. Pingback: Math formulas on textview in android : Android Community - For Application Development

  4. I’m really plesead this has happened. Implementation of MathJax across the BioMed Central and SpringerOpen journals has significantly improved our article full text display. We’re working on upgrading to MathJax 2.0 right now.Springer is a leading publisher of mathematics journals and will be able to contribute a wealth of experience in the future development of this excellent open source project.Thanks to the community for its efforts so far.Bryan

  5. Hey, the app works like charm on my phone. However I wanted to use your app as a reference to create my own app which shows a bunch of formulae using MathJax. I tried to download the source from your github repository and import it in Eclipse, but it gives me lots of errors like R.array is not found and so on. Can you help me importing it into eclipse, or perhaps write a quick guide on how to use MathJax in an android app? Thanks in advance.

  6. Pingback: How to load mathjax formula from hard-coded string equation | BlogoSfera

  7. I have a question. The standalone app takes user input from EditText and convert to latex after button is pressed to confirm. What if I just need to convert a hard-coded string, I don’t need user to press to confirm, how should I modify it? I tried to change

    w.loadUrl(“javascript:document.getElementById(‘math’).innerHTML=’\\\\["
    +doubleEscapeTeX(e.getText().toString())
    +"\\\\]‘;”);

    to

    w.loadUrl(“javascript:document.getElementById(‘math’).innerHTML=’\\\\["
    +doubleEscapeTeX("sample string")
    +"\\\\]‘;”);

    but it doesn’t work. The text “sample string” won’t even show up in the webview…

  8. Pingback: How to Display Math Formula in Android | BlogoSfera

  9. Pingback: Display Good-looking Math Formula in Android | BlogoSfera

  10. Is there any chance of using this app in MIT App Inventor projects?

    I am a novice in App development and I am learning all these using App Inventor. So If want to write an inline equation in an App, how do I do that?

    Please help me..

    Sri Hari

  11. Hi,
    may you please be so kind to specify how to use MathJax into my android project?
    Is loading the MathJax APK enough? How to do that?

    Tx.

  12. Hi,
    I have a website with inline MathJax, i.e. I used formulas inline with text.
    In my HTML page I load therefore the following line also.
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
    (cfr. documentation available at http://docs.mathjax.org/en/v1.1-latest/options/tex2jax.html )

    However, if I try to add the above mentioned line to your code, my formulas do not work in Android.

    How can I convert my website to show such written formulas in Android?

    Tx a lot.

  13. Hello,

    I’m using close to exactly your code for the offline version but alway stumble over “Uncaught Error: SECURITY_ERR: DOM Exception 18“ when including the MathJax javascript from android assets. How did you get around it?

    Best regards
    Raphael

  14. I’m designing an app to display the mathematical equations in it. I tries mathjax too.. I couldn’t understand. could somebody help me????

  15. I am using your MathJax in my android app with your apps help.
    It works well on android 4.3 and lower but On android 4.4 it is giving following error

    12-14 03:16:54.633: I/chromium(1101): [INFO:CONSOLE(1)] “Uncaught ReferenceError: MathJax is not defined”, source: http://bar/ (1).

    Could you please help ?

    • I have replied to you by e-mail as well — thank you for telling me about this, I had been anticipating problems with WebView updates because the use of a base URL in the loadWithBaseURL() call is a bit of a kludge, but I didn’t know that the KitKat update broke that. The KitKat update introduces a whole new, Chromium-based (as opposed to Webkit-based) WebView object, and the Chromium version has some tighter restrictions on valid base URLs. I will post updates here as I figure out what works and what doesn’t.

      • Hi,
        Thanks for your blog. This saved a lot of my time & effort.

        Could you pls update me on using Mathjax with kitkat?

        Thank you.

  16. Somehow the full app fails to render a capital “A” in the equation, while everything else works perfectly. I am trying to use your toned-down MathJax in my app. Would you be able to have a look at where the problem might be?

  17. Hi and thank you so much for your library! It really helped me a lot!

    I have one problem however… The chemical formula doesn’t work (\ce) in Android.
    Do you have the same problem?

    With thanks :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>