News

MathML in Web Browsers



MathML and Browsers
28 August 2019

A review of browsers, web engines and native MathML implementations

Users can easily get confused between the different browsers, web engines and MathML statuses. This blog post provides an overview and summary in order to clarify things. For each MathML implementation, a screenshot of the same formula involving the Gamma Function is provided so that one can easily compare their rendering quality. Here is what it looks like in LaTeX:

Screenshot of a formula in XeLaTeX
A mathematical formula rendered by XeLaTeX

The rendering engine is one (primary) component of a browser. Rendering web content is very complex business, so there are only a few. Today, the three rendering engines are: WebKit, Blink and Gecko. Each of these is open source, and can be used in several browsers. Along the way, however, there have been some other notable ones: Presto, Trident and EdgeHTML. Each of these was proprietary. Each has (or had) markedly different architectures and evolutions.

The WebKit rendering engine is used by several browsers, notably: Apple’s Safari browser or GNOME Web. An initial implementation of MathML in WebKit happened around 2010 and was later improved in 2012. Back then, Google Chrome was also using WebKit and MathML was enabled in Chrome 24. Here is how it rendered:

Screenshot of an old MathML implementation in Chrome
MathML in WebKit-based Chrome 23.0.1271.99 for macOS (2012)

A few months later, Google announced a fork of WebKit, which they would re-factor into a new web engine called Blink. Blink is used for the Chromium browser. Chromium is really the same as Google Chrome modulo minor differences. During this refactoring, MathML was disabled and Blink has remained without support ever since. The latest version of Chromium does not support MathML rendering, so basically it renders text without any math layout:

Screenshot of MathML in Chrome
MathML in Blink-based Chrome 76.0.3809.100 for Linux (2019)

This is, more or less, how Microsoft’s Trident and EdgeHTML engines would have rendered as well.

Older versions of Opera used the proprietary Presto engine which supported the MathML for CSS Profile (effectively just default User Agent styles). This would have rendered very much like this:

Screenshot of MathML in Chrome with extra CSS rules
MathML in Chrome 76.0.3809.100 for Linux (2019), with Presto's extra CSS rules applied

However, today, many browser projects are based on Blink/Chromium, including both Opera and, more recently, Microsoft’s Edge.

During the first semester of 2016, Igalia engineers worked on a complete refactoring of the MathML code in Webkit to address main design and rendering issues. This is more or less the implementation in recent releases of WebKit, and it renders like this:

Screenshot of MathML in GNOME Web
MathML in WebKitGTK 2.24.3 for Linux (2019)

As part of the MathML in Chromium project, Igalia has also been implementing MathML on top of a new layout system for Blink currently being developed by Google. In Igalia’s Chromium build, MathML is currently rendered like this:

Screenshot of MathML in Igalia's Chromium build
MathML Chromium 78.0.3874.0 for Linux (Igalia's development build)

Finally, Gecko is another web engine which is best known for being used by Mozilla Firefox. The Mozilla MathML project started 20 years ago and support was released in Mozilla’s 1.0, two years before Firefox 1.0 was actually released. MathML is still supported in the latest versions of Firefox:

Screenshot of MathML in Firefox
MathML in Firefox 68.0.1 for Linux (2019)

Although the history of browsers and native MathML implementations is a bit complicated, the summary is:

  • Old implementations from Chrome 24 (WebKit) or Opera 9.5 (Presto) no longer exist and have nothing to do with newest implementations.
  • All modern browsers are essentially using or going to use one of the three open source engines: WebKit, Gecko and Blink. MathML is implemented in the first two and is being implemented in the last one.
  • These are really three different MathML implementations but work is in process to improve interoperatility between them and fix bugs.
More news