It’s been a long while since I wrote a tech post. That is primarily because with a new job came a whole new host of skills. Over the last 7-8 months I’ve learned MathML and SASS and am currently learning Python, RDFa markup and LaTex. My InDesign and ePub skills have also recently come in to play flooding my brain with all kinds of information.
Needless to say I wasn’t quite sure what to write about! But I’ve finally settled on MathML. MathML is a markup language that allows you as a web developer to show gorgeous, fully functional math equations to your consumers. MathML itself is only supported by certain browsers (check out how your favorite browser stacks up here) but when paired with a program like MathJax, MathML becomes much more accessible. MathJax works by rendering your MathML as an .svg image, which nearly every browser supports.
First let’s start with some solid MathML resources:
- General MathML information
- Mozilla Developer Network – MathML (great place to learn about mathvariants)
- W3C MathML validator
- W3C MathML Specs
For those interested MathML in EPUB:
- MathJax EPUB readers Page
- IDPF on MATHML
- Food for thought: eventually using the EPUB switch element to provide MATHML and image fallbacks
<math xmlns="http://www.w3.org/1998/Math/MathML"> <mi>π<!-- π --></mi> <mo><!-- ⁢ --></mo> <msup> <mi>r</mi> <mn>2</mn> </msup> </math>
And will render something like: πr2 — Rendered in HTML to ensure your ability to view it.
- MathML equations open with a tag and a connection to the MathML standard being used.
- Each tag has a different meaning, let’s look at the basics (for a more complete list, view this MathML Element Reference):
- <math> – Top-level MathML tag, you can’t have one tag inside another
- <mtext> – For arbitrary text or words in a math equation
- <mo> – Math operator, This can be wrapped around operators such as multiplication bullets or even just parentheses.
- <mi> – Math identifier, this should be wrapped around variables, function names and symbolic constants. Note: a single character in an <mi> will appear italic, multiple characters will not.
- <mn> – Math number, is wrapped around either a literal string of digits or a word that connotes a numeric meaning such as “twenty-five”
- Elements such as <msup> which make a MathML element superscripted must be wrapped around the superscripted character and the character receiving the superscript. For instance in the code above:
<msup> <mi>r</mi> <mn>2</mn> </msup>
The <msup> is around both the r and the 2 resulting in r2
- Font styles and weights should be applied using variants:
- If interested you can find more variants on the individual element pages in the MDN Element Reference
- And for those looking to add this to epub, for validation purposes you’ll need to declare the MathML in the conten.opf on every .html page it occurs on. For a detailed version of this see this site.
<item href="sample.xhtml" properties="mathml" />
- If you’re also planning to use MathJax to include .svg images as fallbacks, you’ll need to properly declare the svg images as well.
Well that’s it for today! What else would you all like to know about MathML?