Out for style

What SVG is for vectors MathML is for math: an XML language which receives as input a series of known brackets and produces a clear output.

<math display="block">
	<mi>x</mi>
	<mo>=</mo>
	<mn>2</mn>
	<mi>y</mi>
</math>

The code fits naturally in HTML, and while some of the features might not be supported, JavaScript helps to fill in the gaps. But there is one more core technology which comes into play to change the way the math looks, and extend what is once again supposed to just work.

Presentation

In markup you have the option of customizing the elements with attributes such as mathcolor and mathbackground. The two have the direct effect of updating the color for the text and the background and can be set in the opening bracket of any node.

<mi mathcolor="hsl(0 0% 20%)" mathbackground="hsl(0 0% 99%)">x</mi>

Or, in the context of an mstyle element, a general-purpose container to change more than a token in the same fashion.

<mstyle mathcolor="hsl(0 0% 20%)" mathbackground="hsl(0 0% 99%)">
	<mn>2</mn>
	<mi>y</mi>
</mstyle>

Mixing style with structure may sound outdated, but think of this option as the same one you have in SVG, where a host of attributes achieve a similar feat.

<circle fill="hsl(20 90% 50%)" cx="4.5" cy="6.5" r="0.35" />

In the scope of a different language, the attributes allow the content to stand on its own. Of course, once the content enters an HTML document you gain the option of styling the elements with CSS. A possibility that is all the more precious realizing that mathcolor and mathbackground are both noted as being deprecated. Modern browsers seem to comply with the code, but CSS works as a safe alternative and a natural expansion.

Style

mathcolor and mathbackground work as presentational hints, suggestions for the color and background-color properties with zero specificity. This means you can override the values with the most general selectors.

You can target the elements individually.

mi {
	color: hsl(0 0% 99%);
	background-color: hsl(20 90% 50%);
}

Or walk up the document tree, considering mstyle elements and even the parent math container. The properties cascade to the nested nodes.

math {
	color: hsl(0 0% 20%);
	background-color: hsl(0 0% 99%);
}

Extending the logic further, you can set the colors and even more properties higher and higher. The instructions ripple in a similar manner, but be warned: properties such as font-size are effective, but others like font-family won’t have the same success.

body {
	font-size: 1.2rem;
	font-family: monospace; /* ✘ not safe for math */
}

The reason? The same reason the output looks different, almost professional, right out of the box. Web browsers set a few properties on the top-level math element. For the font family, the assumption is that the expressions require a custom type, one suited for the particular task.

/* user-agent styles */
math {
	/* ... */
	font-family: math;
}

If you want a different font, you therefore need the specific instruction in your stylesheet.

math {
	font-family: monospace; /* ✔ math proofed */
}

Accepting this tidbit, you have free reign over the style. You can rely on CSS for every property designed for HTML and even a few meant for the foreign language, like math-style. Rather fittingly, you can lean on the property to render the overall math in a normal or compact figure. This last one minimizes the logical height, so is perhaps safer for simple formulas, with only a handful of values.

math {
	math-style: compact;
}

When the math grows in complexity, just like you benefit from the more powerful styling option, you will benefit from a larger, detailed display.