Cannot display MathML content in Google Chrome

I have some MathML content on an HTML page, and the page should render in Google Chrome over HTTPS. So I tried to follow the approach indicated in the link below.

Math equation mapping

but this did not work (I copied the script on my HTML page). Then I tried to install the MathJax plugin for Chrome as an extension for Google Chrome. It seemed to do some of the MathML in my file, but for some I got an error. I found that MathJax can display the contents of a MathML presentation, but cannot display the Content MathML content (I have both types of content on my page). Also it did not work through the HTTPS connection. It will be very useful if I get some workarounds to solve this problem.

Regards, Anirban

+10
html google-chrome mathml mathjax
source share
5 answers

The question related to the OP is somewhat outdated and describes how to include MathML in xhtml (not in html, since then it was invalid). HTML5 makes it much easier to include MathML.

Chrome does not support MathML, so you will need a polyfill. MathJax can display both presentation and MathML content; see the relevant documentation at http://docs.mathjax.org/en/latest/mathml.html .

However, the author needs to properly configure MathJax for this. For your information, plugins in the Chrome Store are made by third parties; In addition, MathJax works on https just fine if everything is done correctly.

The following is an example that shows how to enable all the MathML functions that MathJax can provide, including the mml3.js extension for experimental functions.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Fullest MathML support using MathJax</title> <script>window.MathJax = { MathML: { extensions: ["mml3.js", "content-mathml.js"]}};</script> <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=MML_HTMLorMML"></script> </head> <body> <math display="block"> <apply> <plus/> <ci>a</ci> <apply> <minus/> <ci>b</ci> <ci>c</ci> </apply> </apply> </math> <math display="block"> <mrow> <mi>a</mi> <mo>+</mo> <mrow> <mi>b</mi> <mo>-</mo> <mi>c</mi> </mrow> </mrow> </math> </body> </html> 
+11
source share

It worked very well for me when I was in a similar situation.

Add these scripts to <head>

 <script type="text/x-mathjax-config">MathJax.Hub.Config({ config: ["MMLorHTML.js"], jax: ["input/TeX","input/MathML","output/HTML-CSS","output/NativeMML"], extensions: ["tex2jax.js","mml2jax.js","MathMenu.js","MathZoom.js"], TeX: { extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"] } });</script> <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/2.0-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 

Then

add this <script> after closing the <body>

 <script type="text/javascript"> MathJax.Hub.Configured() </script> 

See documentation

or

You can see this wonderful example. https://math.stackexchange.com/ .. Check out the source math.stackexchange..It will be very helpful ..

UPDATE

See page number 54 in this link .. He says

MathJax supports MathML3.0 math tags, with some limitations. MathML support is still being actively developed, so some tags are not yet implemented, and some functions are not fully implemented. Disadvantages include:

• There is no support for aligning groups in tables.

• Not all attributes are supported for tables. For example, columnspan and rowspan are not yet implemented.

• Experimental support for elementary math tags: mstack, mlongdiv, msgroup, msrow, mscarries and mscarry. (See the mml3 extension below.)

• Experimental support for bidirectional mathematics.

+3
source share
0
source share

It seems that you can do MathML inside Chrome using CSS and using HTML5, i.e. a version of Chrome that supports unknown tags.

As an experiment, including some kind of children's step, using contenteditable = "true" to test HTML5 editing, I used this CSS here:
https://developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/test-mathml-css

Chrome example without CSS:

no CSS

Chrome example with CSS:

enter image description here

The source files are here:
https://gist.github.com/jburse/fb43afd01048feac7028b5642817af0a#file-mathml-html

0
source share
0
source share

All Articles