## Page Content

### MathML Definitions

### How To

### 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}}}}$$## About MathML and MathJax

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.**MathJax**–MathJax 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:

- Your system may include
**Cambria Math**from Microsoft - STIX font
- Asana Math

### Browser and Screen Readers

**Firefox –**Supports MathML natively and with MathJax**Safari**– Supports MathML natively and with MathJax**Opera**– Supports MathML natively (partial) and with MathJax**Google Chrome**–**Must**link to 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).

- Open Math Type 6 and use the template tools to build an equation.

- Go to the
**Preferences**:**Cut and Copy Menu…**menu. - Check the button for
**MathML or TeX**option. - Set the next menu to
**MathML 2.0 (namespace attr).**Click**OK**to close the window. - Copy the equation you have built.
- Paste into a text or HTML source file. You should now see a series of tags beginning with
`<math xmlns=>...</math>`

#### 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>

</math>

## Add MathJax in an HTML Document

In the HEAD of an HTML document or other appropriate location, you should add a link to the MathJax library such as the one below:

### MathJax Script Links

#### For a Public Page

`<script type="text/javascript"`

src="http://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/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="http**s**://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML">

</script>

#### Alternate Links

If you wish to a different version or configuration of MathJax, you can view the MathJax version list at Cloudfare. Please note that if you use a link with a `config`

option, you may need to add

before the string **MathJax.js?**`/config`

. See sample link above for an example.

## Add CSS

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 your plugin was activated before April 30, 2017**, you may need to follow steps 6-10 to enter a new link to MathJax,

### Enable MathJax Plugin

- Go to Sites at Penn State at http://sites.psu.edu.
- Click button
**Go to My Sites**to log in. - Click the
**Dashboard**link to the site in which you need to MathML. - Click the
**Plugins**link in the left menu. - 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**. - Click the
**Settings**link beneath MathJax-LaTeX plugin. - If necessary, uncheck the option
**Use MathJax CDN Service**. - Enter the following into the
**Custom MathJax Location?**field.

`http`

**s**://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js

**Note:**You can remove the

in the URL if all your content is public.**s** - In the
**MathJax Configuration**menu select**TeX-AMS-MML_HTMLorMML**. - Click the
**Save Changes**button.

### Add MathML to a Post or Page

- Create or open a Page or blog Post in your site.
- Click the Text tab to enter code view.
- Where you want to insert MathML enter :

`[mathjax]`

`[mathjax]`

- 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. - Click
**Publish**to save content. - Click
**View**to verify content.

### Add CSS

- Ensure that the Jetpack plugin is activated (requires a WordPress.com account).
- 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

- Within the HTML Editor, click the
**Source**button to view the HTML code. - Copy and paste the following MathJax link

`<script type="text/javascript"`

src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML">

</script> - Copy and paste MathML code beneath the MathJax script link.
- Click
**Save**to save the code.

## Drupal and other CMS Platforms

MathML can be automated in many platforms including Drupal ELMS. Check with your system administrator to learn more (they can contact us at accessibilityweb@psu.edu).