# Latex -> html with mathematical equations for accessibility to generate MathML

Edit, original question below - I would like to simplify the question to the following:

• What is the best way to take a LaTeX input file, which includes matrices and vectors in formulae and make it accessible?

Below I describe what I have done so far, which involves conversion to a web document with MathML for the equations.

I now know that Firefox supports MathML natively, but Chrome does not, which confused me somewhat.

I would really appreciate any answers/suggestions/comments - and I very much appreciate all the comments so far

From these I have learnt that MathML can be rendered with MathJax on browsers like Chrome that do not natively support MathML, (though I don't really understand exactly how to do this.)

Original posting.

First, please note the following points with regard to previous questions related to this topic

I have made progress with many thanks to contributors to the following questions/answers;

I am also aware of

I am aware that accessibility can mean different things to different people.

The particular issue that I am asking about here is about making equations accessible - and in particular generating some output that can be read by screen readers when it comes to equations.

I have several PDF documents that I generate from LaTeX files, which include equations including matrices, vectors etc.

I want to be able to generate accessible or at least more accessible versions of these documents from the same LaTeX files. From what I can see a good way to go is to use LaTeX to MathML converters. I am assuming in doing this is that if MathML is pretty much the standard for accessibility for equations. This is what I have found from websearching.

If I can convert equations from LaTeX documents to MathML standard then screen readers should be able to read the MathML equations and this should at least improve the accessibility of the documents.

I have generated the file math_test.tex to test the process given below at the bottom of this question.

I have used following commands to generate webfiles...

mk4ht mzlatex math_test.tex "html,mathplayer"
latexml math_test.tex |latexmlpost --dest=math_test.html -


(using mk4ht version 1.1 and latexml version 0.8.4 - both on debian linux - the mk4ht might be a bit old, but the latexml is the newest due to issue with the debian repository for latexml, which appears to be a known issue)

The results are a bit variable and critically depend on the web browser that I use to view the files... - multiple screen shots below show the results and the source LaTeX code is also below. - in brief Firefox does a good job, but Chrome seems to lose 'vertical spacing'. Latexml worked better for me than mk4ht, but I am aware that there may be a version issue for mk4ht

My Questions...

• the best results are found with latexml and firefox browser - is there something that I am doing wrong which means that different browsers show different results? The firefox version with latexml looks best, but I will need to try to make it impossible to view with chrome to make it accessible if that makes sense (see below)
• Am I missing something - do you have a better suggestion of how to generate more accessible files - particularly documents with readable equations?

Not sure why the webbrowsers behave so differently, but clearly Chrome is an issue and I have not tested IE/Edge/Safari... - I am wondering if everyone has been developing lateml/mk4ht to Firefox - any thoughts on this would be interesting. Given the much better results with Firefox I am wondering if I need to try to put suitable conditional/if statements at the beginning of the html to prevent them being read by other web browsers - or maybe just loading the pdf file instead.

The PDF file looks like this:

Best fit - latexml (0.8.4) gives the following .html file in Firefox

latexml (0.8.4) gives the following .html file in chrome

mk4ht (v1.1) gives the following .xht in Firefox

mk4ht (v1.1) gives the following .xht in Chrome

LaTeX source document

\documentclass[12pt,a4]{article}
\usepackage{amsmath}
\usepackage{amssymb}
\begin{document}
\centerline{\textbf{\large{Mathematical expressions}}}
\begin{enumerate}
\item Vectors $\mathbf u$, $\mathbf a$ and $\mathbf b$:
\begin{align}
\mathbf u &= \begin{pmatrix} -2\\-1\end{pmatrix}
& \mathbf a &= \begin{pmatrix} -3\\1\end{pmatrix}
& \mathbf b &= \begin{pmatrix} 1\\3\end{pmatrix}
\end{align}
$\mathbf u = \alpha \mathbf a + \beta \mathbf b \qquad$  Norm:$|| \mathbf u||$.
\begin{align}
\hat{\mathbf u} &= \lambda \mathbf a = {\langle\mathbf a, \mathbf u\rangle \over \langle\mathbf a, \mathbf a\rangle} \mathbf a
=   {\begin{pmatrix}-3\\1\end{pmatrix}\cdot\begin{pmatrix}-2\\-1\end{pmatrix} \over \begin{pmatrix}-3\\1\end{pmatrix} \cdot \begin{pmatrix}-3\\1\end{pmatrix} }\mathbf a =  { 5 \over 10 }\mathbf a =
{ 1 \over 2 }\mathbf a = \begin{pmatrix}-1.5\\0.5\end{pmatrix}
\end{align}

\item Matrices
\begin{align*}
\begin{pmatrix}1&3+2i\\3-2i&4\end{pmatrix} &&
{\rm det}{\mathbf A}&=
\begin{vmatrix}3&4&7\\2&-2&1\\1&2&5\end{vmatrix}
&
\begin{vmatrix}x&1&1\\1&x&1\\1&1&x \end{vmatrix}
&= (x-1)^2(x+2)
\end{align*}
\item  $a_1 \ge 0 \qquad p(x) = p_0+p_1x+p_2x^2+p_3x^3+p_4x^4+p_5x^5$
\item Transformations:
\begin{align*}
T:\mathbb R^3 &\rightarrow \mathbb R^2&  \text{where}\quad
T  \begin{pmatrix}a_1\\a_2\\a_3\end{pmatrix} =  \begin{pmatrix}a_1a_2\\a_1a_3\end{pmatrix}
\end{align*}
\begin{align*}
T  \begin{pmatrix}a_0+a_1x+a_2x^2+a_3x^3\end{pmatrix} =  \begin{pmatrix}a_1&a_2\\a_3&a_1-a_0\end{pmatrix}
\end{align*}
\end{enumerate}
\end{document}

• Have you tried tex4ht with MathJax (tex.stackexchange.com/questions/68916/…)? I think MathJax provides some nice accessibility support. – Alan Xiang Aug 3 '20 at 17:43
• @AlanXiang - many thanks for the comment... so I guess you are suggesting trying make4ht filename.tex "mathml,mathjax" - I will try that.... .. great to hear about that - so just to be clear MathJax would be an alternative to MathML is that correct? – tom Aug 3 '20 at 18:05
• MathJaX isn't an alternative to MathML. It can use MathML as an input, and this is better for accessibility since you still have the MathML for those that need it. What MathJaX does is render the mathematics for those browsers that do not yet have decent MathML support of their own. So your best route is to convert to MathML and then serve the page with MathJaX loaded. – Andrew Stacey Aug 3 '20 at 23:27
• Possibly useful: csun.edu/~hcmth008/mathml/acc_tutorial.pdf – Ross Aug 4 '20 at 16:40
• @Ross - many thanks for this link – tom Aug 4 '20 at 16:53

I thought I fixed fences not so long ago, when I removed most of instances of the deprecated element in the MathML configuration. should be used instead. What I missed is that the whole expression must be in enclosed , otherwise the fenced parentheses are not rendered correctly.

It should be fixed in the TeX4ht sources now. Here is the updated mathml.4ht file you can try.

Btw, it is best to use

make4ht math_text.tex "mathml,mathjax"


make4ht post-processes the generated HTML and fixes some issues especially in MathML. mathjax option will load MathJax, which fixes lot of rendering issues. For example it can display our wrong MathML code correctly even without the fix.

This is how is the file rendered in Firefox without MathJax:

And this one with MathJax:

You can see that it uses nicer fonts and in addition it works also in other browsers than Firefox.

• Ahoj Michal, many thanks for your answer and for fixing make4ht, really impressive work - I have started a bounty to give to this answer for the great work you have done on this. – tom Aug 19 '20 at 23:05
• @tom oh, thanks! it was not hard to fix, I just had to reread one section in the MathML specification :) – michal.h21 Aug 20 '20 at 16:39

