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 ∫−∞+∞16⁢sin⁡(2⁢x+π)5⁢(x2+2⁢x+5)2⁢d⁢x=π⁢sin⁡(2)e4
  • OpenDocument, EPUB, Daisy, HTML5
  • Web pages, Web Apps, email...

MathML & HTML5

Boring MathML Example

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

Text Layout

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

Bidi


  <math dir="rtl">...</math>
س=−ب±ب٢−٤اج٢اس = \frac{-ب\pm\sqrt{ب^٢-٤اج}}{٢ا}

CSS


  math {
    font-family: TeX Gyre Bonum Math;
  }
  mfrac > *:first-child {
    color: blue;
  }
∫−∞+∞16⁢sin⁡(2⁢x+π)5⁢(x2+2⁢x+5)2⁢d⁢x=π⁢sin⁡(2)e4

DOM / Javascript


  math.setAttribute("rtl", ...)
س=−ب±ب٢−٤اج٢اس = \frac{-ب\pm\sqrt{ب^٢-٤اج}}{٢ا}

SVG


<foreignObject ... >
  <math> ... </math>
</foreignObject>
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}}
  </x-tex>
Γ(t)=1t∏n=1∞(1+1n)t1+tn=e−γtt∏n=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

Overview

  • 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

VS ∫

Roadmap

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

¿Preguntas?

fredw (fred@wang.free.fr)

www.mathml.us

∫−∞+∞16⁢sin⁡(2⁢x+π)5⁢(x2+2⁢x+5)2⁢d⁢x=π⁢sin⁡(2)e4