MathJax on Android

[David Taub]

Hi. I'm trying to get MathJax to work with Android as a local installation.

I've managed to get it functional using Learthrum's reduced version.

The app I am working on first loads a template html vile into a WebView which contains an empty Div element. I then dynamically add math to this element and process it with MathJax.

The problem I am having is with the first run. The first time MathJax formats the math in the Div element, it is incredibly slow, and quite ugly (you see all the underlying Latex code first).

I have spent quite a bit of time trying to figure out how to speed this up, but have not found anything that makes any difference.

Once the Div has been processed it seems to be fast after that.

So, two questions:

1. Is there any way to make it faster? As in you see the processed math without seeing the underlying Latex.

2. Failing that, is there a way I can hide the initial processing and not have it displayed until it complete? I think a blank section with a delay would look much nicer than the gray Latex code hanging around first.

Thanks for any help with this.

As a side note, are there any other good math display methods for Android right now? I tried jqMath which had excellence performance, but really did not look very nice (for example, there was a large gap in the corner with the square root symbols).

[David Taub]

A follow up question that I just thought of. Right now I am using the I use the WebView.loadUrl command to run a short Javascript text on the loaded page that first replaces the Div html with math and then call MathJax to process it.

Is there some way to process the math externally first, from within my Android Activity and then insert the processes math into the Div directly?

[David Taub]

I've tried setting visibility to hidden in the Div and then processing it and then showing it after (I put a show function in the queue after the process math). I've also tried setting the preview text to none.

This almost works. There are strange "artifact" effect - A gray bar flashes under where the Div is and then one flashes to the right, light the background is being selected.

I even tried listing for the Startup message "End" and then showing the Div after that. Didn't help.

If there is a longer delay before the math is processed and displayed in the Div then there is no problem. So it seems I need to wait for something to finish, but I am not sure what.

In my android activity I do the initial math process and display in the "onload" function for the WebView to make sure the page is loaded first.

[Peter Krautzberger]

Hi David,

Sorry that you didn't get a reply earlier. We (the MathJax team) do not have much Android expertise. There are a couple of Android savvy users around but it seems they are unable to reply. The problem always seems to come down to integrating webviews so your posting to SO seems like a good idea. From a MathJax, it's not clear what configuration you're using so it's hard to help with any specifics. 

For startup performance, perhaps there's some way for Android to fetch resources before starting the webview? You probably want to use a combined configuration file to load more components early on or experiment with building single-file versions (that's easier with the SVG output since it doesn't need fonts). If your math is simple, you might want to try the new CommonHTML output in v2.5; it's not feature complete yet though.

For hiding the input source, the easiest way is to directly insert the source into our custom script elements (see the docs for how we store math in the page). I'm guessing the "gray artifact" is our processing bar? That can be disabled via the core configuration options. If you haven't already, check out the samples in our repository for waiting until MathJax's finished and the basic signals.

Regards,

Peter.

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[David Taub]

Hi and thanks for your reply. I can try posting some code snippets later this evening when I get home, but I pretty much copied what Leathrum did here:

http://cs.jsu.edu/wordpress/?p=498

I had tried to create miniature local package myself, but didn't do a very good job about it. The one I copied uses otf instead of SVG - but maybe SVG would be a better choice? Part of the problem is I am not sure about the absolute minimum files I would need to get it working. I tried reading through the minimal footprint guide, but it wasn't detailed enough. I wonder if I could get some tips on making a totally minimal Latex to SVG local installation?

Since it only has to work on the WebView I don't have to care about supporting random browsers which should in theory make it easier, I'm just not sure how.

I do only need very basic math, so any simpler variant would be preferable. I can try and look at the new CommonHTML. What is the advantage with that one?

As for the gray artifact - part of it could be the processing bar, since it does appear under. But there is also a gray artifact to the right, as if it was selecting the end of line or something. I have set messages to none, but is there way to shut the processing bar of more completely?

I'll look over the sample you sent ... i have looked a lot at the "basic signals" page. I have been trying to use this one, which I thought would be appropriate:

MathJax.Hub.Register.StartupHook("End",function () {
  //do suff
});

I have this in a <script> tag at the end of the page. Is this correct usage? I can post the the whole HTML later, though it keeps changing as I experiment with different options.

[David Taub]

Okay, here is the current incarnation of the HTML I am experimenting with. The Callback "firstLoad()" just returns the latex string "$\frac{1}{2}$". 1/2 displays after short delay as expected, even after rotations, but the gray flicker is still present.

<html>

<head>

<style>

html {

background-color:#f1f1f1;

}

#question {

text-align: center;

font-size:24pt;

color:blue;

margin-right:12pt;

}

