Показать симпатичную математическую формулу в Android

Грустно видеть, что науке и математике никогда не уделяется достаточного внимания на платформе Android. Возможно, это легкая проблема, но я полный чувак в javascript, поэтому я изо всех сил пытаюсь понять, как решить эту проблему.

То, что я хочу сделать, просто: Мне просто нужно использовать математическое уравнение рендеринга. Это может быть MathJax или JqMath или что-то маленькое и быстрое. Если мне нужно сделать это в веб-просмотре, как я могу показать простой текст в абзаце и форматированном уравнении в пределах одного веб-представления?

(кто-то выходит с другими методами, которые, очевидно, работают, я также рассмотрю это как решение)

ЧТО Я СДЕЛАЛ СКАЗАТЬ:

Я начал с использования MathJax, чтобы поместить формулу в webview (я не знаю, есть ли какой-нибудь успешный случай использования jqMath? Кто-нибудь хочет поделиться своим опытом?) Я могу воспроизвести все функциональные возможности, аналогичные функциям автономного Приложение MathJax. В этом приложении пользовательские ключи в строке в поле EditText и MathJax будут отображать формулу в Latex после нажатия пользователем кнопки для подтверждения.

Мне не нужен пользователь для подтверждения. Я думал, что это должно быть проще, потому что нет взаимодействия с пользователем, но так или иначе уравнение никогда не отображается. Я знаю, что мне что-то не хватает, потому что коды в автономном MathJax предназначены для ввода пользователем. Какую часть кода я должен изменить, чтобы напрямую вывести уравнение из строки, скажем, \sqrt {b ^ 2-4ac}? Вот начальный заголовок для webview:

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

И вот как загружается исходный веб-просмотр, когда пользователь нажимает кнопку после ввода в edittext:

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

Я попытался заменить жестко запрограммированной строкой

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

но он не работает, текст "sample string" даже не появится в веб-просмотре.

[РЕШЕНИЕ] см. "Ответ на вопрос"

Чтобы подробно описать его ответ, это пример того, как установить предложение в виде простого текста, а затем отобразить форматированное уравнение в форме отображения (все в одном веб-просмотре):

Замените последнюю строку выше на

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

с

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

Затем вызовите

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

Это установит строку. Это обычный текст в обычном шрифте, а в центре - формула в веб-просмотре.

EDIT (проблема с Android 4.4)

Начиная с Android KitKat, вы должны заменить все строки loadUrl(...) на evaluateJavascript(...). Но это доступно только для KitKat (API 19 или выше), поэтому вам сначала нужно выполнить проверку версии SDK. Например:

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

ОБНОВЛЕНИЕ (КАК MATHJAX 2.5)

Поскольку происходят изменения папок, предыдущий код не будет работать в последней версии MathJax. Кроме того, рекомендуемый способ минимизации размера локального MathJax теперь использует Grunt. Шаблон для уменьшения размера MathJax можно найти здесь.

Предполагая, что вы успешно уменьшили размер MathJax и предположили вывод HTML-CSS, вот простая версия, которая может загружать MathJax:

@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: [ ['$','$'] ], 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);
            }
        }
    });
}

В отличие от ответа Джоса, нет необходимости отделять текстовые или математические типы, MathJax просто форматирует их соответственно.

Однако, похоже, что есть ошибка, что веб-просмотр в устройствах KitKat не может отображать заглавную букву "A". Любой, кто знает способ, может предложить обходной путь для этого.

Ответы

/** Called when the activity is first created. */
@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);
    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", "");
    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("sample string") + "\\\\]';");
            w.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
        }
    });
}

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

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

            w.loadUrl("javascript:document.getElementById('text').innerHTML='"
                    + newText + "';");

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

w.loadUrl("javascript:document.getElementById('math').innerHTML='"
   +doubleEscapeTeX(
           "This is a second degree equation \\( \\small ax^2+bx+c=0\\) and its "
          +"roots are \\[x=\\frac{-b\\pm \\sqrt{b^2-4ac}}{2a}. \\]"
    )+"';");

public void setView(String data,WebView w){
    WebSettings webSettings = w.getSettings();
    webSettings.setJavaScriptEnabled(true);
    String path="file:///android_asset/v/";
    String js="<html><head>"
       + "<link rel='stylesheet' href='file:///android_asset/v/jqmath.css'>"
       + "<script src = 'file:///android_asset/v/jquery-3.0.0.min.js'></script>"
       + "<script src = 'file:///android_asset/v/jqmath-etc-0.4.3.min.js'></script>"
       + "<script src = 'http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>"
       + "</head><body>"
       + "<script>var s ='"+data+"';M.parseMath(s);document.write(s);</script> </body>";
    w.loadDataWithBaseURL("", js, "text/html", "UTF-8", "");
}