[Tex/LaTex] conversion issues using htlatex and MathJax/mathML method

mathjaxmathmltex4ht

I am using the method shown in this answer below to convert my LaTeX file to HTML so that the resulting LaTeX file is processed by MathJax via MATHML:

Convert Latex to MathJax-HTML

  "... mathml which can be then displayed with mathjax...."

Everything works well, and using the above method, the math looks much better than the standard htlatex method. Except for things such as $\dot{x}$ which shows up really strange now and is not rendered well. I tried this on IE, Firefox, and Chrome, all with the same problem.

I'll show the small tex file, then the htlatex command I used, then the htlatex .cfg file (which is the same exact .cfg file show in the above answer), then show the HTML output.

LaTeX file:

\documentclass[12pt]{article}%
\begin{document}    
$\dot{\alpha}$
$x \dot{x}$
\end{document}

Command used to generate HTML (which is also the same command given in the above answer):

 htlatex t.tex "t.cfg,charset=utf-8" " -cunihtf -utf8"

The t.cfg file used above is the same one shown in the answer above, so will not show it here again.

Screen shot of the HTML generated (notice how the x with the dot does not look right):

enter image description here

Compare that to the PDF output:

enter image description here

Here is the HTML file itself. I think the problem is the MATHML is not right? Is this a htlatex bug? or MATHML? Or MathJax? And how to correct it?

<!DOCTYPE html> 
<html> 
<head> <title></title> 
<meta charset="UTF-8" /> 
<meta name="generator" content="TeX4ht (http://www.cse.ohio-state.edu/~gurari/TeX4ht/)" /> 
<link rel="stylesheet" type="text/css" href="t.css" /> 
<script type="text/javascript" 
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" 
></script> 
<style type="text/css"> 
.MathJax_MathML {text-indent: 0;} 
</style> 
</head><body 
>
<!--l. 4--><p class="noindent" ><!--l. 4--><math 
 xmlns="http://www.w3.org/1998/Math/MathML"  
display="inline" ><mover 
accent="true"><mrow 
><mi 
>α</mi></mrow><mo 
class="MathClass-op">̇</mo></mover></math>
<!--l. 5--><math 
 xmlns="http://www.w3.org/1998/Math/MathML"  
display="inline" ><mi 
>x</mi><mi 
>ẋ</mi></math>
</p>

</body> 
</html>

Although over all the math looks better in this new method (mathml/mathjax which I have no idea how it actually works), but there are few spots where the math does not render well in HTML. Here is another case

\documentclass[12pt]{article}%
\begin{document}    
$\dot{x}_{1}^{2}$    
\end{document}

enter image description here

Best Answer

The main problem is that tex4ht has been configured to use a precomposed accented x for \dot{x} which is the wrong translation, and produces incorrect output as you show. The generated MathML should use the <mover> form as for the dotted x.

(1) is your original 

 <!DOCTYPE html> 
<html> 
<head> <title></title> 
<meta charset="UTF-8" /> 
<meta name="generator" content="TeX4ht (http://www.cse.ohio-state.edu/~gurari/TeX4ht/)" /> 
<script type="text/javascript" 
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" 
></script> 
<style type="text/css"> 
.MathJax_MathML {text-indent: 0;} 
</style> 
</head><body 
>
<!--l. 4--><p class="noindent" ><!--l. 4--><math 
 xmlns="http://www.w3.org/1998/Math/MathML"  
display="inline" ><mover 
accent="true"><mrow 
><mi 
>α</mi></mrow><mo 
class="MathClass-op">̇</mo></mover></math>
<!--l. 5--><math 
 xmlns="http://www.w3.org/1998/Math/MathML"  
display="inline" ><mi 
>x</mi><mi 
>ẋ</mi></math>
</p>

</body> 
</html>

(2) is this fixed to use a real x, note you then get math italic x as intended.

 <!DOCTYPE html> 
<html> 
<head> <title></title> 
<meta charset="UTF-8" /> 
<meta name="generator" content="TeX4ht (http://www.cse.ohio-state.edu/~gurari/TeX4ht/)" /> 
<script type="text/javascript" 
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" 
></script> 
<style type="text/css"> 
.MathJax_MathML {text-indent: 0;} 
</style> 
</head><body 
>
<!--l. 4--><p class="noindent" ><!--l. 4--><math 
 xmlns="http://www.w3.org/1998/Math/MathML"  
display="inline" ><mover 
accent="true"><mrow 
><mi 
>α</mi></mrow><mo 
class="MathClass-op">̇</mo></mover></math>
<!--l. 5--><math 
 xmlns="http://www.w3.org/1998/Math/MathML"  
display="inline" ><mi 
>x</mi><mover 
accent="true"><mrow 
><mi 
>x</mi></mrow><mo 
class="MathClass-op">̇</mo></mover></math>
</p>

</body> 
</html>

However since you are using MathJax anyway, you could just give it the TeX fragments and let it translate them (3)

 <!DOCTYPE html> 
<html> 
<head> <title></title> 
<meta charset="UTF-8" /> 
<meta name="generator" content="TeX4ht (http://www.cse.ohio-state.edu/~gurari/TeX4ht/)" /> 
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" 
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" 
></script> 
<style type="text/css"> 
.MathJax_MathML {text-indent: 0;} 
</style> 
</head><body 
>
<!--l. 4--><p class="noindent" >
$\dot{\alpha}$
$x \dot{x}$
</p>

</body> 
</html>

enter image description here

Related Question