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. -
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.
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.
|Display method||Seen in browsers||Quadratic formula||Euler's identity||Integral of the secant function|
An SVG tag which itself contains a
<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.
- If the browser can render MathML, then the embedded MathML is rendered.
- If it can't render MathML, then it will render the SVG 'screenshot'.
- 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 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
requiredFeatures. These may be used individually or in combination with the
switchelement 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
switchelement itself SHOULD be omitted as if it had a role of