{{ message }}

# ampproject / amphtml Public

Closed
opened this issue Jan 11, 2018 · 21 comments
Closed

opened this issue Jan 11, 2018 · 21 comments
Assignees
Labels
Projects
Milestone

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

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

## What browsers are affected?

This should work in all browsers.

### jridgewell commented Jan 11, 2018

 /to @aghassemi to track.

added this to the New FRs milestone Jan 11, 2018

### adamsilverstein commented Jan 11, 2018

 @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 commented Jan 11, 2018

 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 commented Jan 11, 2018

 @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 commented Jan 11, 2018

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

assigned adamsilverstein and unassigned aghassemi Jan 11, 2018

### adamsilverstein commented Jan 12, 2018

 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 commented Jan 12, 2018

 @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 commented Jan 12, 2018

 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 commented Jan 12, 2018

 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 commented Jan 12, 2018

 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 commented Jan 13, 2018

 @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 commented Jan 16, 2018

 @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 commented Jan 16, 2018

 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 commented Jan 16, 2018

 @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.

added this to Triaged in UI Triage Jan 16, 2018
mentioned this issue Jan 16, 2018

### Gregable commented Jan 16, 2018

 It seems that you can use presentation MathML in firefox and safari without any javascript, ex: $2$  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 commented Jan 17, 2018

 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.

 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 [itex] 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 commented Jan 19, 2018

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

moved this from Triaged to Done in UI Triage Jan 24, 2018

### fred-wang commented Jul 26, 2018

 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 commented Feb 28, 2019

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