MathML in HTML5 - Implementation Note

Appendix D Image Fallback

This section is non-normative.

User agents that do not support MathML may decide to render the fallback content provided by the altimg* attributes in some situations e.g. when they are specified or under a preference option. In that case, an approximate implementation is to render the math element as a HTML img element with the value of altimg as an src attribute, the value of alttext as an alt attribute, the value of altimg-width as the CSS width property, the value of altimg-height as the CSS height property and the value of altimg-valign as the CSS vertical-align property [HTML5] [CSS2]. Here is a partial implementation using the attr() function of [CSS3Values]:

⬇
math {
  display: inline;
}
math[display="block"] {
  display: block;
  text-align: center;
}
math {
  background-image: attr(altimg url);
  width: attr(altimg-width length);
  height: attr(altimg-height length);
  vertical-align: attr(altimg-valign length);
}
math > * {
  display: none;
}