MathML in LayoutNG

BlinkOn 10 - Toronto, Ontario, Canada
April 09 - 10, 2019

\sum_{n = 1}^{+ ∞} \frac{1}{n^{2}} = \frac{π^{2}}{6}

Frédéric Wang (fwang@igalia.com)
Rob Buis (rbuis@igalia.com)

Project overview

Igalia's MathML effort

Motivations (technical, community, use case)
2013-2015 mrobinson@, alex@, jfernandez@ (design/security fixes, improvements, refactoring)
2016 fwang@ joined Igalia (refactoring, improvements, HarfBuzz, chromium)
2017-2018 fwang@, rego@, ecobos@ (Google, fundraising, LayoutNG) ; rbuis@ joined Igalia
2019 fwang@, rbuis@ (ongoing)

MathML refresh CG

New community group: browser implementers, Math WG, scholars, publishers, a11y, authoring...
"More standard standardization" : GitHub, Web Platform Tests, specification's content & style, ...
MathML Core specification
- Minimal subset
- Implementation details
- Alignment with CSS/HTML5

Project Workflow

Web Platform Tests
- upstream development (new tests or from Mozilla/WebKit)
- export to browser repositories (automatic for Chromium/Mozilla)
mathml-dev branch on GitHub
- Rebase/Squash ~1-2 weeks (latest tests/code, minimal commits)
- LayoutNGMathML runtime flag
Buildbot
- Continuous Integration (style, release/debug builds, MathML tests...)
- Latest screenshots and unstable packages

Implementation Roadmap

Basic setup (text, row layout, basic style...): DONE
Basic layout (fractions, scripts, table...): DONE
Operator Dictionary: WIP
Stretchy operators: TODO
Advanced style (new CSS properties/values): WIP

Implementation Design

$Class Hierarchy$

Demos

Basic layout

$\frac{}{} \binom{}{}$

$\underset{}{} \overset{}{}_{}^{}_{}^{}_{}^{}$

$\sqrt{} \sqrt[]{}$

$\begin{matrix} \end{matrix}$

Mixing with HTML / SVG

$\frac{}{2} + \frac{3}{4} = \frac{13}{4}$ (<input>)
(<foreignObject>)

Line breaking

1 + 2 + 3 + 4 + 6 + 7 + 8 + 9 + 10 + 11 + 12

blah blah blah

\frac{1 + 2 + 3 + 4 + 6 + 7 + 8 + 9}{11 + 12 + 13 + 14 + 16 + 17 + 18 + 19}

Inline / Display math
Vertical alignment

__baseline__ $\sum_{n = 1}^{+ ∞} \frac{1}{n^{2}} = \frac{π^{2}}{6}$ __baseline__

blah blah blah blah blah blah $\sum_{n = 1}^{+ ∞} \frac{1}{n^{2}} = \frac{π^{2}}{6}$ blah blah blah blah blah blah

DOM/IDL

$\frac{α + β}{γ} + δ$ (href, dynamic change)
$\frac{α + β}{γ} + δ$ (GlobalEventHandlers::onclick, ElementCSSInlineStyle::style)

CSS

$\frac{1 + A}{2 - B}$ VS $\frac{1 + A}{2 - β}$ (font, color, ...)
$\frac{1 + A}{2 - B}$ VS $\frac{1 + A}{2 - B}$ (text-transform values)
$\frac{1 + A}{2 - B}$ VS $\frac{1 + A}{2 - B}$ (math-style)
$\frac{1 + A}{2 - B}$ VS $\frac{1 + A}{2 - B}$ (math-script-level, not implemented)

direction / writing-mode

blah blah blah $\frac{}{} \frac{}{}$ blah blah blah

direction: rtl
العَرَبِيَّة‎‎ العَرَبِيَّة‎‎ $\frac{}{} \frac{}{}$ العَرَبِيَّة‎‎ العَرَبِيَّة‎‎
Arabic mathematical notation

writing-mode: vertical-lr
ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ $\frac{}{} \frac{}{}$ ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ
mozilla #1077525

MathML in LayoutNG

Project overview

Igalia's MathML effort

MathML refresh CG

Project Workflow

Implementation Roadmap

Implementation Design

Demos

Basic layout

Mixing with HTML / SVG

Line breaking

Inline / Display math
Vertical alignment

DOM/IDL

CSS

direction / writing-mode

Advanced tests

¿Questions?

MathML in LayoutNG

Project overview

Igalia's MathML effort

MathML refresh CG

Project Workflow

Implementation Roadmap

Implementation Design

Demos

Basic layout

Mixing with HTML / SVG

Line breaking

Inline / Display mathVertical alignment

DOM/IDL

CSS

direction / writing-mode

Advanced tests

¿Questions?

Inline / Display math
Vertical alignment