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

Question

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;

• LaTeX to MathML conversion: tools, limitations, and approaches?
• LaTeX accessibility
• Converting LaTeX to HTML but keeping equations as LaTeX

I am also aware of

• A guide on how to produce accessible PDF files?

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:P_3 &\rightarrow M_{22}  &  \text{where}\quad  
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}

Answer 1

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.

Answer 2

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
header-includes:
  - \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} 
       &= \lambda \mathbf a \quad 
       = {\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:P_3 &\rightarrow M_{22}  &  \text{where}\quad
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:P_3 &\rightarrow M_{22}  &  \text{where}\quad
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}

Answer 3

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: