Oxide Interactive

MathML is a markup language used to facilitate the sharing of mathematical equations on the web. It contains both presentational and structural elements, allowing you to show how the equation looks, but also how it actually works.

A carefully encoded MathML expression can be evaluated in a computer algebra system, rendered in a Web browser, edited in your word processor, and printed on your laser printer. Source

Like many web technologies, actually achieving this optimistic description in the real world is not straightforward - some care must be taken when placing MathML equations in your HTML pages.

There are three qualities of MathML that make its implementation complicated. Firstly, its verbose XML structure makes it easy for computers to interpret, but difficult for humans to read and edit. Secondly, browser support is limited to:

• Firefox
• Netscape 7
• Internet Explorer 6+ with the MathPlayer plugin
• Internet Explorer 5 (Mac or PC) with the Techexplorer plugin
• Amaya
• Camino

Thirdly, specific fonts are required for displaying some equations. Thankfully, in Firefox if the user doesn’t have the correct font installed they are pointed towards a specific page by the browser and are guided through the font installation process.

This article will provide a brief survey of MathML techniques, followed by an example PHP script for embedding equations and providing alternative content.

Putting equations on your site

Prior to MathML, equations were generally embedded in web pages as images, and many websites continue to do it this way. Relying on images to display equations is far from optimal:

• Can only print at low resolutions
• Can’t search within functions
• No semantic information is stored, so the equation cannot be used elsewhere without transcribing

Other methods included using HTML symbols and CSS, providing the document as a PDF, linearising the notation or “drawing” the equation with ASCII.

Since MathML has become available, people have experimented with different ways of including MathML equations in documents. Below is an inexhaustive list of techniques that can aid in either writing MathML and/or serving up alternative content for people that can’t display MathML.

• Javascript gateway page
  • Requires the user to have Javascript enabled (if you use the default Design Science code, users with Javascript disabled will receive a blank gateway page)
  • Requires the creation and maintenance of two separate sites
  • Having duplicate sites may negatively affect your search engine ranking
  • Causes issues for other sites that want to link to a specific page
• Javascipt ASCII to MathML conversion
  • Requires the user to have Javascript enabled
  • Does not provide structural information, just presentational markup, so the equation can’t be easily reused elsewhere.
• Embed the equation in an iframe
  • Embedding MathML this way means that the outer document doesn’t have to be valid XML, only the document displayed in the iframe does.
  • Could be helpful if you are putting MathML into a legacy template
• Convert TeX equations to MathML on the fly with itex2MML
  • Allows you to author equations in the easer-to-write TeX format
  • There is also a Moveable Type plugin available
• Universal MathML Manager
  • Serves MathML to capable browsers and automatically renders image versions of equations for non-capable browsers
  • Requires Java on your server to render images of the equations
  • It’s an elegant solution, but might be overkill for sites that aren’t dedicated to mathematics
• ASCIIMath server side ASCII to MathML converter
  • Does not provide support for people without MathML capable browsers
  • Like the javascript ASCIIMath converter, it does not provide structural equation markup
• texvc (TeX validator and converter)
  • Server side LaTeX to HTML/MathML/image converter
  • Used by MediaWiki

An example PHP script

I’ve put together a brief PHP script that demonstrates one approach to serving MathML. This script displays MathML if the user’s browser can handle it, or an image if they cannot. Finally, if they can’t display an image it is possible to write a linearised version of the equation within the alt attribute, however this might not be practical for larger equations.

If a user cannot display MathML, this script will prompt them with information about how to install the right plugin, or change browser. Of course, casual users may just be happy to browse the image alternatives.

You can see the script in action here, or download it here. I’ve included some notes on how it works below.

Because MathML is an application of XML, it needs to be placed within a valid XHTML document that is served with the appropriate application/xhtml+xml header. Internet Explorer can’t usually handle this header and normally tries to display it as a document tree, but MathPlayer (as of version 2) kicks in and makes sure the document is displayed correctly. Remember though, if you’re serving your documents as XML you need to make sure the whole document validates, otherwise it will not display at all in Firefox, and instead users will see an XML error page.

With older versions of MathPlayer, you had to either include an object element that told MathPlayer to start, or use an XSL stylesheet. These steps aren’t necessary anymore, you can serve the same XHTML page to all MathML capable browsers.

In theory, you should be able to use the ACCEPT header to determine whether a browser is MathML capable. Unfortunately not all MathML capable browsers correctly announce that fact through the ACCEPT header (like IE with MathPlayer, for example), so you need to examine the USER_AGENT string to see whether their browser supports MathML. In the future you’ll need to keep an eye out for when other browsers implement MathML support so that you can add them to your regular expressions. The content negotiation could happen through Apache, but for portability it is done in this example through PHP. The regular expressions for determining MathML capabilities are based on Jacques Dister’s expressions.

The content negotiation part of the script looks like this:

if ((preg_match("/Gecko|W3C_Validator|MathPlayer/", $_SERVER["HTTP_USER_AGENT"])
&& !preg_match("/Chimera|KHTML/", $_SERVER["HTTP_USER_AGENT"])){
  // BROWSER SUPPORTS MATHML
  $contenttype='application/xhtml+xml';
  $header='<?xml version="1.0" encoding="utf-8"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd" >
  <html xmlns="http://www.w3.org/1999/xhtml" 
  xml:lang="en">';
  $mathml=true;
}else{
  // BROWSER PROBABLY DOESN'T SUPPORT MATHML
  $contenttype='text/html';
  $header='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">';
  $mathml=false;
}

The DTD might not look familiar, that’s because the W3C provides a useful DTD that combines the XHTML and MathML DTDs, which is perfect for embedding MathML into XHTML documents.

Pages parsed by the MathPlayer plugin are unfortunately rendered in quirks mode in Internet Explorer, even in IE7. This may well cause headaches for your CSS layout. There is a workaround for this, but it involves placing another doctype after the first one, which is far from ideal.

Accessibility

Screen reader users should also be able to hear MathML equations if they have the MathPlayer plugin installed. The screen readers JAWS, Window-Eyes, HAL, Read & Write and BrowseAloud all work with MathPlayer. Also important for visually impaired users, equations should increase in size with the browser text-zoom, and MathPlayer includes a MathZoom feature that increases the size of equations in IE, making them easier to read.

By providing MathML for supported browsers, images for browsers that don’t support MathML, and plain text for browsers that don’t support either you can be confident that your mathematical content is accessible to the maximum number of people.

MathML Resources

• Convert text equations to MathML online
• Export MathML out of Microsoft Word using MathType
• Design Science (the maker of MathPlayer) has a range of tutorials on putting equations online
• Instructions on distributing MathPlayer
• Authoring MathML for Mozilla, contains tips on MathML markup
• Summary of authoring for MathML
• The W3C MathML test suite
• Authoring MathML for Mozilla

Tags: MathML, PHP

This entry was posted by Peter on Monday, February 12th, 2007 at 5:24 pm and is filed under Web Standards. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.