Talking Math Online with LATEX Exploring Options for Mathematics on the Web

Talking Math Online with LATEX Exploring options for mathematics on the web.

Keith Jones

SUNY Oneonta

MAA Seaway Summer 2020 Workshop, June 2020 Overview

A Little LATEX

The State of Math Display Online

Online Platforms Supporting LATEX

LaTeX and Learning Management Systems Prelude

I have some blog posts which explore the topics we’ll discuss in greater detail, and collect some of this information for future reference. I hope to maintain these pages with helpful updates as I learn new information.

I Resources for LATEX Mathematics

I Exploring MathJax

I Platforms Supporting LATEX Online

I LATEX and Learning Management Systems Overview

A Little LATEX

The State of Math Display Online

Online Platforms Supporting LATEX

LaTeX and Learning Management Systems LaTeX is a massive and powerful system for creating technical documents.

But it has become wildly popular in mathematics and science as a language for rendering complex mathematics intuitively.

$$\begin{bmatrix} x_1 & y_1 \\ x_2 & y_2 \end{bmatrix} \vec v = (\lambda I) \vec v $$ becomes: x y 1 1 ~v = (λI)~v x2 y2 I \circ → ◦ I \perp → ⊥ I \rightarrow → → 1 Z π I \frac{1}{2}\int 0^\pi\sin(t)dt → sin(t)dt 2 0

If a natural command doesn’t exist for what you want, you can invent it. The command \newcommand{\reals}{\mathbb{R}} creates the macro \reals to typeset R.

Common-sense Names and Symbols

b Using x 0 for x0 and a^b for a , and natural abbreviations: I \infty → ∞ I \perp → ⊥ I \rightarrow → → 1 Z π I \frac{1}{2}\int 0^\pi\sin(t)dt → sin(t)dt 2 0

If a natural command doesn’t exist for what you want, you can invent it. The command \newcommand{\reals}{\mathbb{R}} creates the macro \reals to typeset R.

Common-sense Names and Symbols

b Using x 0 for x0 and a^b for a , and natural abbreviations: I \infty → ∞ I \circ → ◦ I \rightarrow → → 1 Z π I \frac{1}{2}\int 0^\pi\sin(t)dt → sin(t)dt 2 0

If a natural command doesn’t exist for what you want, you can invent it. The command \newcommand{\reals}{\mathbb{R}} creates the macro \reals to typeset R.

Common-sense Names and Symbols

b Using x 0 for x0 and a^b for a , and natural abbreviations: I \infty → ∞ I \circ → ◦ I \perp → ⊥ 1 Z π I \frac{1}{2}\int 0^\pi\sin(t)dt → sin(t)dt 2 0

If a natural command doesn’t exist for what you want, you can invent it. The command \newcommand{\reals}{\mathbb{R}} creates the macro \reals to typeset R.

Common-sense Names and Symbols

b Using x 0 for x0 and a^b for a , and natural abbreviations: I \infty → ∞ I \circ → ◦ I \perp → ⊥ I \rightarrow → → If a natural command doesn’t exist for what you want, you can invent it. The command \newcommand{\reals}{\mathbb{R}} creates the macro \reals to typeset R.

Common-sense Names and Symbols

b Using x 0 for x0 and a^b for a , and natural abbreviations: I \infty → ∞ I \circ → ◦ I \perp → ⊥ I \rightarrow → → 1 Z π I \frac{1}{2}\int 0^\pi\sin(t)dt → sin(t)dt 2 0 Common-sense Names and Symbols

b Using x 0 for x0 and a^b for a , and natural abbreviations: I \infty → ∞ I \circ → ◦ I \perp → ⊥ I \rightarrow → → 1 Z π I \frac{1}{2}\int 0^\pi\sin(t)dt → sin(t)dt 2 0

If a natural command doesn’t exist for what you want, you can invent it. The command \newcommand{\reals}{\mathbb{R}} creates the macro \reals to typeset R. I Web search “latex how to ...” – 99% chance you’ll be taken to a StackExchange article showing you what to do. I Overleaf has a nice tutorial with an extensive symbol list. I Some additional resources for drawing math with LaTeX.

Learning LaTeX

Have some math you want to type! Find examples that do what you need. I Detexify (an online reverse symbol lookup) I Overleaf has a nice tutorial with an extensive symbol list. I Some additional resources for drawing math with LaTeX.

Learning LaTeX

Have some math you want to type! Find examples that do what you need. I Detexify (an online reverse symbol lookup) I Web search “latex how to ...” – 99% chance you’ll be taken to a StackExchange article showing you what to do. I Some additional resources for drawing math with LaTeX.

Learning LaTeX

Have some math you want to type! Find examples that do what you need. I Detexify (an online reverse symbol lookup) I Web search “latex how to ...” – 99% chance you’ll be taken to a StackExchange article showing you what to do. I Overleaf has a nice tutorial with an extensive symbol list. Learning LaTeX

Have some math you want to type! Find examples that do what you need. I Detexify (an online reverse symbol lookup) I Web search “latex how to ...” – 99% chance you’ll be taken to a StackExchange article showing you what to do. I Overleaf has a nice tutorial with an extensive symbol list. I Some additional resources for drawing math with LaTeX. Overview

A Little LATEX

The State of Math Display Online

Online Platforms Supporting LATEX

LaTeX and Learning Management Systems It is tedious to do by hand, but there are automated processes. For example CodeCogs.com can create math images on demand from LaTeX.

Math as an Image

Wikipedia often uses images, and does it well: Math as an Image

Wikipedia often uses images, and does it well:

It is tedious to do by hand, but there are automated processes. For example CodeCogs.com can create math images on demand from LaTeX. In 1995, this was high quality math rendering on the web. But this is Blackboard’s built-in rendering in 2020.

Image Issues

There can be readability issues if it is not done well. Images in GIF or JPG format do not support transparent backgrounds; and GIF, JPG, and PNG do not maintain quality when scaling. Inline math often does not line up with text. Image Issues

In 1995, this was high quality math rendering on the web. But this is Blackboard’s built-in rendering in 2020. Easy to include in any web page that allows Javascript.

No need to install anything – call from the cloud with as little as one line of HTML.

Web browser and cloud server do the work.

- A Javascript Framework

MathJax converts LaTeX to HTML/CSS, an image, or MathML. No need to install anything – call from the cloud with as little as one line of HTML.

Web browser and cloud server do the work.

- A Javascript Framework

MathJax converts LaTeX to HTML/CSS, an image, or MathML.

Easy to include in any web page that allows Javascript. Web browser and cloud server do the work.

- A Javascript Framework

MathJax converts LaTeX to HTML/CSS, an image, or MathML.

Easy to include in any web page that allows Javascript.

No need to install anything – call from the cloud with as little as one line of HTML. - A Javascript Framework

MathJax converts LaTeX to HTML/CSS, an image, or MathML.

Easy to include in any web page that allows Javascript.

No need to install anything – call from the cloud with as little as one line of HTML.

Web browser and cloud server do the work. Comparing MathJax to PNG MathJax offers User Configuration Just create an HTML file that calls MathJax and has some LaTeX in it (with appropriate delimiters), and open that file in your web browser.

Steps can be found here: Exploring MathJax.

Running MathJax

If you can create an HTML ﬁle, you can get MathJax running for yourself. Steps can be found here: Exploring MathJax.

Running MathJax

If you can create an HTML ﬁle, you can get MathJax running for yourself.

Just create an HTML ﬁle that calls MathJax and has some LaTeX in it (with appropriate delimiters), and open that ﬁle in your web browser. Running MathJax

If you can create an HTML ﬁle, you can get MathJax running for yourself.

Just create an HTML ﬁle that calls MathJax and has some LaTeX in it (with appropriate delimiters), and open that ﬁle in your web browser.

