Awesome Open Source
Awesome Open Source

Math-ML

MathML example

A small-ish (compared to alternatives ~ 12kb gzipped) implementation of MathML using custom-elements.

MathML has been part of part of the HTML5 spec for some time now, but many browsers don't support it (Chrome, for example). This is a simple attempt to use basic javascript, CSS and some SVG to implement MathML compatible notation that works across all browsers. (All rendering is done on the client side).

Implementation

Math-ML is implemented using custom elements. There's a corresponding element for every MathML node. The root <math> node is replaced by <math-ml>. For all other nodes, the prefix m is replaces with math-. For example, <mrow> becomes <math-row> and <msqrt> becomes <math-sqrt>.

This is available as a polyfill as well. If MathML is not detected on the browser (every browser except Firefox), the polyfill replaces all <math> nodes with corresponding <math-ml> nodes.

Note: It's not feature complete with the MathML spec, but supports most complicates cases as seen in the Torture Test.

Usage

Install from npm:

npm install --save mathml-elements

or simply from unpkg:

<script src="https://unpkg.com/[email protected]/dist/bundled/mathml.min.js"></script>

To create the following expression: MathML example

Using Math-ML components:

<math-ml>
  <math-row>
    <math-sup>
      <math-i>x</math-i><math-n>2</math-n>
    </math-sup>
    <math-sup>
      <math-i>y</math-i><math-n>2</math-n>
    </math-sup>
  </math-row>
</math-ml>

Raw MathML version:

<math>
  <mrow>
    <msup>
      <mi>x</mi><mn>2</mn>
    </msup>
    <msup>
      <mi>y</mi><mn>2</mn>
    </msup>
  </mrow>
</math>

As a MathML Polyfill

Math-ML comes with a polyfill that will check if your browser has built in MathML support. If not, then it replaces all MathML elements with Math-ML custom elements.

To use the polyfill:

<script src="https://unpkg.com/[email protected]/dist/bundled/mathml.polyfill.js"></script>

Examples

These examples are ported versions from Mozilla Dev Network.

Proving the Pythagorean theorem

Deriving the Quadratic Formula

Torture Test

Custom Element support

While most browsers (Chrome, Firefox, Safari) support custom elements, incluse the web-components polyfill to enabled them in unsupported ones

<script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-loader.js"></script>

License

MIT License (c) Preet Shihn

Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (246,626
Machine Learning (37,132
Mathematics (9,876
Polyfill (2,685
Custom Elements (1,039
Mathml (301