Verify MathML production for equations

[angrave]

Screenreaders work best with MathML (not image) equations. Are we able to generate MathML output e.g. for epub?for html/pdf etc? If only epub then we should document/suggest this.

[angrave]

Related issue #555

[angrave]

epub: A simple equation does not render well in Apple epub reader but at least it is using mathml.

pdf: The raw mathml is displayed!

https://ct-dev.ncsa.illinois.edu/epub/08f24081-3804-407c-8b3d-6e0a3bbd9699
see Chapter 3. "Very quickly a recap of proportion hypothesis testing." which has
$$p\ne p_0$$

[ngersich]

I tried a number of different approaches to fix this issue. Unfortunately, I’ve not been able to implement an appropriate solution. Hopefully someone with more technical know-how or experience can use one of these to fix the issue.

Jspdf documentation for reference

1. jsPDF has an html method. However, if you pass in the mathML directly, the formatting is not correct, even with simple equations. Many characters end up placed on top of each other.

2. jsPDF has a couple different SVG methods including addSvgAsImage. I tried extracting the LaTeX equation from mathML and using a MathJax wrapper to convert the TeX to an SVG. Then, I tried using the jsPDF method to insert this SVG into the PDF. However, the resolution of the resulting jpeg that gets inserted is extremely poor (see image). Furthermore, the image cannot be rescaled. Perhaps there are other ways to convert an SVG to jpeg without using jsPDF’s method. However, even if this was possible, ensuring inline equations are rendered properly will be very difficult given the way the code is currently structured. (If taking this approach, you need to convert any transparent pixels from the SVG to white before converting to a jpeg. Adding something like <circle r="1e5" fill="white"/> can accomplish this.)

3. Texlive.js is a TeX compiler in Javascript. If we could use this, we could greatly reduce the technical debt we currently have by maintaining so many different file outputs. We could simply take the tex file already being generated and convert it to a PDF. This works great aside from images. Since ClassTranscribe’s images cannot be accessed from a source URL directly and are often accessed in some base64 or uint8 array, images cannot be inserted directly using texlive.js. There should be methods to allow for the saving of arbitrary files in the virtual filesystem used by texlive, but I couldn’t figure out how to get this working. If anyone is curious, I’ve attached the relevant files needed to get texlive working.

Include the following files to the public folder. (Can be changed as necessary.)
Texlive Files.zip
In index.html: include
<script src="%PUBLIC_URL%/promisejs/promise.js"></script>
<script src="%PUBLIC_URL%/pdftex.js"></script>

In the file containing the latex (as a string), add the following:
let latex = "{insert latex here}"
let pdfLatex = new PDFTeX("%PUBLIC_URL%/pdftex-worker.js");
let dataUrl = await pdfLatex.compile(latex);

[harsh183]

Taking a look at this issue, thanks for all the work so far @ngersich