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.