Creating Accessibile Equations Using MathType

Configure Drupal to accept MathType

Create Equation

Paste Code into Drupal

Edit an Equation after it has been entered into Drupal

Known Issues

Orientation Note

Configure Drupal to accept MathType

  • Log-in to the course
  • Go to Modules
  • Select MathJax module
  • Save Configuration
  • Configure The module by going to <site>/admin/config/content/mathjax
  • Make sure that "Use MathJax Content Delivery Network (CDN)" is checked
  • The "MathJax CDN URL" should be set to  https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=T...   
  • NOTE: The above URL is for version 2.7 which as of 4-10-17 is the current version. This may need to be checked for a more up to date version periodically, but should work regardless. If a year has passed (April 2018) without this changing from 2.7, please check with Marty or Tim to see if an updated version is available.

Create Equation

Set Preferences in MathType

  • Under preferences, select “Cut and Copy Preferences”
  • Select “MathML or TeX”
  • Choose “MathML 2.0 (namespace attr)
  • Make sure both options ("Include translator name in translation" and “Include MathType data in translation”) are NOT checked.
  • ok

Create Equation

  • Create the equation using MathType or any other editor.
  • If creating in something other than MathType (like LaTex or Word), copy and paste the equation into MathType

Add text to an Equation

  • Under Style tab, click text
  • To go back to math, choose Math again

Add a Linebreak to an Equation

  • Add the following code where you want the linebreak: <mspace linebreak='newline' />

Paste Code into Drupal

  • Highlight the equation and copy it. This will automatically copy the code.
  • Paste the code into Drupal source code.

Change Position of the Equation

As it is, the code will center the equation. If you want to put the equation inline, simply delete the 'block' from the first line of code and replace it with ‘inline’.

Add Figure Numbers to Equations

Use the following code to add figure numbers to the equations

<div class="box-math">EQUATION</div>
<div class="box-math-caption">(#)</div>
<div class="box-math-clear">&nbsp;</div>
 

Edit an Equation after it has been entered into Drupal

It is very tedious to edit an equation directly in Drupal. The easiest thing to do is to make all edits in MathType and then repost to Drupal.

  • Copy the equation from Drupal using the normal view (NOT source code)
  • Paste the equation into MathType and edit.
  • Delete the old equation from Drupal. (MUST delete from source code)
    • If there are multiple equations on a page, place the xxx above the equation you want to delete so it is easier to find.
    • Go into source code and delete everything between the <math> tags.
    • Copy code

Known Issues

Problem with Dollar signs

If your course has MathJax turned on, the dollar sign acts as some sort of marker to start displaying MathML. This means that anytime you use a dollar sign in a sentence or a table, etc. (but not part of an equation) the page thinks it is time to start displaying MathML.

To force the dollar sign to render properly, either add a forward slash before the dollar sign (\$) in the wysiwyg editor or add a span tag around the dollar sign in the code ($).

Unsupported Brower

Not all browsers display MathML so you need to add a Note that appears if user is using an unsupported browser. The note is added within the MathML code

  • Check "Include MathType data in translation" box under the "Cut and Copy Preferences ".
  • When you copy the code, replace everything between the annotation tags with "This equation is not rendering properly due to an incompatible browser. See Technical Requirements in the Orientation for a list of compatible browsers."

    See code below for an example:
     
    <math display="inline" xmlns="http://www.w3.org/1998/Math/MathML"> <semantics> <mrow><msub> <mi>P</mi> <mi>t</mi> </msub> <mo>=</mo> <mi>I</mi> <mi>P</mi> <mo>×</mo> <msup> <mi>e</mi> <mrow> <mi>-</mi> <msub><mi>D</mi><mi>s</mi></msub> <mi>t</mi> </mrow> </msup></mrow><annotation encoding="MathType-MTEF">This equation is not rendering properly due to an incompatible browser. See Technical Requirements in the Orientation for a list of compatible browsers.</annotation> </semantics> </math>

    If you have multiple equations on a page, the easiest way to do this is to copy and paste the code into Dreamweaver and then do a find and replace using the settings shown in the image below.


     
  • Copying and pasting within Drupal can create a problem. To do so successfully, you MUST copy all equations from the SOURCE CODE, not from the wysiwyg editor.

Add the "Viewing Math Equations" note to the Orientation

The "Equations" Library page must be added to the Technical Requirements page of the Course Orientation. This page has an up to date list of acceptable browsers as well as directions for how a student can customize the viewing options (set zoom size, etc.)