1. MathML (& LaTeX) Workflow 2017
Elizabeth Pyatt, ITS
See Notes panel for image ALT tags

2. What’s New? Wiris also recommended math editor Canvas MathJax Setup
LaTeX workflows
Gotchas!
MathML workarounds
MathJax Setup
New since 2016
Sites MathJax Plugin

3. The Equation Editor

4. A Word About Math Editors
Building ≠ Comprehension
Anyone can build a differential equation
Wikipedia is always there.
Math is beautiful
See 3D print for
z(x,y)= √ cos(x2+y2)

5. Equation Editor Palette

6. Wiris (Online) Free Online editor Save your output! WIRIS:

7. Some simple demos
If e = mc2 then
m = e/c2
If c = √e/m

8. A Commonly Used Equation Standard Deviation (Statistics)

9. Wiris vs. MathType Feature Wiris MathType Price Free Ca. $60
Higher Ed. Math
Yes
Platform
Web (Cloud)
PC/Mac
LaTeX/MathML Conversion
Other Equation Formats No
Custom Template
Sort of
Chemistry
Yes (Basic)
Microsoft Office
Partial (PC only w/ MathType installed)
Yes (PC Only)
Formatting Tools
Partial (Prefs only)
RTL Formatting

10. All the Jargon (M-words & Others)

11. LaTeX (LaTeχ) That’s [latɛk] “lah-tek” Examples
Math equations and formatted text
Used by many STEM researchers for pubs
Used in Canvas Equation Editor
NOT directly supported by screen readers
Examples
E=mc2 is E = mc^2
eiπ = -1 is e^{i \pi} & = -1
Standard Deviation
\sigma = \sqrt{\frac{1}{N-1} \sum_{i=1}^N (x_i - \overline{x})^2}

12. MathML Markup Language E=mc2 (Einstein) Specifically an XML language
Looks like HTML with different tags
Supported by modern screen readers
E=mc2 (Einstein)
<math display=“block” xmlns=“
<mrow>
<mi>E</mi> <mo>=</mo> <mi>m</mi> <msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
</math>
More info at

13. Critical MathML Jargon
Namespace (Usually choose)
Where spec is hosted on W3C
Include Link to xmlns= in initial MATH tag
Which version?
Use version 2.0 with name space
M-Namespace (Avoid)
A variant by Microsoft
Same MathML tags prefixed by “m:”
Don’t use unless someone needs it.

14. M Name Space code Defunct Microsoft Variation
<m:math xmlns=“
<m:mrow>
<m:mi>E</m:mi>
<m:mo>=</m:mo>
<m:mi>m</m:mi>
<m:msup>
<m:mi>c</m:mi>
<m:mn>2</m:mn>
</m:msup>
</m:mrow>
</m:math>

15. MathJax & MathPlayer MathJax (www.mathjax.org ) MathPlayer
An open source JavaScript Library
Managed by the AMS
Enables consistent rendering of MathML across browsers
e.g. Chrome, Edge MUST use MathJax
MathPlayer
Plugin for Windows
NVDA can recognize MathPlayer 4

16. Page with MathML http://accessibility.psu.edu/mathjaxtest/

17. Visual Browser Support
Comments
Firefox 3+
Excellent support
Safari
Quirky, newer versions better
Chrome
Only with MathJax
Edge
iOS Safari
Quirky with MathJax
IE 9
Use MathPlayer 3 w Namespace MathML
IE 11 (10 buggy)
Use MathPlayer 4 w/MathJax

18. Screen Reader Support http://www. dessci
Comments
JAWS 16+
Firefox (with or without MathJax)
NVDA
Use MathPlayer 4 / Firefox Also Microsoft Word
VoiceOver
May be better without MathJax
iOS Safari
Quirky with MathJax (better without)

19. Current Screenreader Workflow
HTML works best
Raw HTML
Canvas
Sites
Also Drupal …

20. HTML & MathML

21. Creating MathML NOT by handcoding! Use Equation Editor
MathType (Mac/Windows)
WIRIS latex.html
MathMagic (Mac)
Others….

22. Equation Editor Palette

23. Equation Editor to MathML
Wiris Converter Utility
ml-latex
MathType
Edit ”Cut and Copy” preferences
“Image” pastes as either MathML or LaTeX in text file

24. MathType Copy Preferences

25. MathML in HTML Create HTML file Paste MathML into code view
Add a link to MathJax (next slide)
Manually (Web Page, ANGEL)
Plugin Penn State)
Configure CMS (Drupal)

26. 2 MathJax Links Supports MathML or LaTeX
Open site (
<script type="text/javascript"src=" ax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS- MML_HTMLorMML"></script>
Password Protected (
<script type="text/javascript"src=" jax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS- MML_HTMLorMML"></script>
Prevents Firefox complaints
See MathJax

27. On to Canvas

28. Canvas Demo (via Wiris)

29. Canvas Equation Editor Advanced View

30. Is there secret MathML? In Rich Content/HTML Editor
Code/HTML view
Attributes
<img class="equation_image" title="\sum\limits_{i = 1}^n {{{({X_i} - \bar X)}^2}}" src=" quation_images/..." alt="\sum\limits_{i = 1}^n {{{({X_i} - \bar X)}^2}}" data-mathml="<math xmlns=" 1998/Math/MathML">
IMG
class=“equation_image”
src = “”
alt = [raw LaTeX
data- mathml=“<mathxmlnm s=" g/1998…

31. Secret MathML Inspect Element (published page)

32. Canvas? Keeps the MathML and strips the MathJax Options
Use Math Editor – should be accessible
But currently buggy
May be image with LaTeX as ALT text
Upload HTML file with MathML/Math Jax
But rules out quizzes
Use raw MathML (for a student with screen reader)

33. LaTeX to MathML Wiris Converter Utility MathType
ml-latex
MathType
Edit ”Cut and Copy” preferences
“Image” pastes as either MathML or LaTeX in text file

34. Final Canvas MathType Notes
Remove extra marks in red as needed
E.g. \[….\]
Design Science MathType Help
pe/works_with.asp
Select platform/app from menu

35. Let’s Demo this MathType HTML page Sites at Penn State Create Equation
Set Copy (i.e. export) preferences
HTML page
Export code from editor
Add link to MathJax in HEAD
Sites at Penn State
Enable MathJax plugin
Set configuration to TeX-AMS-MML_HTMLorMML
Paste code in code view between [mathjax] tags

36. Sites (WordPressCMS) w/ MathJax plugin

37. Sites MathJax Plugin

38. Plugin Settings Set Configuration: “TeX-AMS-MML_HTMLorMML”
Force load: Check if many pages have MathML
Custom Location: Use link

39. Sites Editor Text Mode (code)
[mathjax]
<math display="block" xmlns=" ML">
<mrow> <mi>E</mi><mo>=</mo><mfrac> <mrow> <mn>2</mn><mi>π</mi><mi>h</mi><msup> <mi>c</mi> <mn>2</mn> …
</math>

40. Links!
MathML Accessibility (v 2.0)
MathJax (works with MathML)
STIX Font
Download/Sourceforge:
Info:
MathML
Wikipedia:
W3C MathML 2: