How to include MathML in a Wordpress blog

MathML is a W3C recommendation for putting math directly on the web. That is, your MathML compliant browser should render the math correctly, and you should not have to generate small gifs from your LaTeX equations any longer. Here I show you how to configure your Wordpress blog to correctly serve pages with embedded MathML.

Let’s look at the “Hello World!” example from W3C spec:

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mrow>
    <msup>
      <mfenced>
        <mrow>
          <mi>a</mi>
          <mo>+</mo>
          <mi>b</mi>
        </mrow>
      </mfenced>
      <mn>2</mn>
    </msup>
  </mrow>
</math>

Including this code verbatim in your page won’t work, at least not with Firefox. Why? Right-click, if you will, in any page in your browser (NOT this one), click “View Page Info” and see what it says under “Type:”. Chances are it says “text/html”. Firefox will simply not render any MathML in pages that he thinks are pure HTML.

But, you will say, Wordpress pages are strict XHTML, aren’t they? I mean, if I look at the source of my pages it says right there, at the top:

<?xml version="1.0"?>
<!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">
...

Well yes, it says so. But chances are your Apache server serves this page with a Content-Type header that says ‘text/html’. Try it now:

$ wget --save-headers http://url.to.your.blog
$ cat url.to.your.blog
HTTP/1.0 200 OK
...
Content-Type: text/html; charset=utf-8

So the trick to make it work is to insert some additional PHP in the document’s template that will modify the declared Content-Type. See this blog post for the full, gory details. Here is what my template looks like:

<?= '<?xml version="1.0"?>' ?>
<?= '<?xml-stylesheet type="text/xsl" href="/mathml/mathml.xsl"?>' ?>
<?php header("Vary: Accept");
if (stristr($_SERVER["HTTP_ACCEPT"], "application/xhtml+xml")) {
	header("Content-Type: application/xhtml+xml; charset=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" lang="en">
	<head>
<?php } else {
	header("Content-Type: text/html; charset=utf-8"); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
<?php } ?>

Notice also that you need to change the DOCTYPE declaration, or your browser won’t find the special math entities declared by MathML, such as &Sum;. Notice also there’s a xml-stylesheet declaration; I’ll return to that in a moment.

With this in place, we can now insert, say, the definition of the first system matrix for an equivalent nodal network for building simulation (view the page’s source for the MathML markup):




  A
  =
  (
  
    
      
        -
        
          
            1
          
          
            
              C
              1
            
          
        
        
          ∑
          
            i
            =
            1
          
            n
        
        
          h
          i,1
        
      
      
        
          
            
              h
              2,1
            
          
          
            
              C
              1
            
          
        
      
      
        ⋯
      
      
        
          
            
              h
              m,1
            
          
          
            
              C
              1
            
          
        
      
    
    
      
        
          
            
              h
              1,2
            
          
          
            
              C
              2
            
          
        
      
      
        -
        
          
            1
          
          
            
              C
              2
            
          
        
        
          ∑
          
            i
            =
            1
          
            n
        
        
          h
          i,2
        
      
      
        ⋯
      
      
        
          
            
              h
              m,2
            
          
          
            
              C
              2
            
          
        
      
    
    
      
        ⋮
      
      
        ⋮
      
      
        ⋱
      
      
        ⋮
      
    
    
      
        
          
            
              h
              1,m
            
          
          
            
              C
              m
            
          
        
      
      
        
          
            
              h
              2,m
            
          
          
            
              C
              m
            
          
        
      
      
        ⋯
      
      
        -
        
          
            1
          
          
            
              C
              m
            
          
        
        
          ∑
          
            i
            =
            1
          
            n
        
        
          h
          i,m
        
      
    
  
  )

The final thing I need to explain is the xml-stylesheet declaration in my template’s preamble. The mathml.xsl stylesheet is provided by the W3C and is, I believe, supposed to provide some protection and/or warning against browsers that do not support MathML. You should download all the requires XSL files from this W3C page and put them somewhere on the same server as your blog (some browsers will not execute XSLT that does not come from the same server as the document).

That’s, in a nutshell, the modifications I had to do to my Wordpress installation to enable MathML in my blog posts. I’d love to hear your comments on this.