# 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.

Update: As seen in the comments below, this app has a problem in Android v4.4 KitKat. After too long of a delay, I finally have a fix, and it turns out to be really simple. I will put up a new post and update the code very soon.

Update 2: The APK and MainActivity.java source code file at the links above have been updated with the KitKat fix. See this post for information about the fix. I have also updated the assets ZIP file with MathJax version 2.3, and updated the information in the license notice file.

## 34 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);
+”MathJax.Hub.Config({ ”
+”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)+"\\\$‘;”);

• 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. 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

4. 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.

5. 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…

6. 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?

Sri Hari

7. Hi,
Just had to give a big thanks for creating this sample project, it helped me understand how to integrate MathJax in an app

/Pär

8. 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.

9. 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.

10. 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

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

12. 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).

• 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.

13. 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?

14. Nice work done by you

15. 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

16. Hi,
I am not good at English, but I hope you understant my problem:
I tried to make a custom webview to show maths expressions anywhere needed in my applicaiton. But it doesn’t work. In log cat I found this: Uncaught ReferenceError: MathJax is not defined.
Here are the codes of my webview control:
import android.content.Context;
import android.util.AttributeSet;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;

public class Denklem extends WebView {

private String doubleEscapeTeX(String s) {
String t=”";
for (int i=0; i < s.length(); i++) {
if (s.charAt(i) == '\'') t += '\\';
if (s.charAt(i) != '\n') t += s.charAt(i);
if (s.charAt(i) == '\\') t += "\\";
}
return t;
}

private void init(final Context context) {
getSettings().setJavaScriptEnabled(true);
getSettings().setBuiltInZoomControls(true);
+”MathJax.Hub.Config({ ”
+”jax: ['input/TeX','output/HTML-CSS'], ” // output/SVG
+”extensions: ['tex2jax.js','toMathML.js'], ”
+”TeX: { extensions: ['AMSmath.js','AMSsymbols.js',"
+"'noErrors.js','noUndefined.js'] }, ”
//+”‘SVG’ : { blacker: 30, ”
// +”styles: { path: { ‘shape-rendering’: ‘crispEdges’ } } } ”
+”});”
+”"
+”getLiteralMML = function() {”
+”math=MathJax.Hub.getAllJax(‘math’)[0];”
// below, toMathML() rerurns literal MathML string
+”mml=math.root.toMathML(”); return mml;”
+”}; getEscapedMML = function() {”
+”math=MathJax.Hub.getAllJax(‘math’)[0];”
// below, toMathMLquote() applies &-escaping to MathML string input
+”mml=math.root.toMathMLquote(getLiteralMML()); return mml;}”
+”"
+”",”text/html”,”utf-8″,”");
class JsObject {
@JavascriptInterface
public String toString() { return “injectedObject”; }

@JavascriptInterface
public void clipMML(String s) {
android.text.ClipboardManager clipboard = (android.text.ClipboardManager) context.getSystemService(Context.CLIPBOARD_SERVICE);
clipboard.setText(s);
}
}
}

public void showExpression(String ifade) {
loadUrl(“javascript:document.getElementById(‘math’).innerHTML=’\\\$" +doubleEscapeTeX(ifade) +"\\\$‘;”);
}

public Denklem(Context context, AttributeSet attrs, int defStyle,
boolean privateBrowsing) {
super(context, attrs, defStyle, privateBrowsing);
init(context);
}

public Denklem(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}

public Denklem(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}

public Denklem(Context context) {
super(context);
init(context);
}

}

17. i have an app that I am making and i realize that i have to do some configuration on Mathjax so that custom commands like mathb can be converted to mathbf. this is the configuration line that i was thinking i should add :


where is the MathJax folder or where in my code should i do a custom configurations? which files in the assets folder should i modify? here is an example : diff in my code should be rendered as d/dx

18. Hey Friend,

I Liked your Library and i am planning to integrate it with my application which has requirement to show MathML files. Now I have a folder of .mml files provided to me i just want to know how should use it using your source code.

Your Help would be Extremely appreciated!!

Faithfully,
Jose Varghese.

• In your reply : it would be helpful if you explain me the following piece of your code.(My apologies if the question is naive).

+”MathJax.Hub.Config({ ”
+”jax: ['input/TeX','output/HTML-CSS'], ”
+”extensions: ['tex2jax.js'], ”
+”TeX: { extensions: ['AMSmath.js','AMSsymbols.js',"
+"'noErrors.js','noUndefined.js'] } ”
+”});”
+”",”text/html”,”utf-8″,”");

19. how to output in SVG on stand alone version?

i tried to replace HTML-CSS with SVG, and I got math processing Error
Here my code:
+”MathJax.Hub.Config({ ”
+”jax: ['input/AsciiMath','output/SVG'], ”
+”extensions: ['asciimath2jax.js'], ”
+”AsciiMath: { fixphi: true, useMathMLspacing: true, displaystyle: false, decimalsign: \”.\” } ”
+”});”
+”"
// /* to reverse, uncomment //
+”getLiteralMML = function() {”
+”math=MathJax.Hub.getAllJax(‘math’)[0];”
// below, toMathML() rerurns literal MathML string
+”mml=math.root.toMathML(”); return mml;”
+”}; getEscapedMML = function() {”
+”math=MathJax.Hub.getAllJax(‘math’)[0];”
// below, toMathMLquote() applies &-escaping to MathML string input
+”mml=math.root.toMathMLquote(getLiteralMML()); return mml;}”
+”"
+”",”text/html”,”utf-8″,”");

another question is, Why the code above work on jelly bean 4.3. But when I tried on Kitkat 4.4, it went total blank?

thank you for your help..