MathMLNow - MathML with scriptless fallback

Mathematical Markup Language (MathML) is a dialect of XML for describing mathematical notation and capturing both its structure and content. - MDN

In browsers that support it, MathML allows for the display of maths equations in a simple way that never pixilates, can be copied and pasted, and can be read by screen readers.

But because most browsers do not support MathML, fallback content is necessary. Traditionally, this has been done with the JavaScript library MathJax, but MathJax suffers from the same problem any JavaScript library has - it is a large download that slows down the users browsing; and doesn't work when JavaScript is turned off (or more likely, broken by another script on the page).

MathMLNow is a server-side rendering technique that produces a series of HTML tags that show MathML if available, gracefully degrading to an SVG image if MathMl is not supported.

As a demonstration, this page does not use any JavaScript whatsoever (even the 'dark mode' toggle is simply CSS).

Techniques for displaying math in browsers
Display method Seen in browsers Quadratic formula Euler's identity Integral of the secant function
MathMlNow
  • All (IE9+)
 x = − b ± b 2 − 4 a c 2 a x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} x equals StartFraction negative b plus-or-minus StartRoot b squared minus 4 a c EndRoot Over 2 a EndFraction e i π + 1 = 0 e^{i\pi}+1=0 e Superscript i pi Baseline plus 1 equals 0 ∫ 0 π / 6 sec ⁡ ( y ) d ⁡ y = ln ⁡ ( 3 i 64 ) \int_0^{\pi/6}\sec\left(y\right)\operatorname dy=\ln\left(\sqrt3i^{64}\right) integral Subscript 0 Superscript pi slash 6 Baseline secant left-parenthesis y right-parenthesis normal d y equals ln left-parenthesis StartRoot 3 EndRoot i Superscript 64 Baseline right-parenthesis
MathML
  • Firefox
  • Safari
 x=−b±b2−4ac2ax=\frac{-b\pm\sqrt{b^2-4ac}}{2a} eiπ+1=0e^{i\pi}+1=0 ∫0π/6sec⁡(y)d⁡y=ln⁡(3i64)\int_0^{\pi/6}\sec\left(y\right)\operatorname dy=\ln\left(\sqrt3i^{64}\right)
SVG
  • Chrome
  • IE9+
 x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} e^{i\pi}+1=0 \int_0^{\pi/6}\sec\left(y\right)\operatorname dy=\ln\left(\sqrt3i^{64}\right)
MathMlNow
An SVG tag which itself contains a <switch> tag. The <switch> tag tells the SVG renderer to choose between multiple nodes to render depending on system capabilities and/or language. In this case, we've created a MathML representation of the equation we want to display, and have also made an SVG 'screenshot' of that MathML.
  1. If the browser can render MathML, then the embedded MathML is rendered.
  2. If it can't render MathML, then it will render the SVG 'screenshot'.
Thus, all browsers should be able to see an image of the maths equation we are trying to show.
MathML
MathML is the standard language for showing mathematical equations on the internet, and will be rendered in much the same way that normal text is, using special 'math' fonts. This allows it to be zoomed without fear of pixelation, copied and pasted, and read by screen readers. Unfortunately, the current versions (as of the ) of Google Chrome, Intenet Explorer/Edge and Opera cannot render MathML, and so require fallback content.
SVG
SVG images are defined as a series of lines and shapes, rather than pixels, and so like MathML can be zoomed without fear of pixelation. It does not share MathML's other advantages, however.
But won't screen readers get confused by having the math twice in two formats?

No according to the spec they won't:

…SVG 1.1 defines the conditional processing attributes systemLanguage, requiredExtensions, and requiredFeatures. These may be used individually or in combination with the switch element to prevent content from being rendered under certain conditions, or to select between alternate versions of content.

SVG user agents MUST NOT expose to accessibility APIs any elements that are not rendered because of conditional processing attributes on that element or because of the position of that element within a switch construct. The switch element itself SHOULD be omitted as if it had a role of none or presentation.