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

Thanks To….  Jennifer Babb (EMS Dutton)  Mike Brooks (World Campus)  Stevie Rocco (EMS Dutton)  Alexa Schriempf (TLT Accessibility)  Stan Smith (Eberly College of Science)  Sonya Woods (World Campus)  Christian Vinten-Johansen (TLT Accessibility)  Sites & ANGEL Support

A Commonly Used Equation Standard Deviation (Statistics)

Why MathML Matters  Allows equation to be maintained as text  Enables quick edits, better zoom  Preserves semantic structure  Screen reader can navigate to parts of an equation  Blessed by  W3C (host of standard), MathJax (AMS/SIAM)  MIT and others  AMS, APS, ACS, IEEE, …  Apple, Wolfram, MathWorks, Design Science, ….  Elsevier, AIP Publishing

What IS MathML?  Markup Language  Specifically an XML language  Looks like HTML with different tags  E=mc 2 (Einstein) E = m c 2

Critical MathML Jargon  Namespace (Usually choose)  Where spec is hosted on W3C  Include Link to xmlns= in initial MATH taghttp://  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 (just for kicks) E = m c 2

MathJax & MathPlayer  MathJax  An open source JavaScript Library  Enables consistent rendering of MathML across browsers  e.g. Chrome MUST use MathJax  MathPlayer  Plugin for I.E., specifically  MathPlayer 3 on IE 9 OR  MathPlayer 4 Beta on IE 10+  Older versions of MathPlayer required M- namespace MathML

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

Equation Editor Palette

LaTeX (LaTeχ)  An offshoot of TeX (Donald Knuth) created by Leslie Lamport  Math equations and formatted text  Examples  E=mc 2 is E = mc^2  e iπ = -1 is e^{i \pi} & = -1  Standard Deviation  \sigma = \sqrt{\frac{1}{N-1} \sum_{i=1}^N (x_i - \overline{x})^2}

Why not just use LaTeX?  Screen reader support non-existent  Syntax is not as rich as MathML  What about LaTeX with MathJax?  It only works with IE/JAWS on IE 9  VoiceOver (Mac/iPhone) cannot process results  BUT…don’t get rid of LaTeX  Still a great tool for print/short hand  Easily converts to MathML

How to Implement MathML  Store equation in LaTeX or Equation Editor  Convert to MathML for Web or Office  Office Equation editor does NOT do MathML  Beware  Remove display=“block” if you need to embed in a sentence  Add a link to MathJax  Manually (Web Page, ANGEL, CMS)  Plugin Penn State)

2 MathJax Links Supports MathML or LaTeX  Open site (  Password Prorected (  Prevents Firefox complaints  See MathJaxMathJax 

Visual Browser Support BrowserComments Firefox 3+Excellent support SafariQuirky, newer versions better IE 9Use MathPlayer 3 w Namespace MathML IE 11 (10 buggy)Use MathPlayer 4 w/MathJax ChromeOnly with MathJax iOS SafariQuirky with MathJax

Screen Reader Support jeux.com/blog/frederic/?post/2015/05/06/MathML-Accessibility jeux.com/blog/frederic/?post/2015/05/06/MathML-Accessibility Screen ReaderComments JAWS 16+MathJax w/ IE11 or Firefox (MathPlayer?) JAWS 15IE 9 w/ MathPlayer 3 VoiceOverBetter without MathJax NVDAUse MathPlayer 4 / Firefox iOS SafariQuirky with MathJax (better without)

Let’s Demo this  MathType  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

Instructions 

Equation Editor Palette

MathType Copy Preferences

CSS Support  Good for enlarging default or color coding parts of equation  can target MATH, MFRAC, MSQRT…  Enlarge w/MathJax   MathJax & CSS quirky, hence inline style or custom class  Enlarge w/MathJax in Sites  Need to customize plugin CSS classes  MathJax_Display {font-size 1.25em}

Sites MathJax Plugin

Plugin Settings  Set Configuration: “ TeX-AMS-MML_HTMLorMML”  Force load: Check if many pages have MathML  Custom Location: Use URL if password protected

Sites Editor Text Mode (code)  [mathjax]   E = 2 π h c 2  …   [mathjax]

LMS  ANGEL (in HTML source view)  Add MathML + Link to MathJax link in HTML view  Use link  Canvas  No direct MathML support (Sigh). BUT  Use native equation editor. Can insert LaTeX  MathML read to screen readers only (buggy)

ANGEL (HTML Editor Code View)

ANGEL MathML Page

Canvas Equation Editor 1

Canvas Equation Editor 2

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

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