Rendu de données HTML contenant des équations mathématiques dans une vue Web

Question

Je veux afficher des données Html dans un webview qui contient aussi des équations mathématiques en utilisant MathJax mais dans mon application je ne suis pas capable de rendre les équations mathématiques.

J'ai essayé d'utiliser le code suivant

    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) {

    }

Je charge le fichier HTMl depuis les actifs mais il n'est pas rendu.

test.html

Le lemme de division d'Euclide stipule que pour les nombres entiers positifs c y d avec c>d, il existe des entiers uniques q y r satisfaisant la condition c=dq+r telle que 0≤r<d.

Soit, tout nombre entier positif est c et d=3.

Maintenant, selon l'algorithme d'Euclide c=3q+r pour un autre entier q≥0.

Toutes les valeurs possibles du reste sont 0, 1, 2 car il satisfait la condition 0≤r<3. Maintenant, les valeurs possibles de c sont 3q ou 3q+1 ou 3q+2.

Cas 1 : Si c=3q.

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

Cas 2 : Si 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

Cas 2 : Si 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

Par conséquent, le cube de tout nombre entier positif est de la forme 9m, 9m+1 ou 9m+8.

Answer 1

Je vois que MathJax est utilisé pour interpréter le langage MathML.

Je vous suggère donc d'utiliser GeckoView au lieu de WebView.

GeckoView a un support intégré de MathML.

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

Je poste un morceau de code pour vous montrer comment atteindre le fichier d'actifs qui se trouve dans le sous-répertoire html.

Le seul problème est que vous augmentez le poids de votre apk (+30Mo).

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");
}