Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for MathML #12800

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

Comments

@adamsilverstein
Copy link
Contributor

commented Jan 11, 2018

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

This comment has been minimized.

Copy link
Member

commented Jan 11, 2018

/to @aghassemi to track.

@aghassemi aghassemi added this to the New FRs milestone Jan 11, 2018

@adamsilverstein

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Contributor Author

commented Jan 11, 2018

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

@mrjoro mrjoro assigned adamsilverstein and unassigned aghassemi Jan 11, 2018

@adamsilverstein

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link
Contributor Author

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.

@aghassemi

This comment has been minimized.

Copy link
Contributor

commented Jan 16, 2018

@adamsilverstein Reviewing now.

@Gregable

This comment has been minimized.

Copy link
Member

commented Jan 16, 2018

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

This comment has been minimized.

Copy link
Contributor

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.

@Gregable

This comment has been minimized.

Copy link
Member

commented Jan 17, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Jan 19, 2018

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

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

@fred-wang

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Feb 28, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
6 participants
You can’t perform that action at this time.