Gut aussehende mathematische Formel in Android anzeigen

Question

Jun 10, 2013, 07:44 PM

Gut aussehende mathematische Formel in Android anzeigen

Es ist traurig zu sehen, dass Wissenschaft und Mathematik auf der Android-Plattform nie genug Beachtung finden. Vielleicht ist das ein einfaches Problem, aber ich bin totalKumpel Ich habe Probleme zu verstehen, wie ich dieses Problem lösen kann.

Was ich tun möchte, ist einfach:Ich muss nur mathematische Gleichungen rendern. Es kann MathJax oder JqMath sein oder alles, was klein und schnell ist. Wie kann ich in einer Webansicht einfachen Text in Absätzen und formatierten Gleichungen anzeigen?

(jeder kommt mit anderen Methoden heraus, die offensichtlich funktionieren, ich werde das auch als Lösung betrachten)

WAS ICH BISHER GEMACHT HABE:

Ich habe mit MathJax angefangen, um Formeln in die Webansicht zu bringen (Ich weiß nicht, ob es einen erfolgreichen jqMath-Anwendungsfall gibt. Möchte jemand seine Erfahrungen teilen?) Ich kann alle Funktionalitäten genau wie die des Standalone reproduzierenMathJax App. In dieser App gibt ein Benutzer eine Zeichenfolge in das EditText-Feld ein und MathJax rendert die Formel in Latex, sobald der Benutzer eine Schaltfläche zur Bestätigung drückt.

Ich brauche keinen Benutzer zur Bestätigung. Ich dachte, das sollte einfacher sein, da es keine Benutzerinteraktion gibt, aber irgendwie wird die Gleichung nie angezeigt. Ich weiß, dass mir etwas fehlen muss, da die Codes im eigenständigen MathJax für Benutzereingaben bestimmt sind. Welchen Teil des Codes muss ich ändern, um eine Gleichung direkt aus einer Zeichenfolge zu rendern, z. B. \ sqrt {b ^ 2-4ac}? Hier ist der anfängliche Header für die Webansicht:

WebView w = (WebView) findViewById(R.id.webview);
w.getSettings().setJavaScriptEnabled(true);
w.getSettings().setBuiltInZoomControls(true);
w.loadDataWithBaseURL("http://bar", "<script type='text/x-mathjax-config'>"
                        +"MathJax.Hub.Config({ showMathMenu: false, "
                        +"jax: ['input/TeX','output/HTML-CSS'], "
                        +"extensions: ['tex2jax.js'], " 
                        +"TeX: { extensions: ['AMSmath.js','AMSsymbols.js',"
                        +"'noErrors.js','noUndefined.js'] } "
                        +"});</script>"
                        +"<script type='text/javascript' "
                        +"src='file:///android_asset/MathJax/MathJax.js'"
                        +"></script><span id='math'></span>","text/html","utf-8","");

Und so wird die ursprüngliche Webansicht geladen, wenn der Benutzer nach der Eingabe in edittext eine Schaltfläche drückt:

WebView w = (WebView) findViewById(R.id.webview);
EditText e = (EditText) findViewById(R.id.edit);
w.loadUrl("javascript:document.getElementById('math').innerHTML='\\\\["
                  +doubleEscapeTeX(e.getText().toString())
                  +"\\\\]';");
w.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");

private static 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;
}

Ich habe versucht, durch eine fest codierte Zeichenfolge zu ersetzen

w.loadUrl("javascript:document.getElementById('math').innerHTML='\\\\["
                  +doubleEscapeTeX("sample string")
                  +"\\\\]';");

aber es klappt nicht, der text"sample string" wird nicht einmal in der Webansicht angezeigt.

[LÖSUNG] siehe Joes Antwort

Um seine Antwort zu erläutern, ist dies ein Beispiel dafür, wie Sie einen Satz im Klartext setzen und dann eine formatierte Gleichung in Anzeigeform anzeigen (alles in einer einzigen Webansicht):

Ersetzen Sie die letzte Zeile um

+"></script><span id='math'></span>","text/html","utf-8","");

mit

+"></script><span id='text'>This is plain text.</span> <span id='math'></span>", "text/html", "utf-8", "");

Dann ruf an

w.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
    super.onPageFinished(view, url);
        if (!url.startsWith("http://bar"))
            return;
        w.loadUrl("javascript:document.getElementById('math').innerHTML='\\\\["
                    +doubleEscapeTeX("\\sqrt{b^2-4ac}") + "\\\\]';");
        w.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
    }
});

