MathML in Browsers

Web Engines Hackfest - October, 2019
Γ(t)=∫0+∞xt−1e−xdx=1t∏n=1∞(1+1n)t1+tn∼2πt(te)t{\Gamma(t)} = {\int_{0}^{+\infty} x^{t-1} e^{-x} dx} = {\frac{1}{t} \prod_{n=1}^\infty \frac{\left(1+\frac{1}{n}\right)^t}{1+\frac{t}{n}} } \sim {\sqrt{\frac{2\pi}{t}} \left(\frac{t}{e}\right)^t} Rob Buis (rbuis@)
Frédéric Wang (fwang@)
NISO logo Igalia Logo

(I) History

The <MATH> tag

HTML proposal

MathML in Mozilla

Dr. Roger Sidje Screenshot of old Mozilla MathML implementation
One of the quietest open source
achievers in Australia - the SMH

MathML in HTML5

-dev

Microsoft Office 2007

Cambria MATH table Math parameters

WebKit's Refactoring

Alex MathML, hackfest 2015
¡Qué horrible es esta implementación! - alex@

MathML in Chromium

MathML entry in chrome platform status Microsoft announcement: switching to Chromium

(II) MathML Refresh
Community Group

MathML Core

screenshot of mathml core spec
  • Fundamental subset
    • Ask CG members
    • Analyze tools & use statistics
  • Implementation details
    • TeX/OpenType layout
    • HTML5/CSS compatibility
  • Browser-driven
    • Gecko/WebKit/Blink
    • Web Platform Tests!

Extensibility

Math style
mfenced polyfill
  • MathMLElement IDL (1)
    • *EventHandlers
    • ElementCSSInlineStyle
    • HTMLOrForeignElement
  • CSS/Houdini
    • CSS properties? (2)
    • Layout constraints? (3)
    • Font APIs? (4)
  • New MathML elements
    • Overridable display (5)
    • Element.shadowDOM? (6)
    • Custom element? (7)

CSS Compatibility

Screenshot of spec description for fractions
  • CSS layout
    • Visual box model?
    • Supported features?
    • Interpretation?
  • Math-specific
    • Invalid markup
    • New CSS properties
    • OpenType parameters
    • Special painting
    • Text metrics
    • Operator Stretching

Text metrics

  • Ink block metrics (1, 2)
    Fraction using block metrics VS ink metrics
  • Italic correction (3)
    Subscript placement on a slanted integral

Operator Stretching

  • Operator stretching (none)
    Operator stretching (done)
    Operator stretching (unperfect)
    Stretch constraints (1)
    • Horizontal stretch size
    • Vertical stretch size above/below baseline
  • Parent layout (2, 3)
    1. Layout non-stretchy children
    2. Calculate stretch constraint
    3. Layout stretchy children
  • Real-life operators
    • Distort glyph
    • Upper estimate of min/max (4)



(III) Browser
Interoperability

Web Platform Tests

Implementation Report
  • ~2000 tests (1, 2, 3)
    • Math layout
    • Removed features
    • DOM/CSS interaction
  • Results (4)
    • Igalia's Blink: ~99%
    • Gecko: ~73%
    • WebKit: ~72%

Past implementations

Firefox/Gecko
2008		 Firefox 3.6
Chrome/WebKit
2013		 Chrome 23
Opera/Presto
2007		 Chrome 76 with Presto's CSS rules

2019 implementations

Firefox/Gecko
July release		 Firefox 68
Epiphany/WebKit
Build r249360		 WebKitGTK dev build
Chromium/Blink
Igalia's Branch		 Igalia's Chromium fork

Gecko and WebKit (1, 2)

Firefox Logo
WebKit Logo
  • Standardize browser behaviors
    • MathML3 interpretations
    • "Hacks" for legacy content
  • Unship features
    • Counters & Deprecation (3)
    • Runtime flag
  • Tests
    • Convert & synchronize
    • More "pass" / Less "flaky"
  • Enhancement and bug fixes
    • Math DOM (4, 5)
    • Math layout (6, 7, 8, …)
    • CSS compatibility

(IV) MathML in Chromium

Project Workflow

Diagram describing project workflow
  • Upstream mathml-dev!
  • Non-Linux platforms?
  • Automated WPT sync for WebKit 🤔

Implementation Roadmap

screenshot of Mozilla's test (August 2019)
  • Basic setup ✅
  • Basic layout ✅
  • Operator Dictionary ✅
  • Stretchy operators: ✅
  • Advanced style ✅
  • HTML5 Compatibility ●
  • Upstreamed & shipped ❌

Changesets

Base Setup
  • Runtime flag
  • mathml.css
  • Element classes
  • New CSS
  • New DOM/IDL
Low-level API
  • Font parameters
  • Glyph stretching
  • Layout constraints
  • Ink baselines
MathML
  • Dictionary
  • Attributes
  • Painters
  • Layout utils
  • Layout classes

Size Impact

Chrome

is_debug=0
is_official_build=1
enable_linux_installer=1
  • Binary: Δ < 320KB
  • Archive:
    • deb: Δ < 45KB
    • rpm: Δ < 26KB

Code

Folders#Lines
core/layout/ng/mathml 4977
core/mathml 3279
core/css, core/style 940
core/paint 285
platform/fonts, platform/graphics 268
core/layout, core/layout/ng 164
core/dom, core/html, core/svg 44
Total Δ < 10k

Current SVG code size (only for core/svg, core/layout/svg) is > 62k

Launching Features

  • Idea Phase: explainer, intent-to-implement
  • Design Phase: design doc & spec, TAG review, chromestatus entry, chrome launch review
  • Implementation Phase: implementation & tests, intent-to-ship, 3 LGTMs
  • Post Launch: crashes, regressions, bug fixes, interop, doc, cleanup...

(V) MathML Demos

(VI) ¿Questions?