MathML (& LaTeX) Workflow 2017 Elizabeth Pyatt, ITS accessibilityweb@psu.edu See Notes panel for image ALT tags

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

The Equation Editor

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)

Equation Editor Palette

Wiris (Online) Free Online editor Save your output! WIRIS: http://www.wiris.com/editor/demo/en/mathml-latex

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

A Commonly Used Equation Standard Deviation (Statistics)

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

All the Jargon (M-words & Others)

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}

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=“http://www.w3.org/1998/Math/MathML”> <mrow> <mi>E</mi> <mo>=</mo> <mi>m</mi> <msup> <mi>c</mi> <mn>2</mn> </msup> </mrow> </math> More info at http://accessibility.psu.edu/audience

Critical MathML Jargon Namespace (Usually choose) Where spec is hosted on W3C Include Link to xmlns=http://www.w3.org/1998/Math/MathML 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.

M Name Space code Defunct Microsoft Variation <m:math xmlns=“http://www.w3.org/1998/Math/MathML”> <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>

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

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

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

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)

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

HTML & MathML http://accessibility.psu.edu/mathml/

Creating MathML NOT by handcoding! Use Equation Editor MathType (Mac/Windows) WIRIS http://www.wiris.com/editor/demo/en/mathml- latex.html MathMagic (Mac) Others….

Equation Editor Palette

Equation Editor to MathML Wiris Converter Utility http://www.wiris.com/editor/demo/en/math ml-latex MathType Edit ”Cut and Copy” preferences “Image” pastes as either MathML or LaTeX in text file

MathType Copy Preferences

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

2 MathJax Links Supports MathML or LaTeX Open site (http://) <script type="text/javascript"src="http://cdnjs.cloudflare.com/aj ax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS- MML_HTMLorMML"></script> Password Protected (https://) <script type="text/javascript"src="https://cdnjs.cloudflare.com/a jax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS- MML_HTMLorMML"></script> Prevents Firefox complaints See MathJax http://docs.mathjax.org/en/latest/start.html

On to Canvas

Canvas Demo (via Wiris)

Canvas Equation Editor Advanced View

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="https://psu.instructure.com/e quation_images/..." alt="\sum\limits_{i = 1}^n {{{({X_i} - \bar X)}^2}}" data-mathml="<math xmlns="http://www.w3.org/ 1998/Math/MathML"> IMG class=“equation_image” src = “” alt = [raw LaTeX data- mathml=“<mathxmlnm s="http://www3.or g/1998…

Secret MathML Inspect Element (published page)

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)

LaTeX to MathML Wiris Converter Utility MathType http://www.wiris.com/editor/demo/en/math ml-latex MathType Edit ”Cut and Copy” preferences “Image” pastes as either MathML or LaTeX in text file

Final Canvas MathType Notes Remove extra marks in red as needed E.g. \[….\] Design Science MathType Help http://www.dessci.com/en/products/mathty pe/works_with.asp Select platform/app from menu

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

Sites (WordPressCMS) w/ MathJax plugin

Sites MathJax Plugin

Plugin Settings Set Configuration: “TeX-AMS-MML_HTMLorMML” Force load: Check if many pages have MathML Custom Location: Use https://…cloudflare link

Sites Editor Text Mode (code) [mathjax] <math display="block" xmlns="http://www.w3.org/1998/Math/Math 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>

Links! MathML Accessibility (v 2.0) http://sites.psu.edu/accessibility/mathml/ MathJax (works with MathML) http://www.mathjax.org/ STIX Font Download/Sourceforge: https://sourceforge.net/projects/stixfonts Info: http://www.stixfonts.org/ MathML Wikipedia: http://en.wikipedia.org/wiki/MathML W3C MathML 2: http://www.w3.org/TR/MathML2/