Math rendering in Desire2Learn

I made a mistake (gasp!) in our eLC e-Community yesterday, saying that rendering math equations in D2L required a Java plug-in because browsers don’t support MathML. My information was out of date (I did check an existing course to confirm the browser’s behaviour, but the course was from 2011-2012; the new versions are updated).

Thankfully Tim Hasiuk posted this morning with some gentle corrections, so I figured I’d explain for the world what’s going on.

What I said in e-Community

“If I were to teach a math course using the learning environment I’d probably replace all of the equations with images using a service like CodeCogs.com’s Online LaTeX Equation Editor (http://www.codecogs.com/latex/eqneditor.php) and keep all of my source LaTeX equations. Here’s how CodeCogs renders f(x)=\frac{5}{2}cos(x-\pi)+\frac{1}{2}

CodeCogsEqn

I’d grab that image and insert it into the course – it’s browser and platform independent.”

Tim’s reply

Tim made the following points (portions removed, indicated by …):

“Problem with using images is that they degrade if resized, and the vLE doesn’t allow a lot of image options.

As a side note, MathML is what is used by the vLE embedded viewer to display the LaTeX equations created within the content area. So instead of copying an image, you could copy and paste the code from cogs into the LaTeX equation editor within the vLE content editor.”

Some investigation

So I looked at a newer course (MCV4U for next semester) and saw that Tim is right – the equations are rendered using MathJax (http://www.mathjax.org/), which is a Javascript project. The MathML in a course might look like

<math>
  <mrow>
    <mfrac>
      <mrow><mn>3</mn></mrow>
      <mrow><mi>x</mi><mo>-</mo><mn>3</mn></mrow>
    </mfrac>
  </mrow>
</math>

which renders in the browser, using MathJax, inline like this:

a MathML example

So that’s pretty nice.

Testing the different equation editors in the vLE

But if you’re trying to write new equations, what’s the best approach? I tried expressing the same function in each of the three D2L-provided equation editors: the Graphical Editor, the MathML Editor, and the LaTeX Editor.

The MathML code was

<math>
    <mrow>
        <mtext>f(x)</mtext>
        <mo>=</mo>
        <mfrac>
            <mrow>
                <mtext>2cos(x</mtext>
                <mo>-</mo>
                <mtext>π</mtext>
                <mtext>)</mtext>
            </mrow>
            <mrow>
                <mtext>π</mtext>
                <mo>+</mo>
                <mfrac>
                    <mn>1</mn>
                    <mn>2</mn>
                </mfrac>
            </mrow>
        </mfrac>
    </mrow>
</math>

The LaTeX code was

f(x)=\frac{2cos(x-\pi)}{\pi+\frac{1}{2}}

Here’s how a test page I made renders in each browser I have (you may need to click/tap each to see the full version):

Chrome 32

EquationEditors_Chrome

Firefox 26

EquationEditors_Firefox

Internet Explorer 11

EquationEditors_IE11

As you can see, the browsers were very similar in their handling of the code. In each case I left the default settings for MathJax, which users can choose on the fly (in the past, it was a D2L preferences setting to use a Java plugin or to render the MathML directly). Here are the choices:

EquationEditors_MathRenderer

In IE and Chrome it was best to leave as HTML-CSS; MathML was not rendered by the browser (as expected) and SVG was a bit wonky (inconsistent type size was the most noticeable issue).

Firefox provides native support for MathML, though, so here’s what it rendered:

EquationEditors_Firefox_MathML_Renderer

Looks familiar, eh? Firefox did a nice job, which makes sense.

So what’s the right approach?

Take a look at how things rendered above.

First, the Graphical Editor doesn’t do a nice job (or I’m using it incorrectly). This is really clear in the function notation on the left side of the equation. Kinda gross.

Second, the MathML was rendered nicely. It’s a bit small, but you can adjust the zoom as a user, so that’s not a really big deal. It’s also done inline with the text, which is nice.

Last, LaTeX is the most beautifully rendered (in my opinion), but it suffers here from being a separate, centered block (it’s not inline), which is arguably an issue that is a dealbreaker. Most interesting to me is that the LaTeX is actually converted to MathML for rendering. Has anyone found a way to get LaTeX’s prettiness while still being inline, without having to dive into the HTML? I’d like that to be something a math teacher (and a math student!) would feel comfortable with.

Semi-Final Conclusions

If I were teaching it, I’d be using the LaTeX editor because I’m comfortable with LaTeX as a language. If I didn’t know any LaTeX I’d probably go to an extension or website which uses a graphical editor to produce LaTeX live, like CodeCogs.com’s Online LaTeX Equation Editor (http://www.codecogs.com/latex/eqneditor.php) This is the easiest one I found in my quick search. There are also ways to convert the LaTeX to MathML so that you can use the MathML editor and get the inline capability if you want (see http://www.fmath.info/java/latex-mathml-converter/ for one example).

LaTeX Update

There is currently a really nice, comprehensive guide to using LaTeX for Math at ftp://ftp.ams.org/ams/doc/amsmath/short-math-guide.pdf and another helpful resource at http://en.wikibooks.org/wiki/LaTeX/Mathematics

Another LaTeX Update

This is a really cool tool for recognizing your hand-drawn symbols and returning the name of the symbol in LaTeX: http://detexify.kirelabs.org/classify.html

And here’s a graphical/the-way-you-type-math conversion tool that will generate LaTeX: http://mathlex.org/latex

Advertisements

11 thoughts on “Math rendering in Desire2Learn

  1. I’ll leave a comment for myself… turns out using “\left (” and “\right )” would have been better than “(” and “)” in the examples I listed. If you just use parentheses they don’t resize automagically based on their contents; the \left and \right delimiters are smarter.

  2. Math layout always comes in two ways, "inline" and "display" (also called "block"). MathML specifies this as an attribute to the <math> element (display="block/inline" where no attribute triggers inline mode); in LaTeX you specify this with different sets of delimiters. The LaTeX (and MathJax) defaults are \( … \) for inline, \[ … \] for display (although frequently, people configure MathJax to work with the TeX defaults $…$ and $$…$$).By the way, the differences between the MathML and TeX rendering is due to the (somewhat incorrect) use of an <mtext> element around f(x). The more usual (but verbose) way would be <mi>f</mi> <mo stretchy="false">(</mo> <mi>x</mi> <mo stretchy="false">)</mo>You can compare the MathML produced by MathJax internally via the MathJax menu under "Show Math as => MathML".

  3. Here is what is frustrating me about D2L and MathJax. I prefer manually writing HTML. I would really like to just throw in the `script` element that loads MathJax, configured to my liking. With typical use of MathJax, you can then just enter LaTeX directly into the HTML, like `Here is a fraction: \(\frac{a}{b}\).`.

    However as far as I can discern, D2L overwrites my loading of MathJax with its own configuration. Its own configuration is fixed at version 2.1 (currently 2.4 is latest) and worse, does not enable raw LaTeX input in the HTML.

    Have you or your readers discovered a way to load MathJax in your HTML in such a way that it trumps D2L’s configuration? I tried using the `defer` attribute, but that didn’t work. The closest I got was to declare nonstandard math delimiters, and they seemed to survive beyond D2L’s application of MathJax. However despite the About MathJax telling me that such elements are being rendered using 2.4, I can tell from issues with the CSS-HTML output that it’s not really using 2.4.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s