Add support for MathML

[adamsilverstein]

What's the feature?

MathML is a low-level specification for mathematical and scientific content on the Web and beyond. See https://www.w3.org/Math/. AMP should support the mathml specification with an amp-mathml tag.

We use the MathJax library to display math formulas on our website https://www.mathjax.org/

To implement the AMP version of these formulas currently, we need to use an amp-iframe or a dynamic svg. It would be great if AMP supported MathML out of the box.

How would this feature work?

Proposing an amp-mathml tag, takes one parameter - a formula

Quadratic formula:

<amp-mathml formula="\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]" />

What browsers are affected?

This should work in all browsers.

[jridgewell]

/to @aghassemi to track.

[adamsilverstein]

@jridgewell Thanks for considering. If this is something you want to add, I would love to contribute. I'm not yet familiar with AMP internals, but happy to dive in, review and test.

[jridgewell]

If this is something you want to add, I would love to contribute.

Awesome! /cc @mrjoro to invite you to the organization, so we can assign the task to you.

To start with, please look over the Contributing Code section, then the Contributing Extended Components section will cover how to create a new AMP Component. If you need further help, feel free to comment on this issue.

[aghassemi]

@adamsilverstein, totally!

This component can be very similar to amp-gist component so looking at that code can be a great reference in addition to the resources @jridgewell mentioned.

Of course we would be happy to answer questions here or on Slack as you go through the implementation.

[adamsilverstein]

Super, thanks for the resources. I'll dig in and let you know if I have questions.

[adamsilverstein]

I made some progress on this in a branch: https://github.com/ampproject/amphtml/compare/master...adamsilverstein:feature/add-amp-mathml?expand=1

Trying rendering as an svg and inserting it directly makes the most sense. Another option is a PNG, which I haven't explored.

Unfortunately with my current branch, I'm getting a console error:
Error: Cannot find module 'cssstyle/lib/parsers.js'(https://cl.ly/2j3p2m2e0a1f) which looks like an upstream issue in mathjax-node which I'm using to render the math formula. Possibly a Node version issue; found some possibly related issues as well: mathjax/MathJax-node#179 & hopefully addressed in mathjax/MathJax-node#376

[aghassemi]

@adamsilverstein I would like to propose a different approach.

Having mathjax library to load at top level, requires license, security and performance review of their entire code as it would run under the same context as AMP. Using a 3P iframe approach, you can just load the mathjax library from their CDN inside an iframe that AMP creates.

This is the approach taken byamp-gist. The code than runs inside the iframe and renders the gist is in github.js and the component simply loads it inside an iframe.

[jridgewell]

Agreed with @aghassemi. If MathJax is able to export the rendered formula a styled SVG, we could then import that node into the host document and remove the iframe (to save resources). But it's unlikely we'll be able to get MathJax running on the host document itself due to security/privacy concerns.

[adamsilverstein]

Ah, I see - thanks for clarifying - I didn’t realize that was what your suggestion originally when referring to the gist code which I did look at (although the example doesn't work in my local environment. I'll give that a shot. The security/privacy concerns makes sense.

The biggest issue we have with our current iframe implementation is sizing, we may need to resize the iframe once the math formula renders for the best presentation as as its hard to predetermine the size.

[aghassemi]

Regarding resizing: both approaches will have the same issue. Iframe can request a resize by calling context.updateDimensions(newWidth, newHeight) after formula has been rendered.

[adamsilverstein]

@aghassemi thanks for the tip. I've got the rendering working in my branch, still working on the resizing. I'm using a regular iframe maybe I need to switch that to an AMP helper? Can you point me to an example of a component that implements this?

Progress though, the example page is rendering:

[aghassemi]

@adamsilverstein Awesome! Regarding iframe, yes you want to use getIframe from src/3p-frame similar to https://github.com/ampproject/amphtml/blob/master/extensions/amp-gist/0.1/amp-gist.js#L61. The third-parameter into this getIframe method is the name of the file inside 3p folder than would run inside of it. (in the case of amp-gist the file is https://github.com/ampproject/amphtml/blob/master/3p/github.js)

[adamsilverstein]

yes - i am using getIframe now, however i was injecting the contents via the iframe src (building up the html them inserting with iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html); I'll take a look at adding by file.

Can you look at how I am setting up the listener in my branch? I'm still never able to trigger the resize event in the outer frame. I see it being triggered, but the listener as I have it set up never catches the event.

[adamsilverstein]

@aghassemi I got the resizing working for height anyway and opened a PR - can you review please?

#12836

I'd love help getting width resizing work and adding some tests if you have a chance. Apologies in advance for coding standards discrepancies, I usually contribute to projects that expect more whitespace.

[aghassemi]

@adamsilverstein Reviewing now.

[Gregable]

It seems that you can use presentation MathML in firefox and safari without any javascript, ex:

<math>
  <msqrt>
    <mn>2</mn>
  </msqrt>
</math>

Should we at least support these tags in the AMP validator? ie: not an amp-component. It would be nice if we could polyfill chrome as well, but it's a shame that this would need to be different for amp than what browsers already have built in.

[aghassemi]

The component provides conversion from LaTeX and ASCIIMath which is still very useful.
Edge still doesn't support MathML and Chrome rejected adding support for it. I am not too hopeful native MathML support will become a thing anytime soon.

[Gregable]

Sorry, I didn't mean to suggest the component shouldn't be added.

My suggestion would be to consider adding support for the component to look for the <math> tag in addition to amp-mathml, and polyfill it in non-supporting browsers? The validator could require our polyfill if it sees the tag in the page.

[aghassemi]

@Gregable Sorry I misunderstood, that's a great idea (kind of neat to Polyfill HTML!)

[fred-wang]

Chrome rejected adding support for it. I am not too hopeful native MathML support will become a thing anytime soon.

@aghassemi Just for the record, this link is obsolete (it was able enabling an old WebKit implementation that was finally removed). The current plan is https://bugs.chromium.org/p/chromium/issues/detail?id=6606#c61

[jameshog]

i am using mathjax plugin, but not support in amp version, plz suggest. my website: andlearning.org