Accessible Math on the Web: Part 1, The Simple Way to Use MathJax
Uploaded by NCState on 02.08.2012
Transcript:
Welcome to this presentation on Accessible Math on the Web Part one, "The simple way
to use MathJax." My name is Greg Kraus, University IT Accessibility Coordinator at NC State University.
So what's the problem with math on the Web? When writing math on the Web, both the characters
that you use and the layout of the characters and how they relate to one another spatially
both convey meaning. So, for example, in the quadratic equation, we have a number of characters
but they also are positioned in specific spots to convey meaning.
There's a fraction, so, I know what's on top of the fraction has a meaning and I know that
the characters on the bottom of the fraction have meaning. When I look at the b squared,
the two is slightly higher on the line, so I know that there is an implied meaning there.
There's a square root symbol, so I know everything under that square root symbol has meaning
as well.
Often you think, "Well, I can just use some plain text to write this equation," but plain
text won't actually reveal the same meaning. I could write this equation out just using
a bunch of ASCII characters. Visually, I can understand what this is but if I use an assistive
technology, like a screen reader, it won't make any sense at all. So let's hear how this
sounds to a screen reader user.
Quadratic formula in ASCII characters. Underline, underline, underline, dash B plus or minus
V B caret 2 dash 4 ack X equals dash dash dash two A
So you can see it's virtually impossible to understand what this equation actually is
using plain text.
You might think, "Well, maybe I can just make an image of the equation and then I can write
some alt text for it to describe what the equation is." This is not recommended because
whenever you're writing a textual description of an equation, there's a very specific grammar
that you need to use and a specific way that it needs to be written out. Unless you are
an expert in this field and know a lot about it, you're probably not going to get this
right. There are tools that will do this for you.
For example, to write the alt text for this equation, the quadratic equation, this is
what it's going to look like. You can see there's a lot of nuances in there even from
the words that are used and the special way some words are written. So, when a screen
reader reads them, the letters actually sound correct. There's a lot of special rules that
have to be followed. So, don't try this at home.
Why is this the simple way? Any time you're writing math on the Web, putting math on a
Web page has lots of options and parameters. You have to know things like what language
am I going to write the math in? Am I going to write it in TeX, or LaTeX, or MathML? You
have to know what type of document it's going to be in. Is it going to be an HTML 4 document,
an XHTML document, or an HTML5 document? You have to know which namespace to use in the
document in order to make the math render correctly.
If all of this is confusing to you and you don't know what all of this is, that's why
we have the simple way, to show you the simple way to always to get math to work correctly
online.
In a later tutorial, we'll look at other ways that you can put math online that takes advantage
of some other technologies.
What is the simple way to write math? First you need to create your equation in a program
called MathType. MathType is a program that lets you graphically build your equation and
then export it to a number of plain text formats that will work on Web pages. You take your
equation, you write it in MathType, and you copy and paste the plain text version of it
into your HTML document either as TeX or LaTeX.
Then you're going to add in the MathJax libraries to your page. It's just a single line of code
that's going to call these extra libraries that will convert your plain text TeX or LaTeX
equation into a graphical representation.
So why use MathType? Well, like I said, you have to write your equation in either the
TeX format or the LaTeX format and if you know how to write that by hand, that's fine
and you can do that but if you don't know how to write TeX or LaTex-and here are examples
of the quadratic formula written as both TeX and LaTex-if you don't know how to do that,
MathType makes this really easy for you to do.
So this is the MathType user interface. It has all kinds of options for adding in all
kinds of math symbols to help build your equation. For this tutorial, I'm going to use one of
their built-in equations. Just simply click here to add in the quadratic formula. After
you've built your equation, you'll need to go up to the Preferences menu and choose Cut
and Copy Preference. This is going to tell MathType how you want to get this equation
out of MathType and into your Web page editing program. So choose Cut and Copy Preferences.
Here I'm going to choose the second option for MathML or TeX. Under here, I've got a
number of options that I can choose either LaTeX or a couple of different MathML versions
or just plain TeX. For the simple way for doing Math, you need to either choose LaTeX
or TeX, it doesn't really matter. Either one will work just the same for this example.
I'll choose that.
If you have the checkbox "Include MathType data in translation" checked, you need to
uncheck that for this example and choose OK. So now I'll come to the Edit Menu and just
select all, edit and copy. So now I can go paste this equation into my Web page editor.
After you've written your equation in MathType and you set your preferences for how you want
to copy and paste this, then you need to go to your HTML document and you need to add
a single line to the head section of your Web page, and you're just going to add in
this single tag that basically goes out and pulls in the MathJax libraries for you. Don't
worry about writing down this big line of code right now. There's a link at the end
of the presentation to where you can get this. You can also just go to the MathJax website
and it's documented there as well.
So what does MathJax look like? Well, MathJax will take that plain text version of your
equation written in either TeX or LaTeX-in this case, it's written as Tex-and once the
MathJax Library is loaded, it'll go and look for these equations in your Web page and it
will transform it into a graphical representation of your equation.
By using MathJax, you gain a couple of things. First, your equation is going to look the
same no matter what browser people use. You don't have to go out and create a special
image of your equation and when someone with an assistive technology, like a screen reader,
comes to your Web page, they'll be able to completely interact with this equation and
understand it.
So let's go see how to add all this stuff into our Web page. This is my Web page editor.
In this case, I'm using Dreamweaver and I am in the code view but any Web page editor
will work for this. This is going to be a very simple example. I'm simply going to come
in here in between the body tags and just choose edit and paste and you'll notice it
pasted in the TeX version of that equation for MathType.
Now the next thing I need to do is I need to add in that link to the MathJax libraries.
So let me go grab that text and I'll come up here in the head section and I will just
paste that in there. That's all you need to do. Once you upload this to the Web, the MathJax
libraries will automatically be loaded and it will transform that equation into a graphical
representation of the equation.
Here's this equation in Internet Explorer. Now, the MathJax libraries will work in any
browser. The reason I'm in Internet Explorer is I want to show you one additional piece
of functionality that you get with using MathJax. In Internet Explorer, there's a plugin that
users can download called MathPlayer, and the MathPlayer plugin allows users to interact
with the equation in even more ways.
First, let me zoom in a little bit so we can see the equation a little better. Then, I'm
going to right click on the equation. This might be slightly off your screen, but I'm
going to choose Speak Expression. When I do this, it's going to actually read the equation
to me, and it's also going to highlight it as it reads. This is very helpful for people
who have certain learning disabilities so they can actually follow along with and see
what is being read as it's being read.
fraction negative B plus minus square root of B squared minus 4 A C end root over 2A
end fraction
What we just saw is actually only available in Internet Explorer because it does work
with the MathPlayer plugin. If any of your users come to your website with Firefox, Chrome,
Safari, it doesn't matter, the equation will still look graphically the same. It's just
this additional functionality of having the equation read to you that is only available
in Internet Explorer.
Here are a list of resources that I've mentioned in this tutorial. First, a link to the MathJax
website where you can go and read all the documentation about how the tools work, a
link to the MathType application where you can go and purchase it. If you are an NC State
user and you would like MathType, you can also just go the third URL go.ncsu.edu/mathtype
to download a copy of it. These links will all be provided in the description of the
video.
Finally, for any of the code samples that have been in this presentation, or for any
additional information, you can go to the link go.ncsu.edu/accessible-math.
to use MathJax." My name is Greg Kraus, University IT Accessibility Coordinator at NC State University.
So what's the problem with math on the Web? When writing math on the Web, both the characters
that you use and the layout of the characters and how they relate to one another spatially
both convey meaning. So, for example, in the quadratic equation, we have a number of characters
but they also are positioned in specific spots to convey meaning.
There's a fraction, so, I know what's on top of the fraction has a meaning and I know that
the characters on the bottom of the fraction have meaning. When I look at the b squared,
the two is slightly higher on the line, so I know that there is an implied meaning there.
There's a square root symbol, so I know everything under that square root symbol has meaning
as well.
Often you think, "Well, I can just use some plain text to write this equation," but plain
text won't actually reveal the same meaning. I could write this equation out just using
a bunch of ASCII characters. Visually, I can understand what this is but if I use an assistive
technology, like a screen reader, it won't make any sense at all. So let's hear how this
sounds to a screen reader user.
Quadratic formula in ASCII characters. Underline, underline, underline, dash B plus or minus
V B caret 2 dash 4 ack X equals dash dash dash two A
So you can see it's virtually impossible to understand what this equation actually is
using plain text.
You might think, "Well, maybe I can just make an image of the equation and then I can write
some alt text for it to describe what the equation is." This is not recommended because
whenever you're writing a textual description of an equation, there's a very specific grammar
that you need to use and a specific way that it needs to be written out. Unless you are
an expert in this field and know a lot about it, you're probably not going to get this
right. There are tools that will do this for you.
For example, to write the alt text for this equation, the quadratic equation, this is
what it's going to look like. You can see there's a lot of nuances in there even from
the words that are used and the special way some words are written. So, when a screen
reader reads them, the letters actually sound correct. There's a lot of special rules that
have to be followed. So, don't try this at home.
Why is this the simple way? Any time you're writing math on the Web, putting math on a
Web page has lots of options and parameters. You have to know things like what language
am I going to write the math in? Am I going to write it in TeX, or LaTeX, or MathML? You
have to know what type of document it's going to be in. Is it going to be an HTML 4 document,
an XHTML document, or an HTML5 document? You have to know which namespace to use in the
document in order to make the math render correctly.
If all of this is confusing to you and you don't know what all of this is, that's why
we have the simple way, to show you the simple way to always to get math to work correctly
online.
In a later tutorial, we'll look at other ways that you can put math online that takes advantage
of some other technologies.
What is the simple way to write math? First you need to create your equation in a program
called MathType. MathType is a program that lets you graphically build your equation and
then export it to a number of plain text formats that will work on Web pages. You take your
equation, you write it in MathType, and you copy and paste the plain text version of it
into your HTML document either as TeX or LaTeX.
Then you're going to add in the MathJax libraries to your page. It's just a single line of code
that's going to call these extra libraries that will convert your plain text TeX or LaTeX
equation into a graphical representation.
So why use MathType? Well, like I said, you have to write your equation in either the
TeX format or the LaTeX format and if you know how to write that by hand, that's fine
and you can do that but if you don't know how to write TeX or LaTex-and here are examples
of the quadratic formula written as both TeX and LaTex-if you don't know how to do that,
MathType makes this really easy for you to do.
So this is the MathType user interface. It has all kinds of options for adding in all
kinds of math symbols to help build your equation. For this tutorial, I'm going to use one of
their built-in equations. Just simply click here to add in the quadratic formula. After
you've built your equation, you'll need to go up to the Preferences menu and choose Cut
and Copy Preference. This is going to tell MathType how you want to get this equation
out of MathType and into your Web page editing program. So choose Cut and Copy Preferences.
Here I'm going to choose the second option for MathML or TeX. Under here, I've got a
number of options that I can choose either LaTeX or a couple of different MathML versions
or just plain TeX. For the simple way for doing Math, you need to either choose LaTeX
or TeX, it doesn't really matter. Either one will work just the same for this example.
I'll choose that.
If you have the checkbox "Include MathType data in translation" checked, you need to
uncheck that for this example and choose OK. So now I'll come to the Edit Menu and just
select all, edit and copy. So now I can go paste this equation into my Web page editor.
After you've written your equation in MathType and you set your preferences for how you want
to copy and paste this, then you need to go to your HTML document and you need to add
a single line to the head section of your Web page, and you're just going to add in
this single tag that basically goes out and pulls in the MathJax libraries for you. Don't
worry about writing down this big line of code right now. There's a link at the end
of the presentation to where you can get this. You can also just go to the MathJax website
and it's documented there as well.
So what does MathJax look like? Well, MathJax will take that plain text version of your
equation written in either TeX or LaTeX-in this case, it's written as Tex-and once the
MathJax Library is loaded, it'll go and look for these equations in your Web page and it
will transform it into a graphical representation of your equation.
By using MathJax, you gain a couple of things. First, your equation is going to look the
same no matter what browser people use. You don't have to go out and create a special
image of your equation and when someone with an assistive technology, like a screen reader,
comes to your Web page, they'll be able to completely interact with this equation and
understand it.
So let's go see how to add all this stuff into our Web page. This is my Web page editor.
In this case, I'm using Dreamweaver and I am in the code view but any Web page editor
will work for this. This is going to be a very simple example. I'm simply going to come
in here in between the body tags and just choose edit and paste and you'll notice it
pasted in the TeX version of that equation for MathType.
Now the next thing I need to do is I need to add in that link to the MathJax libraries.
So let me go grab that text and I'll come up here in the head section and I will just
paste that in there. That's all you need to do. Once you upload this to the Web, the MathJax
libraries will automatically be loaded and it will transform that equation into a graphical
representation of the equation.
Here's this equation in Internet Explorer. Now, the MathJax libraries will work in any
browser. The reason I'm in Internet Explorer is I want to show you one additional piece
of functionality that you get with using MathJax. In Internet Explorer, there's a plugin that
users can download called MathPlayer, and the MathPlayer plugin allows users to interact
with the equation in even more ways.
First, let me zoom in a little bit so we can see the equation a little better. Then, I'm
going to right click on the equation. This might be slightly off your screen, but I'm
going to choose Speak Expression. When I do this, it's going to actually read the equation
to me, and it's also going to highlight it as it reads. This is very helpful for people
who have certain learning disabilities so they can actually follow along with and see
what is being read as it's being read.
fraction negative B plus minus square root of B squared minus 4 A C end root over 2A
end fraction
What we just saw is actually only available in Internet Explorer because it does work
with the MathPlayer plugin. If any of your users come to your website with Firefox, Chrome,
Safari, it doesn't matter, the equation will still look graphically the same. It's just
this additional functionality of having the equation read to you that is only available
in Internet Explorer.
Here are a list of resources that I've mentioned in this tutorial. First, a link to the MathJax
website where you can go and read all the documentation about how the tools work, a
link to the MathType application where you can go and purchase it. If you are an NC State
user and you would like MathType, you can also just go the third URL go.ncsu.edu/mathtype
to download a copy of it. These links will all be provided in the description of the
video.
Finally, for any of the code samples that have been in this presentation, or for any
additional information, you can go to the link go.ncsu.edu/accessible-math.