One option is to write Rmarkdown as an .Rmd file and compile in RStudio to an HTML file. The Rmarkdown workflow is:

Downstream of the .Rmd file, all the processing happens automatically in RStudio.

This is the Rmd file:

---
title: ""
author: ""
date: ""
output:
html_document:
pandoc_args: "--mathml"
keep_tex: true
- \usepackage{amsmath}
- \usepackage{amssymb}
---

## Mathematical expressions

1. Vectors $\mathbf u$, $\mathbf a$ and $\mathbf b$:
\begin{align}
\mathbf u &= \begin{pmatrix} -2\\-1\end{pmatrix}
& \mathbf a &= \begin{pmatrix} -3\\1\end{pmatrix}
& \mathbf b &= \begin{pmatrix} 1\\3\end{pmatrix}
\end{align}

<br>

\begin{aligned} \quad \mathbf u &= \alpha \mathbf a + \beta \mathbf b \qquad \text{Norm:}|| \mathbf u|| \end{aligned}

<br>

\begin{align}
\hat{\mathbf u}
= {\langle\mathbf a, \mathbf u\rangle \over \langle\mathbf a, \mathbf a\rangle} \mathbf a
= {\begin{pmatrix}-3\\1\end{pmatrix}\cdot\begin{pmatrix}-2\\-1\end{pmatrix} \over \begin{pmatrix}-3\\1\end{pmatrix} \cdot \begin{pmatrix}-3\\1\end{pmatrix} }\mathbf a
=  { 5 \over 10 }\mathbf a
=  { 1 \over 2 }\mathbf a = \begin{pmatrix}-1.5\\0.5\end{pmatrix}
\end{align}

