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= m 0 1− 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:

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).

  1. Open Math Type 6 and use the template tools to build an equation.
    MathType screen with templates for fractions, square roots, Sums plus math symbols
  2. Go to the Preferences : Cut and Copy Menu… menu.
  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=>...</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="https://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 MathJax.js? before the string /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

  1. Go to Sites at Penn State at http://sites.psu.edu.
  2. Click button Go to My Sites to log in.
  3. Click the Dashboard link to the site in which you need to MathML.
  4. Click the Plugins link in the left menu.
  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. If necessary, uncheck the option Use MathJax CDN Service.
  8. Enter the following into the Custom MathJax Location? field.
    https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js
    Note: You can remove the s in the URL if all your content is public.
  9. In the MathJax Configuration menu select TeX-AMS-MML_HTMLorMML.
  10. 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.

Add CSS

  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://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/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.

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).

Top of Page