Dadurch wird eine Zeichenfolge festgelegtDies ist normaler Text in normaler Schrift und in der Mitte die Formel anzeigen in der Webansicht.

EDIT (Android 4.4 Ausgabe)

Beginnend mit Android KitKat müssen Sie alle Zeilen ersetzenloadUrl(...) mitevaluateJavascript(...). Da dies jedoch nur für KitKat (API 19 oder höher) verfügbar ist, müssen Sie zuerst eine SDK-Versionsprüfung durchführen. Zum Beispiel:

if (android.os.Build.VERSION.SDK_INT < 19) {
    w.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
} else {
    w.evaluateJavascript("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);",null);
}

UPDATE (AB MATHJAX 2.5)

Da sich Ordner ändern, funktioniert der vorherige Code in der neuesten Version von MathJax nicht. Außerdem wird jetzt die empfohlene Methode zum Minimieren der Größe von lokalem MathJax verwendetGrunzen. Die Vorlage zum Verkleinern von MathJax finden Sie hierHier.

Angenommen, Sie haben MathJax erfolgreich verkleinert und die Ausgabe von HTML-CSS vorausgesetzt, dann ist hier eine einfache Version, die MathJax laden kann:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    final WebView w = (WebView) findViewById(R.id.webview);
    w.getSettings().setJavaScriptEnabled(true);
    w.getSettings().setBuiltInZoomControls(true);

    String Url = "</style>"
                 + "<script type='text/x-mathjax-config'>"
                 + "  MathJax.Hub.Config({" + "    showMathMenu: false,"
                 + "             jax: ['input/TeX','output/HTML-CSS', 'output/CommonHTML'],"
                 + "      extensions: ['tex2jax.js','MathMenu.js','MathZoom.js', 'CHTML-preview.js'],"
                 + "         tex2jax: { inlineMath: [ ['Anders als bei Joes 'Antwort müssen weder Text noch mathematische Typen getrennt werden. MathJax formatiert sie lediglich entsprechend.
Es scheint jedoch einen Fehler zu geben, bei dem Webview in KitKat-Geräten keinen Großbuchstaben "A" darstellen kann. Jeder, der einen Weg kennt, ist willkommen, einen Workaround dafür bereitzustellen.
,'Anders als bei Joes 'Antwort müssen weder Text noch mathematische Typen getrennt werden. MathJax formatiert sie lediglich entsprechend.
Es scheint jedoch einen Fehler zu geben, bei dem Webview in KitKat-Geräten keinen Großbuchstaben "A" darstellen kann. Jeder, der einen Weg kennt, ist willkommen, einen Workaround dafür bereitzustellen.] ], processEscapes: true },"
                 + "             TeX: {" + "               extensions:['AMSmath.js','AMSsymbols.js',"
                 + "                           'noUndefined.js']" + "             }"
                 + "  });"
                 + "</script>"
                 + "<script type='text/javascript' src='file:///android_asset/MathJax/MathJax.js'>"
                 + "</script>"
                 + "<p style=\"line-height:1.5; padding: 16 16\" align=\"justify\">"
                 + "<span >";

    // Demo display equation
    url += "This is a display equation: $P=\frac{F}{A}$";

    url += "This is also an identical display equation with different format:\\[P=\\frac{F}{A}\\]";

    // equations aligned at equal sign
    url += "You can also put aligned equations just like Latex:";
    String align = "\\begin{aligned}"
                + "F\\; &= P \\times A \\\\ "
                + "&= 4000 \\times 0.2\\\\"
                + "&= 800\\; \\text{N}\\end{aligned}"; 
    url += align;

    url += "This is an inline equation \\sqrt{b^2-4ac}.";

    // Finally, must enclose the brackets
    url += "</span></p>";

    mWebView.loadDataWithBaseURL("http://bar", url, "text/html", "utf-8", "");
    mWebView.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            if (!url.startsWith("http://bar")) return;
            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
                view.loadUrl(JAVASCRIPT);
            } else {
                view.evaluateJavascript(JAVASCRIPT, null);
            }
        }
    });
}

Anders als bei Joes 'Antwort müssen weder Text noch mathematische Typen getrennt werden. MathJax formatiert sie lediglich entsprechend.

Es scheint jedoch einen Fehler zu geben, bei dem Webview in KitKat-Geräten keinen Großbuchstaben "A" darstellen kann. Jeder, der einen Weg kennt, ist willkommen, einen Workaround dafür bereitzustellen.