Skip to content

pshihn/math-ml

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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

About

MathML implementation using custom elements

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published