Displaying equations within an internet browser is challenging, especially making them display in a way that is useable and readable for all students with a variety of abilities and who may be using a variety of assistive technology. When equations are displayed as textual objects, and not as images, assistive technology allows your students to magnify and explore the equation with the assistive technology speaking the parts of the equation. Canvas supports including equations within Canvas pages and assessment questions using LaTeX and MathML. Support for each and how to create equations is outlined in this article.
Due to an issue with the code that renders MathML causing problems in exam questions, we do not currently have our MathML display plugin integrated in Canvas. At this time it is best to use the LaTeX option.
This is the preferred method for rendering equations in Canvas as it displays well in the browsers that we have found to work best with Canvas and its associated applications: Firefox and Google Chrome (with an add-on installed).
Once you have the MathML notation for the equation, you can add it to your Canvas page or assessment instructions using the Canvas Rich Content Editor. Follow these directions:
There are no limits to the number of MathML equations you can be have in a Canvas page and there are no limits to the equation’s complexity that MathML is able to render. Remember: The rendering of the equation is textual, not image-based. This means that students using assistive technology, such as screen readers, will have the ability to have the equation read out to them. Assistive technology also allows your students to enlarge the equation and look at specific parts of it.
MathML (Math Markup Language) was created in 1998 by the World Wide Web Consortium (W3C) as a potential standard for displaying equations on the Internet. While many Internet browsers support MathML, it has failed to become universally accepted. Additionally, how each web browser implements MathML and renders the equations varies. Below is a table listing popular web browsers and their support of MathML. Despite its less than ubiquitous adoption, MathML is still one of the best solutions for displaying equations within Canvas for cross platform compatibility. Please note that we recommend Firefox and Chrome for best user experience in Canvas.
|Browser||Operating System||MathML Support|
|Chrome||All OS||Non-native, limited support using add-ons|
|Safari||MacOS and iOS||Native Support|
|Internet Explorer||Windows||Non-native, limited support using add-ons|
|Microsoft Edge||Windows||Not supported|
The difficulty with MathML is that its markup language is not easy to read or create. For instance, this is the MathML notation to render the fraction ½:
<math xmlns="http://www.w3.org/1998/Math/MathML"> <mfrac><mn>1</mn><mn>2</mn></mfrac></math>
It is important for your students to use a browser that is compatible with both Canvas and MathML rendering. We typically recommend using Google Chrome or Firefox because we have found these browsers experience fewer display issues than others.
The Canvas Rich Content Editor has supported creating equations based on LaTeX notation for many years. The equation editor in the Rich Content Editor converts the final equation into an image, which is not accessible to all students (Learn more about LaTeX accessibility issues). However, a recent change has been made to allow LaTeX equations to be rendered as text objects instead, and it requires using the steps below.
Canvas's built-in equation editor simply converts LaTeX equations into an image.
(Click image to enlarge it)
Being an image, the equation is guaranteed to appear correctly in all browsers and on all devices, but once created the equation becomes fixed and inflexible. You cannot make any changes or revisions to the equation image - you would have to recreate the equation image entirely. Additionally, being an image, it is not accessible and thus requires the creator to create a suitable alternate textual (alt-text) description. The initial alt-text created by the equation editor is simply the LaTeX notation of the equation. This is not an acceptable alt-text as by itself, in general, the meaning of the notation is not clear or understandable. For these reasons, we recommend that you use steps detailed above to add LaTeX equations in Canvas.
Due to certain limitations present in web browsers and within the equation rendering software that our Canvas instance uses, some LaTeX functions do not work or are only partially supported. Using \\ to indicate a line break is not supported. For these situations, each line of the equations should have its own set of opening and closing $$. In cases where there is little or no support for a function, the function will render red or an error message will be displayed. Currently there is no comprehensive list of what is and is not supported. That said, the list of unsupported functions is not extensive and decreasing with each release of the equation rendering software. Equation support based on operating system and browser match the table included above in the MathML background section.