#long_question {

text-align: center;

font-size:12pt;

color:blue;

}

#instructions {

text-align: center;

font-size:12pt;

color:black;

}

</style>

<meta charset="UTF-8">

<script type="text/x-mathjax-config">

  MathJax.Hub.Config({  

skipStartupTypeset: true,

showMathMenu: false,

jax: ["input/TeX","output/HTML-CSS"],

extensions: ['tex2jax.js'],

TeX: { extensions: ['AMSmath.js','AMSsymbols.js','noErrors.js','noUndefined.js'] },

messageStyle: "none",

tex2jax: {

inlineMath: [['$','$'], ['\\(','\\)']],

preview: "none"

} 

});

</script>

<script type="text/javascript"   src="file:///android_asset/MathJax/MathJax.js"></script>

</head>

<div id="question" style="visibility:hidden"></div>

<script>

function showMath() {

document.getElementById('question').style.visibility="visible";

}

MathJax.Hub.Register.StartupHook('End',function () {

document.getElementById('question').innerHTML=Android.firstLoad();

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

});

</script>

</html>

On Saturday, January 31, 2015 at 6:16:32 PM UTC+1, David Taub wrote:

[David Taub]

I managed to capture a screen shot of the gray flicker that happens right before the math appears:

I also tried an SVG installation, but it was worse. The buttons on the bottom blinked each time it would load, and with new problems the math appeared garbled momentarily before fixing itself. It seems closer with HTML-CSS

[Peter Krautzberger]

Hi David,

>  I wonder if I could get some tips on making a totally minimal Latex to SVG local installation?

Check out https://github.com/mathjax/MathJax-grunt-cleaner for a grunt file to help; it has comments that might help

> Since it only has to work on the WebView I don't have to care about supporting random browsers which should in theory make it easier, I'm just not sure how.

Only in terms of fonts (e.g., just ship otf versions or woff versions) or output (e.g., SVG will not work reliably in Android 2.3, NativeMML is primarily useful on Gecko, somewhat on WebKit, not on Blink or Trident)

> I do only need very basic math, so any simpler variant would be preferable. I can try and look at the new CommonHTML. What is the advantage with that one?

Primarily speed right now. It's about ~10x faster. However, it's not comparable to HTML-CSS or SVG in terms of features or layout quality. This will improve going forward.

Peter.

[Peter Krautzberger]

The easiest way to queue an action after typesetting is to put it on the queue whenever you typeset, cf. http://cdn.mathjax.org/mathjax/latest/test/sample-all-at-once.html

If you just need to hide the input, then you can simply inject the input as custom script tags directly, cf http://docs.mathjax.org/en/latest/model.html#how-mathematics-is-stored-in-the-page

I suspect the initial delay is caused by file loading operations. You might want to try a combined configuration file which combines several components into one file. On the extreme end, you could build a single-file version of MathJax (but with HTML-CSS output you'll still need fonts).

--

[Peter Krautzberger]

Hm... there's a lot of gray. Which part are you referring to? Perhaps a screenshot after the flicker disappears could clarify.

Peter.

--

[David Taub]

In the middle of the screen there is a gray horizontal line across the screen, and to the right of it is a small gray vertical line. These two should not be there and disappear shortly after. Right above this gray horizontal line is where the math appears.

I will try changing the way I react to finished typesetting and see if that helps.

Do you have a suggestion on a combined config file that would be useful? I am now only using otf font for HTML-CSS output (I haven't tried the newer version yet).

I have had some limited success with hiding the WebView in android and then showing it after the math is processed (as opposed just the Div element in the html file). However, another strange problem occurred after this. I know you said there aren't a lot Android programmers here, but I thought I'd mention it just in case:

I create the WebView as normal, but then right before loading the HTML I set it to "invisible". I then load the html and set it to "visible" which shows the math as it should be. However, if I then put new latex in the Div element and run MathJax on it the latex shows up but doesn't get changed into math. I have no idea why this is happening. As far as I can tell the only difference is that I load the html while invisible. I will double check later tonight to make sure that really is the only difference, but I thought there might be known cause for this.

[David Taub]

I tried the queue method with:

<script type="text/x-mathjax-config">MathJax.Hub.Queue([showMath],[Android.showWebView]);</script>

But it does nothing. The same commands in the waiting for "End" signal seem to work.

I also tried put math directly in the script command as shown in the link, but it never displayed. Can you give the script an idea and change the content like any other element with the innerHTML command?

I have also tested variations on the WebView behavior ... it seems the setting to "Invisible" then "Visible" is what is causing mathjax to no longer work, though it works on the first run while it is invisible. I can't find any references that would explain this behavior.