Unable to render MathML content in Google Chrome

Asked 16/4, 2015 at 17:41 Answered 12/4, 2019 at 5:29

Solved html google-chrome mathjax mathml

I have some MathML contents in HTML page and the page needs to be rendered in Google Chrome over HTTPS connection. So i tried to follow the approach said in the below link

Displaying Mathml equations

but it did not work (I copied the script in my HTML page). Then I tried to install the MathJax plugin for chrome as an extension to Google Chrome. That seemed to render some of MathML in my file but for some I got an error. I found that MathJax can render Presentation MathML contents but cannot render Content MathML contents (I have both types of contents in my page). Also it did not work over HTTPS connection. It will be very helpful if I get some workarounds to solve this problem.

Regards, Anirban

Chinaman answered 16/4, 2015 at 17:41 Comment(2)

Call MathJax.Hub.Configured() after the endof the <body> tag... – Demark 16/4, 2015 at 17:46

Answered already given here , Please Check this link https://mcmap.net/q/749316/-displaying-mathml-equations – Frenzied 15/10, 2016 at 10:1

The question linked to in the OP is somewhat dated and describes how to include MathML in xhtml (not html since that was not actually valid back then). With HTML5, it's much easier to include MathML.

Chrome does not support MathML so you'll need a polyfill. MathJax can render both Presentation and Content MathML; see the relevant documentation at http://docs.mathjax.org/en/latest/ .

However, the author needs to configure MathJax correctly to do so. FYI, plugins in the Chrome store are made by third parties; also, MathJax works over https just fine if done correctly.

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

<!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>

Frampton answered 17/4, 2015 at 7:50 Comment(6)

With this method, no error is getting thrown but many of the contents are coming as "none". Like the equation "1+2=" is coming as "1none+none2none none =" – Chinaman 17/4, 2015 at 17:34

also mml3 is still experimental, can you kindly suggest me anything which can be used in production? It would be really helpful. – Chinaman 17/4, 2015 at 17:36

Also I need to run the same thing in Chrome and Safari, the contents are getting displayed correctly in Safari, will they be affected after adding these extensions? – Chinaman 17/4, 2015 at 17:37

For your first comment, I can't say much without some code samples. For the second, you don't need the mml3.js extension. For the third, MathJax supports all browsers and platforms equally so yes it should work. – Frampton 17/4, 2015 at 17:53

I've updated the answer since cdn.mathjax.org is nearing its end-of-life, cf. mathjax.org/cdn-shutting-down. – Frampton 12/4, 2017 at 8:46

It would be better to include the script only in Chrome/Edge, because Firefox supports MathML natively. (Safari not tested.) – Zimmerman 6/2, 2018 at 15:51

This worked really well for me when i was in a similar situation..

Add these scripts in the <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 the closing of the <body> tag

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

See the documentation

you can see this wonderfull example.. https://math.stackexchange.com/ .. Check the source of math.stackexchange..It will be really helpfull..

UPDATE

See page no 54 in this link..It says

MathJax supports the MathML3.0 mathematics tags, with some limitations. The MathML support is still under active development, so some tags are not yet implemented, and some features are not fully developed, but are coming. The deficiencies include:

• No support for alignment groups in tables.

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

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

• Experimental support for bidirectional mathematics.

Demark answered 16/4, 2015 at 17:48 Comment(1)

I tried doing it this way, some of the contents were rendered correctly, but for some, I am getting the following error Unknown node type: mstack – Chinaman 17/4, 2015 at 17:33

It seems that it is possible to render MathML inside Chrome with the help of a CSS and by using HTML5, i.e. a Chrome version that supports unknown tags.

As an experiment, including some baby step fiddling with contenteditable="true" to test HTML5 editing, I was using this CSS here:
https://developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/test-mathml-css

Chrome Example without the CSS:

Chrome Example with the CSS:

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

Alleyne answered 2/1, 2018 at 19:1 Comment(0)

This chrome extension is simple and elegant:

https://chrome.google.com/webstore/detail/math-anywhere/gebhifiddmaaeecbaiemfpejghjdjmhc/related?hl=en

Lillis answered 12/4, 2019 at 5:29 Comment(0)

Try my Chrome extension "HTML + MathML": https://chrome.google.com/webstore/detail/fmath-html-%2B-mathml-solut/emdjdpchbjipnjhkfljbcapgfecmnglm?hl=en-GB

or my solution for "All Browsers": http://www.fmath.info/formula/js/allBrowser.jsp

regards

Selfcommand answered 4/10, 2017 at 19:37 Comment(0)

Recommended topics

Hot tags