MathML in
Web Engines

Web Engines Hackfest 2015

Frédéric Wang, AcceSciTech Project

About Me

  • Engineer for the AcceSciTech Project
  • Since 2007: Mozilla contributor
  • In 2014: WebKit / Gecko Crowdfunding

What is MathML?

  • W3C Recommendation - ISO/IEC standard +16sin(2x+π)5(x2+2x+5)2dx=πsin(2)e4
  • OpenDocument, EPUB, Daisy, HTML5
  • Web pages, Web Apps, email...

MathML & HTML5

Boring MathML Example

x=b±b24ac2ax = \frac{-b\pm\sqrt{b^2-4ac}}{2a}

Text Layout

س=ب±ب٢٤اج٢اس = \frac{-ب\pm\sqrt{ب^٢-٤اج}}{٢ا}


  <math dir="rtl">...</math>

س=ب±ب٢٤اج٢اس = \frac{-ب\pm\sqrt{ب^٢-٤اج}}{٢ا}


  math {
    font-family: TeX Gyre Bonum Math;
  mfrac > *:first-child {
    color: blue;


DOM / Javascript

  math.setAttribute("rtl", ...)

س=ب±ب٢٤اج٢اس = \frac{-ب\pm\sqrt{ب^٢-٤اج}}{٢ا}


<foreignObject ... >
  <math> ... </math>

MathML in SVG

Canvas / WebGL

Shadow Tree / Web Components

  <x-tex display="block">
     \Gamma(t) =
     \frac{1}{t} \prod_{n=1}^\infty
     \frac{\left(1+\frac{1}{n}\right)^t}{1+\frac{t}{n}} =
     \frac{e^{-\gamma t}}{t} \prod_{n=1}^\infty
     \left(1 + \frac{t}{n}\right)^{-1} e^{\frac{t}{n}}

Γ(t)=1tn=1(1+1n)t1+tn=eγttn=1(1+tn)1etn\Gamma(t) = \lim_{n \to \infty} \frac{n! \; n^t}{t \; (t+1)\cdots(t+n)}= \frac{1}{t} \prod_{n=1}^\infty \frac{\left(1+\frac{1}{n}\right)^t}{1+\frac{t}{n}} = \frac{e^{-\gamma t}}{t} \prod_{n=1}^\infty \left(1 + \frac{t}{n}\right)^{-1} e^{\frac{t}{n}}

Current Issues

  • Math Users: need cross-compatible solution
  • Browser Vendors: math rendering is not a priority
  • Math WG: not focused on web engines

"MathML" Association

Mondial Association for Tools Handling MathML, Ltd

  • Individuals and companies
  • Experts and consulting companies
  • "MathML in HTML5" implementation note & test suite.

"MATH" table


  • ISO/IEC Open Font Format 3
  • Operating systems
  • Web Engines

"MathVariants" subtable

Base Size

Size Variants

Glyph Assembly

"MathVariants" subtable

"MathConstants" subtable

(1+aβ)t\left( 1 + \frac{a}{\beta} \right)^t

"MathConstants" subtable

Axis Height

Actual Linethickness

Numerator Shift

Denominator Shift

Numerator Gap

Denominator Gap

"MathGlyphInfo" subtable

Italic Correction

"MathGlyphInfo" subtable



  • Math fonts everywhere!
  • "MathML in HTML5": document and tests
  • WebKit: code refactoring
  • Blink: import WebKit's implementation
  • Gecko: clean up
  • Servo: new implementation


fredw (