Rectangle 27 0

algebra Rendering clickable mathematics on Android?


<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
        <msqrt href=id1>
          <msup><mi>b</mi><mn>2</mn></msup>
          <mo></mo>
          <mstyle href=id2><mn>4</mn><mi>a</mi><mi>c</mi></mstyle>
        </msqrt>
</math>
public class MathmlLinksViewClient extends WebViewClient {

    //protected MainActivity activity;
    public MathmlLinksViewClient(MainActivity context) {
        activity = context;
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // Reroutes id int value to MainActivity method
        activity.onMathmlClick(
                Integer.valueOf(
                            // Method I wrote to parse ID from URL
                            HtmlIdFormat.getIdFromString(url) ) );
        return true;
    }

}

I didn't cover quite everything, but I hope this helps!

If your view operates any other HTML links, you'll want to add an if statement to separate the actions on MathML-element links, and website links. Again, you can research how to effectively use shouldOverrideUrlLoading().

Note on nesting links. When using the HTML-CSS output for MathJax, only the lowest link is actively clicked. However, when using SVG output, every link is called in order from lowest level to highest level. So for what I propose, you'll have to use HTML-CSS output from MathJax. If I find a way to make SVG work, I'll make an edit.

Note that the url that is passed to this function is not exactly the link that you include in your MathML elements. each of these is prepended by the host link specified when using WebView.loadDataWithBaseUrl() method for your WebView. (I'm assuming you are following this guide to render MathML.)

The most direct route would be to add 'onClick' properties directly into the MathML you use, and use element ids & Java/JavaScript method binding from there. However as far as I know, the 'onClick' attribute is not (yet?) supported in MathML.

The one downside is that it will add the blue link color to all linked objects. You should be able to override this in MathML by setting the color of all elements to black with an mstyle declaration, but I'm currently having issues doing so.

This is described in a number of StackOverflow questions on this, and you can reference the Android Devs site for specifics (here) so I won't go into too much detail. Basically, shouldOverrideUrlLoading() will have a url String with the link you specified for the MathML elements that were just clicked. Parse that for the ID value and send it to a function that can use it, and you're good to go.

What I have done as a hack-around is to add links to each of your clickable MathML elements, and then overload the shouldOverrideUrlLoading() method of the WebViewClient for your WebView, to catch the links that are called. Then if you add unique ID-values somewhere in your links, you can identify which element was clicked.

Note