MathML (& LaTeX) Workflow 2017

Slides:



Advertisements
Similar presentations
Using MathML in Blackboard/WebCT Bob Mathews Director of Training Design Science, Inc.
Advertisements

HTML Basics Customizing your site using the basics of HTML.
Using MathType and WebEQ to Author for MathPlayer Making sense of all the mumbo-jumbo presented by: Bob Mathews Director of Training Design Science, Inc.
WeB application development
Teppo Räisänen LIIKE/OAMK 2010
Math Accessibility on the Web: A Journey of Wailing and Gnashing of Teeth Greg Kraus University IT Accessibility Coordinator North Carolina State University.
INTRODUCTION TO REFWORKS Ben Watson and Anna Miller TEMPLEMAN LIBRARY.
Microsoft Expression Web-Illustrated Unit L: Using Code Tools.
Authoring Web Pages with MathML for Cross-browser Display Bob Mathews Director of Training Design Science, Inc.
1 Computing for Todays Lecture 22 Yumei Huo Fall 2006.
FIRST COURSE Creating Web Pages with Microsoft Office 2007.
Carrie Ann Desnoyers Instructional Designer CREATING ACCESSIBLE MATH IN D2L MATHTYPE, LATEX, MATHPAGES, AND MATHPLAYER.
ITM352 Javascript and Dynamic Web Pages: Client Side Processing.
NOTE: To change the image on this slide, select the picture and delete it. Then click the Pictures icon in the placeholder to insert your own image. Browser.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 2: Working with Webpage Files.
Microsoft Office PowerPoint 2013 Microsoft Office PowerPoint 2013 Courseware # 3256 Lesson 8: Sharing Presentations.
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
Getting Started with Expression Web 3
Amber Annett David Bell October 13 th, What will happen What is this business about personal web pages? Designated location of your own web page.
Extreme Makeover: SharePoint 2013 Edition
1 Session 1: Introduction to HTML Spring Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get.
Introduction to HTML5. History of HTML HTML first published – Tim Berners-Lee HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 XHTML 2.0.
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
Tutorial 1: Browser Basics.
CSC 330 E-Commerce Teacher Ahmed Mumtaz Mustehsan Ahmed Mumtaz Mustehsan GM-IT CIIT Islamabad GM-IT CIIT Islamabad CIIT Virtual Campus, CIIT COMSATS Institute.
How to Create a Document in Google Drive By Tressa Beckler.
Ron Stewart Chair - AHEAD Instructional Materials Accessibility Group Sean Keegan Office of Accessible Education Stanford University.
Elizabeth Pyatt, ITS See Notes panel for image ALT tags MathML (& LaTeX) Workflow 2015.
DMED1100 InDesign Advanced Class 8. Agenda  Scripting  Introduction to XML 2.
USING WORDPRESS TO CREATE A WEBSITE (RATHER THAN A BLOG) STEP-BY-STEP INSTRUCTIONS.
Capturing, writing and reading maths electronically - what works Dr Abi James Accessibility Group WAIS.
Solutions for consuming STEM Content. Knowing that the STEM content is accessible Ensuring your A.T. can capture the accessible STEM content Ensuring.
Strategies for Math & Science Accessibility Ron Stewart Access Technology Instructor High Tech Training Center Unit California Community Colleges.
® Copyright 2008 Adobe Systems Incorporated. All rights reserved. ADOBE® ACCESSIBILITY PDF Accessibility – Best Practices for Authoring Pete DeVasto Greg.
STEAM - Why Is Math Accessibility So Hard?. The difference between maths & text.
CMS 101 John McClimans – Web Manager Janel Ludwig – Web Content Specialist.
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
Session 1: Introduction to HTML Fall Today’s Agenda Talk about the functions of the Internet Cover useful terminology for today’s session HTML,
STEAM - Why Is Math Accessibility So Hard?
Sitecore Basic Training Drexel’s full-featured web content management system (CMS) Web Support Information Resources & Technology (IRT)
Sitecore Basic Training Drexel’s full-featured web content management system (CMS) Web Support Information Resources & Technology (IRT)
Sitecore Basic Training Drexel’s full-featured web content management system (CMS) Web Support Information Resources & Technology (IRT)
Introduction to HTML Hypertext Mark-up Language. HTML HTML = Hypertext Mark-up Language Is just plain simple text marked up by “tags” You can create a.
Sitecore Basic Training Content Management System (CMS) University Communications Web Services
XP Creating Web Pages with Microsoft Office
Indispensable tools for research at its best RefWorks 2.0 fundamental Alan Tang
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
Web Services University Communications
Introduction to HTML:.
HTML5 Basics.
Powerpoint available at
2 At the top of the zone in which you want to add the Web Part, click Add a Web Part. In the Add Web Parts to [zone] dialog box, select the check box of.
2 At the top of the zone in which you want to add the Web Part, click Add a Web Part. In the Add Web Parts to [zone] dialog box, select the check box of.
Tutorial: How to Creat a Website.
LMEvents SharePoint Portal How-to Guide
Chapter 4: HTML5 Media - <video> & <audio>
3.00cs HTML Overview 3.00cs Develop webpages.
Microsoft Office Illustrated
What You Need to Know About Accessible PDF
Web Accessibility Allison Kidd, Accessibility Specialist
Part of the Multilingual Web-LT Program
PowerPoint Basics Eric Prebys.
Intro to Web Development Links
Microsoft PowerPoint 2007 – Unit 2
Radoslaw Jedynak, PhD Poland, Technical University of Radom
HTML 5 Training HTML 5 SYMANTICS [Notes to trainer:
Web Development 101 Workshop
Native Documents vs PDF at MSU
4.00 Apply procedures to add content by using Dreamweaver. (22%)
Chloe Riley | Research Commons Librarian |
Presentation transcript:

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/