<br>

2. **Matrices**

\begin{align*}
\begin{pmatrix}1&3+2i\\3-2i&4\end{pmatrix} &&
{\rm det}{\mathbf A}&=
\begin{vmatrix}3&4&7\\2&-2&1\\1&2&5\end{vmatrix}
&
\begin{vmatrix}x&1&1\\1&x&1\\1&1&x \end{vmatrix}
&= (x-1)^2(x+2)
\end{align*}

<br>

3. \begin{aligned} a_1 \ge 0 \qquad p(x) = p_0+p_1x+p_2x^2+p_3x^3+p_4x^4+p_5x^5 \end{aligned}

<br>

4. **Transformations:**

\begin{align*}
T:\mathbb R^3 &\rightarrow \mathbb R^2&  \text{where}\quad
T  \begin{pmatrix}a_1\\a_2\\a_3\end{pmatrix} =  \begin{pmatrix}a_1a_2\\a_1a_3\end{pmatrix}
\end{align*}
\begin{align*}
T  \begin{pmatrix}a_0+a_1x+a_2x^2+a_3x^3\end{pmatrix} =  \begin{pmatrix}a_1&a_2\\a_3&a_1-a_0\end{pmatrix}
\end{align*}


The syntax is very close to what one writes in a .tex file. Switch html_document in the YAML header with pdf_document and you can get the corresponding pdf.

This is the HTML output:

To have our HTML is written with mathml, we add --mathml to the arguments passed to pandoc. This is what we see at the top of the HTML file:

In this workflow, knitr produces a .tex file. As we can see, it is unremarkable, and very closely resembles the OP's original latex code, just adding elements like the enumerate environment.

\begin{document}
\centerline{\textbf{\large{Mathematical expressions}}}
\begin{enumerate}
\item Vectors $\mathbf u$, $\mathbf a$ and $\mathbf b$:
\begin{align}
\mathbf u &= \begin{pmatrix} -2\\-1\end{pmatrix}
& \mathbf a &= \begin{pmatrix} -3\\1\end{pmatrix}
& \mathbf b &= \begin{pmatrix} 1\\3\end{pmatrix}
\end{align}
$\mathbf u = \alpha \mathbf a + \beta \mathbf b \qquad$  Norm:$|| \mathbf u||$.
\begin{align}
\hat{\mathbf u} &= \lambda \mathbf a = {\langle\mathbf a, \mathbf u\rangle \over \langle\mathbf a, \mathbf a\rangle} \mathbf a
=   {\begin{pmatrix}-3\\1\end{pmatrix}\cdot\begin{pmatrix}-2\\-1\end{pmatrix} \over \begin{pmatrix}-3\\1\end{pmatrix} \cdot \begin{pmatrix}-3\\1\end{pmatrix} }\mathbf a =  { 5 \over 10 }\mathbf a =
{ 1 \over 2 }\mathbf a = \begin{pmatrix}-1.5\\0.5\end{pmatrix}
\end{align}

\item Matrices
\begin{align*}
\begin{pmatrix}1&3+2i\\3-2i&4\end{pmatrix} &&
{\rm det}{\mathbf A}&=
\begin{vmatrix}3&4&7\\2&-2&1\\1&2&5\end{vmatrix}
&
\begin{vmatrix}x&1&1\\1&x&1\\1&1&x \end{vmatrix}
&= (x-1)^2(x+2)
\end{align*}
\item  $a_1 \ge 0 \qquad p(x) = p_0+p_1x+p_2x^2+p_3x^3+p_4x^4+p_5x^5$
\item Transformations:
\begin{align*}
T:\mathbb R^3 &\rightarrow \mathbb R^2&  \text{where}\quad
T  \begin{pmatrix}a_1\\a_2\\a_3\end{pmatrix} =  \begin{pmatrix}a_1a_2\\a_1a_3\end{pmatrix}
\end{align*}
\begin{align*}
T  \begin{pmatrix}a_0+a_1x+a_2x^2+a_3x^3\end{pmatrix} =  \begin{pmatrix}a_1&a_2\\a_3&a_1-a_0\end{pmatrix}
\end{align*}
\end{enumerate}

• This is an interesting answer, many thanks. The output looks great with this method. The issue that i have is that I have more than 100 pages of different LaTeX files that I want to convert to html with mathml and conversion from .tex to .rmd would be a significant undertaking, though I take your point that the .rmd code is very similar to the .tex code – tom Aug 20 '20 at 15:48
• @Tom. I understand that perspective very well. I have learned that it is important to think about the desired output before writing any code, as having to rewrite is tedious and not a constructive use of time. My general rule is that if I am producing pdf only, I will write LaTeX. If I am going to need HTML, I will write Rmarkdown. A critical motivation for me was when I needed an efficient tool for creating web site content. Rmarkdown provides a very clean and reliable work flow for doing that.It is widely used by data scientists. – Ross Aug 20 '20 at 16:27
• note that make4ht supports Rmarkdown too, as well as Rtex and Rnw. So you can use R and LaTeX together for the HTML output. It is true that it can be tricky, especially when you use lot of packages that may clash between each other. It is best to work on the HTML conversion from the beginning, it is much more work when you have complete book. Even small issues are much more difficult to identify and fix at that moment. – michal.h21 Aug 20 '20 at 16:37
• Ross, thanks for the useful comment. The documents I have been written over the years in LaTeX as PDF files and I want to keep producing them as PDF files, just looking for a way to have them as html as well as PDF. (maybe that is wanting too much) – tom Aug 21 '20 at 14:43

According to https://dlmf.nist.gov/LaTeXML/manual/usage/usage.single.html#SS0.SSS0.P5, you can pass the option --javascript=LaTeXML-maybeMathJax.js to latexmlpost and it will call the appropriate MathJax library if the browser doesn't support MathML. More specifically, calling

latexml myfile --dest=myfile.xml
latexmlpost --javascript=LaTeXML-maybeMathJax.js myfile.xml --dest=myfile.html


Loads the provided javascript file which loads the cloudflare cdn MathJax with the configuration MML_HTMLorMML. In Chrome, I end up with:

• mamy thanks I appreciate it, that is really helpful. – tom Aug 20 '20 at 21:34