MathJax

Transcription

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.