https://github.com/pshihn/math-ml
MathML implementation using custom elements
https://github.com/pshihn/math-ml
Last synced: about 1 month ago
JSON representation
MathML implementation using custom elements
- Host: GitHub
- URL: https://github.com/pshihn/math-ml
- Owner: pshihn
- License: mit
- Created: 2018-10-24T17:50:17.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:17:46.000Z (over 2 years ago)
- Last Synced: 2025-03-28T01:50:57.002Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 242 KB
- Stars: 80
- Watchers: 8
- Forks: 4
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Math-ML
A small-ish (compared to alternatives ~ 12kb gzipped) implementation of [MathML](https://developer.mozilla.org/en-US/docs/Web/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 `` node is replaced by ``. For all other nodes, the prefix `m` is replaces with `math-`. For example, `` becomes `` and `` becomes ``.
This is available as a polyfill as well. If MathML is not detected on the browser (every browser except Firefox), the polyfill replaces all `` nodes with corresponding `` nodes.
_Note: It's not feature complete with the MathML spec, but supports most complicates cases as seen in the [Torture Test](https://pshihn.github.io/math-ml/examples/torture.html)._
## Usage
Install from npm:
```
npm install --save mathml-elements
```
or simply from unpkg:
```html
```
To create the following expression:
Using Math-ML components:
```html
x2
y2
```
Raw MathML version:
```html
x2
y2
```
## 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:
```html
```
## Examples
These examples are ported versions from [Mozilla Dev Network](https://developer.mozilla.org/en-US/docs/Web/MathML/Examples).
[Proving the Pythagorean theorem](https://pshihn.github.io/math-ml/examples/pythagorean-theorem.html)
[Deriving the Quadratic Formula](https://pshihn.github.io/math-ml/examples/quadratic-formula.html)
[Torture Test](https://pshihn.github.io/math-ml/examples/torture.html)
## Custom Element support
While most browsers (Chrome, Firefox, Safari) support custom elements, incluse the web-components polyfill to enabled them in unsupported ones
```html
```
## License
[MIT License](https://github.com/pshihn/windtalk/blob/master/LICENSE) (c) [Preet Shihn](https://twitter.com/preetster)