Moving MathML and the Web Platform Forward

Basic Plan

1. Identify what is practical as 'core'
   • Most necessary/used/inter-operable
2. Excavation
   • Explain the magic
   • Identify/expose necessary primitives

<math>...</math>

magic

<x-math>...</x-math>

<x-math>...</x-math>

platform stuff

shadow DOM
font stuff

transform stuff

layout stuff

<x-mathgraph>
...
</x-mathgraph>

same platform stuff

shadow DOM
font stuff

transform stuff

layout stuff

<x-formula>...</x-formula>

same platform stuff

shadow DOM
font stuff

transform stuff

layout stuff

Lots of thought and work going into making this story great

• modules (css+html)
• import maps/polyfilling
• 'standard library'
• lots of related DOM/underlying features
  • Form participation
  • Shadow DOM improvements
  • AOM
• instrumentation / standards process

But that is currently very disconnected
from our efforts

"One Platform"
How do we move forward?

"Some browsers don't support MathML"

• Some browsers do actually useful things with MathML
   

• All browsers parse MathML "specially"

  • It is tightly defined in some places,

  • ...and very under-defined in others.
     

• This combination is uniquely problematic.

Exposed Interfaces

<p>This is <em>awesome</em></p>
<script>
   let els = document.querySelector('p,em')
   console.log(els[0].constructor)
   console.log(els[1].constructor)    

  )

</script>

function HTMLParagraphElement() { [native code] }
function HTMLElement() { [native code] }

Forward Compatible Parsing

<flop>This</flop>
<script>
  let flopEl = document.querySelector("flop")
  console.log(flopEl.constructor)

</script>

function HTMLUnknownElement() { [native code] }

HTML Parser / MathML Gap

<math>
  <msup>
    <mi>X</mi>
    <mrow>
     <mi>n</mn>
     <mo>+</mo>
     <mn>1</mn>
   </mrow>
  </msup>
</math>

function Element() { [native code] }

console.log(
     document.querySelector(
        "mn"
     ).constructor
)

HTML

JavaScript

HTML Parser / MathML Gap

<floop id="one">123</floop>
<math>
  <floop id="two">123</floop>
</math>

<script>
  console.log(
     document.querySelector(
        "#one"
     ).constructor
  )

  console.log(
     document.querySelector(
        "two"
     ).constructor
  )

</script>

function HTMLUnknownEement() { [native code] }
function Element() { [native code] }

HTML Parser / MathML Gap

<x-floop id="one">0</x-floop>
<math>
  <x-flop id="two">1</x-flop>
</math>
<script>
  console.log(
     document.querySelector(
        "#one"
     ).constructor
  )
  console.log(
     document.querySelector(
        "#two"
     ).constructor
  )
</script>

function HTMLEement() { [native code] }
function Element() { [native code] }

document.querySelector('math').style.color = 'blue'
VM477:1 Uncaught TypeError: Cannot set property 'color' of undefined
    at <anonymous>:1:44

No .style property

document.querySelector('math').dataset
undefined​

No .dataset

title, lang, translate, dir, dataset, hidden, tabIndex, accessKey, draggable, spellcheck, autocapitalize, contentEditable, isContentEditable, inputMode, offsetParent, offsetTop, offsetLeft, offsetWidth, offsetHeight, style, innerText, outerText, oncopy, oncut, onpaste, onabort, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting, onwheel, onauxclick, ongotpointercapture, onlostpointercapture, onpointerdown, onpointermove, onpointerup, onpointercancel, onpointerover, onpointerout, onpointerenter, onpointerleave, onselectstart, onselectionchange, nonce, click, focus, blur

101 enumerable properties in HTMLElement, not available in MathML 

Polyfills Entirely Disconnected Transforms

document
   .querySelector('math')

   .attachShadow({mode: "open"})

​Uncaught DOMException: Failed to execute 'attachShadow' on 'Element': This element does not support attachShadow
    at <anonymous>

Element can't have a Shadow

This is a hard place to be in...

[Exposed=Window]
interface MathMLElement : Element {
   // ? 
};

MathMLElement includes GlobalEventHandlers;

MathMLElement

 includes DocumentAndElementEventHandlers;

MathMLElement includes HTMLOrSVGElement;

Handwavey But Mostly Adequate Initial Idea

<math>
  <mfenced open="{" close="}" separators=";;,"> 
    <mi>a</mi> 
    <mi>b</mi> 
    <mi>c</mi> 
    <mi>d</mi> 
    <mi>e</mi> 
  </mfenced> 
</math>

MathMLElement?

<math>
  <mfenced open="{" close="}" separators=";;,"> 
   #shadowRoot
       ....
    <mi>a</mi> 
    <mi>b</mi> 
    <mi>c</mi> 
    <mi>d</mi> 
    <mi>e</mi> 
  </mfenced> 
</math>

MathMLElement?
Probably not like this.

<math>
  <m-fenced open="{" close="}" separators=";;,"> 
   #shadowRoot
       ....
    <mi>a</mi> 
    <mi>b</mi> 
    <mi>c</mi> 
    <mi>d</mi> 
    <mi>e</mi> 
  </m-fenced> 
</math>

Custom Elements would put MathMLCore on basically the same footing as HTML...