Welcome to this presentation on Accessible Math on the Web Part Two -- The simple way
with MathML andHTML5.
My name is Greg Kraus, University IT Accessibility Coordinator at NC State University.
So what is MathML?
MathML is an XML language used to describe math.
It's a recommendation of the W3C for how to put math on the web.
MathML consists of a set of elements that describes how all the numbers and variables
and all the math operators, how they relate to each other and how they should be laid
out on a screen.
The nice thing about MathML and HTML5 is HTML5 understands MathML natively.
MathML is part of what we call HTML5's namespace.
Because MathML is part of HTML5's namespace, you can literally just drop this MathML code
into an HTML5 document and if the browser supports it, it will actually display the
equation in a graphical representation.
Now I do need to note that if you want to include MathML in an HTML 4 document or an
XHTML document, there're some extra steps that you need to do and that's because HTML
4 and XHTML, those languages don't understand the MathML language natively.
You have to add the MathML namespace to that, and we'll cover more of that in the next tutorial
in this series.
So this is what MathML looks like.
If you look at this and you're just confused and baffled because you don't understand it,
don't worry.
There are editors out there that create this for you.
You're not expected to learn how to code MathML by hand.
You usually use one of the editors to do this.
MathType is one of the very popular editors to create MathML.
So like I said, HTML5 understands MathML natively.
So you can just take that code and drop it straight into a web page, and the browsers
will render it correctly.
Here are some examples of what it looks like in different browsers - in Firefox, Opera
and Safari.
Now HTML5 is a newer standard, and the level of support for HTML5 in browsers does vary.
So there are some browsers that don't yet support MathML and know what to do with it.
So here is actually what happens when you try to put that MathML code and view it in
Internet Explorer or Chrome.
You don't get the visual output from it.
Just to show you, MathML works on the iOS as well.
Now, because all browsers don't know how to handle MathML yet, we can still use a library
like MathJax.
MathJax will render that MathML equation on any browser.
Just like in the first tutorial, we saw how MathJax can take a Tex or LaTeX equation and
render it as a graphical representation, it can do the exact same thing with MathML.
So even though there are some browsers that support it natively, if you do use MathJax
to display your MathML, your equations will look the same no matter what browser the user
has.
The other advantage to using MathJax is it does allow assistive technology users to interact
with the equations with a program called Math Player that works in Internet Explorer.
As of right now, just sticking the MathML in a web page without MathJax will not give
the assistive technology users the level of support they need.
So let's see how to put all this together in a web page.
So the first thing I'm going to do is come to MathType to create my equation.
I'm going to keep this pretty simple.
I'm going to use one of the pre-built equations to jsut insert it here.
Now in my preferences menu, I'll come to the cut and copy preferences, and I'll choose
the MathML or TeX format.
In the dropdown menu I'm going to chose MathML 2.0 no namespace.
The reason I'm choosing that is becasue with HTML5, MathML is already part of the namespace,
so I don't need to add any extra namespace attributes.
Click OK.
I'm going to select all.
Choose a copy, then I'll go paste this in my Web page editor.
So here I have my web page editor, in this case I am using Dreamweaver, but any web page
editor will work.
I've got my MathML code, and I'm just going to stick that in between the body tags.
I'll insert it like that.
Even before I add in the calls to the MathJax libraries, if I save this document now, this
will work in Firefox and in Opera and in Safari.
So let's see what that looks like.
See, here's how that page looks in Firefox, just by sticking the raw MathML on my page
without ever even needing to call MathJax.
Like I said, if I just do it this way, if I view this same formula in Safari or Opera
the equation is going to look slightly different.
Plus my assistive technology users will not be able to interact with this in the ways
that they need to.
Now, I'll just go back to Dreamweaver.
And in the head section, I'm just going to add in the call to the MathJax libraries.
I'll save that, and let's go see what this looks like on the web page now.
Let me just reload this page.
We'll see now it quickly loaded the MathJax libraries, and it's now using MathJax to render
this equation.
It will look exactly this way in whatever browser my user happens to be using.
For more resources on accessible math, or to view the code from any of these examples,
just go to the URL go.ncsu.edu/accessible-math.