## Page Content

### In Penn State Services

This page describes some methods for enabling MathML display on a variety of platforms. See the MathML Test page for an example on this Web site.

MathML is important for accessibility and web standards because it allows equations to be stored as structured text. It can be reformatted with CSS, expanded with good resolution for low-vision users. Most importantly, is that if a screen reader can process MathML, a blind users can navigate and review parts of an equation, such as the top portion of a complex fraction.

## MathML Test

### Sample MathML with MathJax Support

$m=\frac{{m}_{0}}{\sqrt{1-\frac{{v}^{2}}{{c}^{2}}}}$

This section defines some terms that may help you understand MathML options better.

• MathML–MathML is a markup language designed to display equations ( (e.g. fractions, square roots, matrices, bounded integrals) on the Web and in other formats such as EPUB.
• MathJaxMathJax is set of open-source JavaScript libraries which enable correct display of MathML content in multiple browsers including particularly Google Chrome (which otherwise lacks native MathML support).
• namespace–the term "namespace" refers incorporating a link to the MathML specification typically in a tag such as the one below. The link enables some browsers to process MathML more accurately.

<math xmlns="http://www.w3.org/1998/Math/MathML">

• m namespace–The term "m namespace" refers to an earlier MathML variant used by Microsoft. As only Internet Explorer ever recognized it, it is recommend to avoid using m namespace MathML unless there is an issue of backwards compatability with a particular student.
Note: In m namespace MathML, all tags include a prefix m: (e.g. <m:math>)
• display="block"-Add this attribute to the MATH tag is you want the equation to be on its own line. Remove it if you want to embed the MathML in a sentence.

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">

## Browser and Screen Reader Support

### MathML Fonts

In order to view MathML, a browser should have a MathML font installed which includes symbols used to build different equation types. Some freeware fonts include:

• Firefox – Supports MathML natively and with MathJax
• Safari – Supports MathML natively and with MathJax
• Opera – Supports MathML natively (partial) and with MathJax
• Internet Explorer/JAWS – Use JAWS 16+ if possible
Older versions of JAWS use MathPlayer 3 inside Internet Explorer 9 (64 bit).
• VoiceOver iOS – Can read limited MathML

## Generating MathML with Equation Editors

Generally speaking, the most efficient way to generate MathML is to use an equation editor such as MathType (Windows/Mac) or other equation editor which supports MathML export.

Note: The built in Microsoft Office equation editor does NOT support MathML. The MathType plugin is recommended for faculty working with equations in Word of PowerPoint.

### LaTeX

If you use LaTeX, then you would want a tool which converts LaTeX to MathML such as MathType or other online conversion utility.

### Export MathML from MathType

Here are instructions for creating and exporting MathML code from MathType (Win/Mac).

1. Open Math Type 6 and use the template tools to build an equation.
3. Check the button for MathML or TeX option.
4. Set the next menu to MathML 2.0 (namespace attr). Click OK to close the window.
5. Copy the equation you have built.
6. Paste into a text or HTML source file. You should now see a series of tags beginning with <math xmlns=>...[/itex]

#### MathML Code for Fraction (x+1)/3y

<math display="block" xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mfrac> <mrow> <mi>x</mi><mo>+</mo><mn>1</mn> </mrow> <mrow> <mn>3</mn><mi>y</mi> </mrow> </mfrac> </mrow> [/itex]

## Add MathJax in an HTML Document

In the HEAD of an HTML document or other appropriate location, you should add one of the of the following links to the MathJax library.

#### For a Public Page

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>

#### For a Password Protected Page

Use the link below for ANGEL or a password protected LMS or archive.

<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>

Theoretically you can apply inline CSS attributes to both the MATH tag and individual tags (e.g. MFRAC, MROW, MO and others). However, MathJax interferes with that mechanism somewhat.

With MathJax enabled, you can either apply inline styles to MathML tags or create custom classes.

### Inline Styles

<math style="font-size:1.5em"} /* enlarge entire MathML expression */ <mfrac style="color:#C00"> /* make fraction red */ 

### Create Custom Classes

div.mathd {font-size:1.5em} /* enlarge entire MathML expression */ mfrac.red {color:#C00} /* make fraction red */ 

## MathML in Sites

You can embed MathML, but you must enable the MathJax plugin. If you enabled before October 2014, you may want to temporarily deactivate and re-activate it to add MathML support.

### Enable MathJax Plugin

1. Go to Sites at Penn State at http://sites.psu.edu.
3. Click the Dashboard link to the site in which you need to MathML.
5. Click the Activate link beneath the plugin for "MathJax-LaTeX".
Note: If you activated the plugin before October 2014, you may want to Deactivate, then Activate.
6. Click the Settings link beneath MathJax-LaTeX plugin.
7. In the MathJax Configuration menu select TeX-AMS-MML_HTMLorMML.
8. If your site is password protected then enter the following into the Custom MathJax Location? field.
https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
9. Click the Save Changes button.

### Add MathML to a Post or Page

1. Create or open a Page or blog Post in your site.
2. Click the Text tab to enter code view.
3. Where you want to insert MathML enter :
[mathjax]

[mathjax]

4. Copy and paste MathML code with namespace link between the two tags.
Note: Make sure that there are no blank lines in the MathML code.
5. Click Publish to save content.
6. Click View to verify content.

1. Ensure that the Jetpack plugin is activated (requires a WordPress.com account).
2. Instead of applying CSS to MathML tags, you need to apply CSS to MathJax plugin classes (e.g. .MathJax_Display).

## MathML In ANGEL

### ANGEL LMS

The ANGEL LMS does allow you cut and paste MathML into the HTML Editor in code view. For best results try to post code with namespace link with ANGEL open in Chrome or Internet Explorer.

#### HTML Editor

1. Within the HTML Editor, click the Source button to view the HTML code.
2. Copy and paste the following MathJax link
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>
3. Copy and paste MathML code beneath the MathJax script link.
4. Click Save to save the code.