MathML in Web Browsers

Project Roadmap

Below is the project roadmap that was completed in 2019 on Igaliaโ€™s downstream branch of Chromium. Since then, a huge effort has been made to upstream that code so that they are shipped in all Chromium-based browsers. Goals have been slightly adapted according to feedback from Chromium reviewers and agreement in standardization groups. Such changes are indicated by a pen symbol โ€œ๐Ÿ–Šโ€๏ธ together with the amendment details.

As of January 2023, the MathML implemention described in this roadmap is shipped in official Chrome releases. New developments and maintenance continue via the Open Collective project.

โœ… Basic Setup

  • โœ… Simple grouping <math> (with its display attribute), <mrow>, <mstyle>, <merror> (with special CSS style), <mpadded>, <mphantom> (with visibility: hidden).
  • โœ… Simple text container: <mi>, <mn>, <mo>, <mtext> and <ms>.
  • โœ… Simple spacing: <mspace> element with width, depth, height attributes.
  • โœ… dir, mathcolor, mathbackground and mathsize attributes.
    • ๐Ÿ–Š 2022/05/09: Initial roadmap did not elaborate about right-to-left support. Although the dir attribute is properly mapped to the CSS direction property and that property taken into account for MathML layout, mirroring of stretchy operators is currently not supported.
  • โœ… Simplified semantics: just display the first child and hide annotations.

โœ… Basic Layout

  • โœ… Fraction (<mfrac>), with its linethickness attribute.
  • โœ… Postscripts: <msub>, <msup>, <msubsup>
  • โœ… Under and over scripts: <munder>, <mover>, <munderover>
  • โœ… Multiple pre and post scripts: <mmultiscripts>
  • โœ… Basic HTML-like implementation of mtable.
  • โœ… Advanced Spacing: mpadded with simplified interpretation of width, depth, height, lspace and voffset.

โœ… Operator Dictionary

  • โœ… form (for selecting an entry in the dictionary)
  • โœ… largeop and movablelimits (to perform spacing in under and over scripts)
  • โœ… lspace and rspace (to perform spacing in <mrow>-like elements).

โœ… Stretchy operators

  • โœ… Shaping large and stretchy operators using the MathVariants table.
  • โœ… Drawing of largeop operators in under and over scripts
  • โœ… Stretch logic in <mrow>-like elements and under and over scripts.
    • ๐Ÿ–Š 2021/08/04 Initial roadmap was to implement what is described in MathML Core but see below for current limitations.
  • โœ… Using stretchy and symmetric attributes.
  • โœ… Simple embellished operators
  • โœ… Roots (msqrt, mroot)

โœ… Advanced Style

  • โœ… mathvariant
    • ๐Ÿ–Š 2020/09/10: Initial goal was to support the mathvariant values from MathML 3. However we were only able to get one text-transform value accepted by the CSSWG. This provides automatic italic of variables ; authors are encouraged to directly use the relevant Unicode characters for other math variants.
  • โœ… displaystyle
  • โœ… scriptlevel

โœ… Accessibility

๐Ÿ–Š 2019/10/15: Initial roadmap was focusing on MathML rendering but after sending the intent-to-implement, we were asked to coordinate with the accessibility team. The goal is to get parity with Gecko and WebKit on two platforms:

  • โœ… Same macOS / NSAccessibility roles, subroles and attributes as Gecko and WebKit.
  • โœ… Same Linux / ATK roles and markup information as Gecko.

๐Ÿ–Š โ€œwidthโ€ of stretchy operators (blocked on Chromiumโ€™s refactoring)

In MathML Core, the min-content โ€œwidthโ€ and max-content โ€œwidthโ€ of a stretchy operator are the same : either the maximum โ€œwidthโ€ of all its sizes (vertical operators) or the โ€œwidthโ€ of its base size (horizontal operators).

This is obviously not the same as the actual โ€œwidthโ€ calculated during layout e.g. small, medium and big (vertical) fences can take different widths while a stretched (horizontal) accent is normally much wider than its base size.

Currently, Chromiumโ€™s layout implementation must use the min/max-content โ€œwidthโ€ as the actual โ€œwidthโ€ of bounding boxes. For MathML, this means that:

  • A vertical stretchy operator may be more narrow than its bounding box.
  • A horizontal stretchy operator may overflow its bounding box.

Note that Igaliaโ€™s downstream branch did not have this problem since it was not respecting Chromiumโ€™s limitation. Also, the issue is slightly mitigated upstream by splitting the extra space or overflow evenly on both sides.

Googleโ€™s rendering core has a plan to rewrite how the layout steps work but this is a big effort. Until that is resolved, one cannot properly implement stretchy operators as described in MathML Core and these operators will continue to cause serious rendering bugs.

โœ… Other tasks (not in the initial roadmap)

๐Ÿ–Š 2022/05/09: This list used to contain more items but has been updated to only include the ones that are expected to be in the initial release.

The following features have been discussed with Chromium reviewers or Math/CSS WG members during the implementation phase but they were not part of the initial roadmap:

  • โœ… Clear and small specification targeted towards browser implementers
  • โœ… Web Platform tests (with order of magnitude of thousands tests)
  • โœ… Relaunching a Standardization Group for MathML
  • โœ… Basic MathML DOM/IDL
  • โœ… display: math
  • โœ… text-transform: auto
  • โœ… CSS math-style property
  • โœ… CSS math-shift property
  • โœ… CSS math-depth property
  • โœ… font-family: math value
  • โœ… UA stylesheet adjustments
  • โœ… Basic handling of invalid markup
  • โœ… Integration with features forcing legacy layout (SVG, editing, fragmentation)
  • โœ… minsize and maxsize attributes for vertical operator stretching
  • โœ… ink metrics for MathML token elements

Besides these tasks, Igalia continues to keep an eye on security bugs, interoperability issues as well as compatibility with CSS.