Skip to content
MathML implementation using custom elements
TypeScript JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
examples
src
.gitignore
LICENSE
README.md
package-lock.json
package.json
rollup.config.js
tsconfig.json
tslint.json

README.md

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/mathml-elements@latest/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/mathml-elements@latest/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/webcomponentsjs@latest/webcomponents-loader.js"></script>

License

MIT License (c) Preet Shihn

You can’t perform that action at this time.