Rendering HTML data which contains math equations in a webview

user_10863132 0
Viewed 769

I want to display Html data into webview which also contains Math equations using MathJax but in my application i am not able to render math equations

I tried using below code

    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setBuiltInZoomControls(true);
    webView.getSettings().setLoadWithOverviewMode(true);
    webView.loadDataWithBaseURL("http://bar/", "<script type='text/x- mathjax-config'>"
            + "MathJax.Hub.Config({ "
            + "showMathMenu: false, "
            + "jax: ['input/MathML','output/HTML-CSS'], " // output/SVG
            + "extensions: ['mml2jax.js'], "
            + "TeX: { extensions: ['noErrors.js','noUndefined.js'] }, "
            //+"'SVG' : { blacker: 30, "
            // +"styles: { path: { 'shape-rendering': 'crispEdges' } } } "
            + "});</script>"
            + "<script type='text/javascript' "
            + "src='file:///android_asset/MathJax/MathJax.js'"
            +"<script type= 'text/javascript' "
            +"src=http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
            + "></script><span id='text'> </span> <span id='math'></span>", "text/html", "utf-8", "");


    String htmlFilename = "test.html";
    AssetManager mgr = getBaseContext().getAssets();
    try {
        InputStream in = mgr.open(htmlFilename, AssetManager.ACCESS_BUFFER);
        String htmlContentInStringFormat = StreamToString(in);
        in.close();
        if (android.os.Build.VERSION.SDK_INT < 19) {
            webView.loadUrl("javascript:document.getElementById('math').innerHTML='"
                                    + "<math xmlns=\"http://www.w3.org/1998/Math/MathML\">"
                                    + "<mstyle displaystyle=\"true\">"
                                    + doubleEscapeTeX(htmlContentInStringFormat)
                                    + "</mstyle></math>';");
            webView.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
        } else {
            webView.evaluateJavascript("javascript:document.getElementById('math').innerHTML='<font color=\"#000000\">`" + doubleEscapeTeX(htmlContentInStringFormat) + "`</font>';", null);
            webView.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
        }
    } catch (Exception e) {

    }

I am loading HTMl file from assets but its not getting rendered

test.html

Euclid’s Division Lemma states that for positive integers c and d with c>d, there exists unique integers q and r satisfying the condition c=dq+r such that 0≤r<d.

Let, any positive integer is c and d=3.

Now, according to Euclid’s algorithm c=3q+r for some other integer q≥0.

All the possible values of remainder are 0, 1, 2 as it satisfies the condition 0≤r<3. Now, the possible values of c are 3q or 3q+1 or 3q+2.

Case 1: If c=3q.

c 3 = ( 3q ) 3 =27 q 3 =9( 9 q 3 ) =9m

Case 2: If c=3q+1.

c 3 = ( 3q+1 ) 3 =27 q 3 +27 q 2 +9q+1 =9( 3 q 3 +3 q 2 +q )+1 =9m+1

Case 2: If c=3q+2.

c 3 = ( 3q+2 ) 3 =27 q 3 +54 q 2 +36q+8 =9( 3 q 3 +6 q 2 +4q )+8 =9m+8

Hence, the cube of any positive integer is of the form 9m, 9m+1 or 9m+8.

android-webview mathjax android
1 Answers

I see that MathJax is used to interpret MathML language.

So I suggest you to use GeckoView insteadof WebView.

GeckoView has a build in support of MathML

https://wiki.mozilla.org/Mobile/GeckoView.

I post a piece of code to show you how to reach the asset file which is in the html subdirectory.

The only problem is that you increase your apk's weight (+30Mo).

enter image description here

enter image description here

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    GeckoView view = findViewById(R.id.geckoview);
    GeckoSession session = new GeckoSession();
    GeckoRuntime runtime = GeckoRuntime.create(this);

    session.open(runtime);
    view.setSession(session);

    session.loadUri("resource://android/assets/html/myMathMLFile.html");
}
user_106017960
Related