Steps can be found here: Exploring MathJax. I MathML input and/or output I HTML or SVG (scalable vector graphics) output

All MathJax outputs support quality zooming, and MathJax supports assistive technology with MathML.

MathJax Inputs, Outputs, and Accessibility

MathJax can be conﬁgured to support: I LaTeX and/or AsciiMath input I HTML or SVG (scalable vector graphics) output

All MathJax outputs support quality zooming, and MathJax supports assistive technology with MathML.

MathJax Inputs, Outputs, and Accessibility

MathJax can be conﬁgured to support: I LaTeX and/or AsciiMath input I MathML input and/or output All MathJax outputs support quality zooming, and MathJax supports assistive technology with MathML.

MathJax Inputs, Outputs, and Accessibility

MathJax can be conﬁgured to support: I LaTeX and/or AsciiMath input I MathML input and/or output I HTML or SVG (scalable vector graphics) output MathJax Inputs, Outputs, and Accessibility

MathJax can be conﬁgured to support: I LaTeX and/or AsciiMath input I MathML input and/or output I HTML or SVG (scalable vector graphics) output

All MathJax outputs support quality zooming, and MathJax supports assistive technology with MathML. Overview

A Little LATEX

The State of Math Display Online

Online Platforms Supporting LATEX

LaTeX and Learning Management Systems I Perusall I Piazza

Edu-Discussion Platforms

I CampusWire I CampusWire I Piazza

Edu-Discussion Platforms

I Perusall I CampusWire I Perusall

Edu-Discussion Platforms

I Piazza I Slack

Communication / Chat / Productivity

I Discord I Slack

Communication / Chat / Productivity

I Discord I Slack

Communication / Chat / Productivity

I Discord I Discord

Communication / Chat / Productivity

I Slack I Overleaf I PreTeXt I UpMath and Papeeria

Document Creation I Google Docs I Overleaf I PreTeXt I UpMath and Papeeria

Document Creation I Google Docs I Google I PreTeXt I UpMath Docs

Document Creation I Overleaf and Papeeria I Google I PreTeXt I UpMath Docs

Document Creation I Overleaf and Papeeria I Google I Overleaf I UpMath Docs and Papeeria

Document Creation I PreTeXt I Google I Overleaf I PreTeXt Docs and Papeeria

Document Creation I UpMath Padlet – a Virtual Bulletin Board

· Can place in iframe · No inline math Padlet – a Virtual Bulletin Board

· Can place in iframe · No inline math I Geogebra (Text Tool supports most common LATEX commands)

I CoCalc/SageMath (Includes a LATEX editor – no free version)

(Bonus!) Graphing and Programming

I Desmos (can copy & paste between LATEXcode and Desmos math cells) I CoCalc/SageMath (Includes a LATEX editor – no free version)

(Bonus!) Graphing and Programming

I Desmos (can copy & paste between LATEXcode and Desmos math cells)

I Geogebra (Text Tool supports most common LATEX commands) (Bonus!) Graphing and Programming

I Desmos (can copy & paste between LATEXcode and Desmos math cells)

I Geogebra (Text Tool supports most common LATEX commands)

I CoCalc/SageMath (Includes a LATEX editor – no free version) Overview

A Little LATEX

The State of Math Display Online

Online Platforms Supporting LATEX

LaTeX and Learning Management Systems ...it’s not great.” I Blackboard - built-in support is ugly; MathJax works in some areas (but not all) I Moodle - has ”ﬁlters” for both built-in and MathJax I Canvas - built-in, use ”Advanced View” in editor I Brightspace/D2L - built-in support uses MathJax (possibly cannot recover original code; it is converted to MathML) I Sakai - MathJax can be enabled through Site Info → Manage Tools I Schoology - built-in support through ”Insert Content” menu

Learning Management Systems

Apparent Consensus:

