Mathml in Android

2,423 views
Skip to first unread message

Satish Poojary [Agnels]

unread,
Jun 8, 2012, 12:56:04 PM6/8/12
to MathJax Users
I am a newbie to Android. I am developing an app where i have to
render many mathematical expressions. I have the option of using
Mathml using Mathjax or jqmath. For Mathml, i have MathType tool
wherein you feed a mathematical expression and you get the equivalent
Mathml notation. But while using the below code in android to display
the original expression, the rendering is not as i get in the browser:

WebView webView = (WebView) findViewById(R.id.wbvw);
webView.getSettings().setJavaScriptEnabled(true);

String myHtmlString="<!DOCTYPE html><html><head><script type=
\"text/javascript\" src=\"http:/cdn.mathjax.org/mathjax/latest/
MathJax.js?config=TeX-AMS-MML_HTMLorMML\"></script></head><body><math
display='block'><semantics><mrow><mi>x</mi><mo>=</
mo><msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>&#x2212;</
mo><mn>4</mn><mi>a</mi><mi>c</mi></mrow></msqrt></mrow></semantics></
math></body></html>";

webView.loadData(myHtmlString, "text/html; charset=UTF-8",
null);

Could anyone suggest what is missing in the above scriplet. Also, can
someone share the steps to be followed for proper rendering of the
equation. I been following Peter Krautzberger's response and have
found that it is possible to render equations using Webview. Awaiting
a reply.

Thanks,
Satish

Davide P. Cervone

unread,
Jun 8, 2012, 1:07:42 PM6/8/12
to mathja...@googlegroups.com
Looks like you are missing the second slash in "http://
cdn.mathjax.org". Perhaps that is causing MathJax not to load. See
if that fixes the problem.

Davide

Satish Poojary [Agnels]

unread,
Jun 8, 2012, 2:03:17 PM6/8/12
to MathJax Users
Thanks Davide for pointing that out. I tried after adding a '/'
<
WebView webView = (WebView) findViewById(R.id.wbvw);
webView.getSettings().setJavaScriptEnabled(true);

String myHtmlString="<!DOCTYPE html><html><head><script type=
\"text/javascript\" src=\"http://cdn.mathjax.org/mathjax/latest/
MathJax.js?config=TeX-AMS-MML_HTMLorMML\"></script></head><body><math
display='block'><semantics><mrow><mi>x</mi><mo>=</
mo><msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>&#x2212;</
mo><mn>4</mn><mi>a</mi><mi>c</mi></mrow></msqrt></mrow></semantics></
math></body></html>";

webView.loadData(myHtmlString, "text/html; charset=UTF-8",
null);
>

But that didn't help. In some of the previous posts, I could find out
that mathml doesn't work with webview. But then, I have seen a quite
lot of apps with the description of them being developed using
webview. Can you suggest how to move forward. Awaiting your reply.

Regards,
Satish

Thomas Leathrum

unread,
Jun 8, 2012, 2:33:49 PM6/8/12
to mathja...@googlegroups.com
The problem, I think, is with your loadData() call.  Try using loadDataWithBaseUrl() instead, but give it a "fake" http URL domain.  Here is a snippet showing the idea:

webView.loadDataWithBaseURL("http://bar","<html>...</html>);

The problem is actually that the loadData() call assembles everything into a "data:" URL, and scripts have a hard time loading from that kind of URL.  This seems to be a fairly standard trick in dealing with Android WebViews.  The idea is to get the WebView to treat the data as coming from an HTTP transaction rather than raw data from a data URL.  For more complete information, see the post on my Wordpress blog about the Android app I posted earlier this week:

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




Davide P. Cervone

unread,
Jun 8, 2012, 2:34:51 PM6/8/12
to mathja...@googlegroups.com
OK, can you be more specific about what "not rendering as in a
browser" means? Does MathJax not run at all, or is it running and
producing something different than in your browser? Can you provide a
screen shot of the problematic rendering?

Davide

Satish Poojary [Agnels]

unread,
Jun 8, 2012, 3:00:05 PM6/8/12
to MathJax Users
@Thomas : i tried with loadDataWithBaseURL, but it didnt help.
Following is what i have been doing

equation : x = (sqrt( b^2 - 4*a*c)
<

WebView webView = (WebView) findViewById(R.id.wbvw);

webView.getSettings().setJavaScriptEnabled(true);

String myHtmlString="<!DOCTYPE html><html><head><script
type='text/javascript' src='http://cdn.mathjax.org/mathjax/latest/
MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script></head><body><math
display='display'><semantics><mrow><mi>x</mi><mo>=</
mo><msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>&#x2212;</
mo><mn>4</mn><mi>a</mi><mi>c</mi></mrow></msqrt></mrow></semantics></
math></body></html>";

webView.loadDataWithBaseURL("http://bar", myHtmlString, "text/
html","UTF-8",null);

>

The output that i received on my emulator is : x=b2-4ac , which i
highly un-antipicated.

@Davide : I tried displaying the above html ( assigned to
'myHtmlString) on all my browsers (IE, Chrome, FF, Safari), i got a
perfectly well-structured output which actually resembles the output
one would expect. <<snapshot : http://postimage.org/image/yoikjincn/>>.

Could you both kindly suggest should i continue with Mathml or switch
to some other alternative. I really can't figure out how to actually
move ahead with mathml with no help available on the net.

Thomas Leathrum

unread,
Jun 8, 2012, 4:13:32 PM6/8/12
to mathja...@googlegroups.com
Why did you stop escaping the quotations in myHtmlString?  For example, earlier you had type=\"text/javascript\", but in the latest version you have type='text/javascript' -- you were right the first time, and these strings tend to be *very* sensitive to this sort of problem.  You may even need some extra escaping on the HTML entity -- that is, you may need "&amp;#2212;" instead of just "&#2212;" (I'm not sure about this, though).  I haven't had a chance yet to sit down and code a test to get your expression to display, but I will do that tonight and let you know the results.

As for alternatives to MathJax, I admit that I am somewhat biased, but I still think MathJax is the right approach.  None of the alternatives are going to give you such well-formatted expressions with the same scaling and layout options in Android widgets.

Satish Poojary [Agnels]

unread,
Jun 8, 2012, 4:31:25 PM6/8/12
to MathJax Users
Thanks Thomas,

I'll consider your points and shall await your response.

Regards,
Satish

On Jun 8, 1:13 pm, Thomas Leathrum <leath...@jsu.edu> wrote:
> Why did you stop escaping the quotations in myHtmlString?  For example,
> earlier you had type=\"text/javascript\", but in the latest version you
> have type='text/javascript' -- you were right the first time, and these
> strings tend to be *very* sensitive to this sort of problem.  You may even
> need some extra escaping on the HTML entity -- that is, you may need
> "&amp;#2212;" instead of just "&#2212;" (I'm not sure about this, though).
> I haven't had a chance yet to sit down and code a test to get your
> expression to display, but I will do that tonight and let you know the
> results.
>
> As for alternatives to MathJax, I admit that I am somewhat biased, but I
> still think MathJax is the right approach.  None of the alternatives are
> going to give you such well-formatted expressions with the same scaling and
> layout options in Android widgets.
>
>
>
>
>
>
>
> On Friday, June 8, 2012 2:00:05 PM UTC-5, Satish Poojary [Agnels] wrote:
>
> > @Thomas : i tried with loadDataWithBaseURL, but it didnt help.
> > Following is what i have been doing
>
> > equation :  x = (sqrt( b^2 - 4*a*c)
> > <
>
> > WebView webView  = (WebView) findViewById(R.id.wbvw);
>
> >         webView.getSettings().setJavaScriptEnabled(true);
>
> >         String myHtmlString="<!DOCTYPE html><html><head><script
> > type='text/javascript'  src='http://cdn.mathjax.org/mathjax/latest/
> > MathJax.js?config=TeX-AMS-MML_HTMLorMML<http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_H...>'></script></head><body><math

Davide P. Cervone

unread,
Jun 8, 2012, 5:32:03 PM6/8/12
to mathja...@googlegroups.com
From your description it looks like MathJax is not running. (The
entity is not a problem because you are seeing the minus sigh in the
output.) What you are seeing is the browser ignoring the unknown
MathML tags and just displaying their contents. This suggests that
MathJax either hasn't loaded or hasn't run. You might try adding

<script>
alert(window.MathJax)
</script>

to the bottom of the page and see if you get "[Object Object]" or
"undefined" as the output. The former means MathJax is loaded, and
the latter that it hasn't loaded.

You might also try loading a page like "http://www.mathjax.org" rather
than a string and see if MathJax runs there.

Davide

Thomas Leathrum

unread,
Jun 8, 2012, 6:41:52 PM6/8/12
to mathja...@googlegroups.com
OK, I got your code working.  Here is the complete onCreate() method:

    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        WebView w = (WebView) findViewById(R.id.webview);
        w.getSettings().setJavaScriptEnabled(true);
        w.loadDataWithBaseURL("http://bar","<script type='text/javascript' "
        +"src='http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'>"
        +"</script><math display='block'><semantics><mrow><mi>x</mi><mo>=</mo>"
        +"<msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>&#x2212;</mo>"
        +"<mn>4</mn><mi>a</mi><mi>c</mi></mrow></msqrt></mrow></semantics></math>",
        "text/html","utf-8","");   
    }

You were very much on the right track all along.  (It turns out that escaping the single quotes was not necessary after all.)  Of course, you will need a WebView set up in your layout/main.xml file -- in the above, the WebView has ID "webview" (attribute android:id="@+id/webview").

Now be forewarned:  if you just paste this into your code, it still won't work.  You need to authorize the app for Internet access.  You need the following in your AndroidManifest.xml file:

    <uses-permission android:name="android.permission.INTERNET"/>

That'll do it.  Compile with this and it will work.  It did for me, anyway.  I'm pretty sure what you have been missing is that last permission.

Satish Poojary [Agnels]

unread,
Jun 9, 2012, 2:40:24 AM6/9/12
to MathJax Users
Thanks a ton Davide and Thomas for your help and time.

I tried out the steps that you both suggested.

Here is the snapshot.

<<http://postimage.org/image/47d083y89/>> Mathjax running for the
first time on my emulator. :)

Shall approach again If i get stuck somewhere. :).
Thanks again.

Cheers, Satish

Davide P. Cervone

unread,
Jun 9, 2012, 7:32:46 AM6/9/12
to mathja...@googlegroups.com
Good to know that you are making progress. I suspect that Tom's
identification of a permission to allow internet access is the key
ingredient.

Davide

brassi...@gmail.com

unread,
Aug 22, 2013, 3:34:44 PM8/22/13
to mathja...@googlegroups.com
Thanks a million for this, it saved me loads of time to begin my project, within half an hour I was looking at maths on my tablet. Works a treat.

Paul Brassington
Reply all
Reply to author
Forward
0 new messages