“It works in my LMS, but... I Blackboard - built-in support is ugly; MathJax works in some areas (but not all) I Moodle - has ”ﬁlters” for both built-in and MathJax I Canvas - built-in, use ”Advanced View” in editor I Brightspace/D2L - built-in support uses MathJax (possibly cannot recover original code; it is converted to MathML) I Sakai - MathJax can be enabled through Site Info → Manage Tools I Schoology - built-in support through ”Insert Content” menu

Learning Management Systems

Apparent Consensus:

“It works in my LMS, but...... it’s not great.” I Moodle - has ”ﬁlters” for both built-in and MathJax I Canvas - built-in, use ”Advanced View” in editor I Brightspace/D2L - built-in support uses MathJax (possibly cannot recover original code; it is converted to MathML) I Sakai - MathJax can be enabled through Site Info → Manage Tools I Schoology - built-in support through ”Insert Content” menu

Learning Management Systems

Apparent Consensus:

“It works in my LMS, but...... it’s not great.” I Blackboard - built-in support is ugly; MathJax works in some areas (but not all) I Canvas - built-in, use ”Advanced View” in editor I Brightspace/D2L - built-in support uses MathJax (possibly cannot recover original code; it is converted to MathML) I Sakai - MathJax can be enabled through Site Info → Manage Tools I Schoology - built-in support through ”Insert Content” menu

Learning Management Systems

Apparent Consensus:

“It works in my LMS, but...... it’s not great.” I Blackboard - built-in support is ugly; MathJax works in some areas (but not all) I Moodle - has ”ﬁlters” for both built-in and MathJax I Brightspace/D2L - built-in support uses MathJax (possibly cannot recover original code; it is converted to MathML) I Sakai - MathJax can be enabled through Site Info → Manage Tools I Schoology - built-in support through ”Insert Content” menu

Learning Management Systems

Apparent Consensus:

“It works in my LMS, but...... it’s not great.” I Blackboard - built-in support is ugly; MathJax works in some areas (but not all) I Moodle - has ”ﬁlters” for both built-in and MathJax I Canvas - built-in, use ”Advanced View” in editor I Sakai - MathJax can be enabled through Site Info → Manage Tools I Schoology - built-in support through ”Insert Content” menu

Learning Management Systems

Apparent Consensus:

“It works in my LMS, but...... it’s not great.” I Blackboard - built-in support is ugly; MathJax works in some areas (but not all) I Moodle - has ”ﬁlters” for both built-in and MathJax I Canvas - built-in, use ”Advanced View” in editor I Brightspace/D2L - built-in support uses MathJax (possibly cannot recover original code; it is converted to MathML) I Schoology - built-in support through ”Insert Content” menu

Learning Management Systems

Apparent Consensus:

“It works in my LMS, but...... it’s not great.” I Blackboard - built-in support is ugly; MathJax works in some areas (but not all) I Moodle - has ”ﬁlters” for both built-in and MathJax I Canvas - built-in, use ”Advanced View” in editor I Brightspace/D2L - built-in support uses MathJax (possibly cannot recover original code; it is converted to MathML) I Sakai - MathJax can be enabled through Site Info → Manage Tools Learning Management Systems

Apparent Consensus:

“It works in my LMS, but...... it’s not great.” I Blackboard - built-in support is ugly; MathJax works in some areas (but not all) I Moodle - has ”ﬁlters” for both built-in and MathJax I Canvas - built-in, use ”Advanced View” in editor I Brightspace/D2L - built-in support uses MathJax (possibly cannot recover original code; it is converted to MathML) I Sakai - MathJax can be enabled through Site Info → Manage Tools I Schoology - built-in support through ”Insert Content” menu Other thoughts?

Thank you for taking part in the June 2020 MAA Seaway Section LATEXonline Workshop! I hope you’ve found some helpful takeaways here.

Thoughts you’d like to share? Questions you’d like to ask? Software you’d like to explore?

Thank you to the MAA Seaway Section, and especially Elizabeth Wilcox and Ryan Gantner for organizing this workshop.