Use MathJax instead of jsMath

[qed777]

MathJax is the successor to jsMath.

apply:

• attachment: trac_9774-scripts-mathjax.patch to the scripts repository
• attachment: trac_9774-mathjax-try7.patch to the sage library repository

Also install the new notebook from #13121

Depends on #13121

Upstream: Fixed upstream, but not in a stable release.

CC: @rbeezer @robert-marik @jhpalmieri @rkirov @kcrisman @kini

Component: notebook

Keywords: sd41

Author: Rob Beezer, Davide Cervone, John Palmieri, Jason Grout, Nathan Carter

Reviewer: Jason Grout, John Palmieri, Punarbasu Purkayastha, Keshav Kini

Merged: sage-5.4.beta0

Issue created by migration from https://trac.sagemath.org/ticket/9774

[rbeezer]

comment:2

I've been experimenting a bit with MathJax, outside of the notebook. Mostly thinking about how it will handle tex4ht output in jsMath mode, but here are some some observations that might be useful:

1. Easier in most ways to structure a page to use MathJax. Just insert something like

<script type="text/javascript" src="path-to-MathJax/MathJax.js"></script>

No need for a "process()" call at the end, etc.

2. Default is to not recognize single dollar-signs as delimiters. Alternative is \(..\). This would be a good thing, since if a user adds text (via TinyMCE) right now jsMath tries to parse the following as math. $$..$$ and \[..\] both work for display math. We would break lots of old worksheets if we stopped recognizing $..$.

3. There is a jsMath compatibility mode. I believe I've found one bug in this already (reported upstream). I'd imagine this is not a development priority, but who knows?

4. Modes and configuration is controlled globally by config/MathJax.js which is just one huge well-commented Javascript object. It can be overridden in a web page by adding a new version into the script block mentioned above. Maybe we want to make this easy for users to access, or maybe it is easy already, or maybe we don't want to bother.

5. This looks to me like the best introduction to the types of decisions we will want to make about what to cut over to:
   http://www.mathjax.org/resources/docs/?configuration.html

6. MathJax is HUGE. Fonts for lots of Unicode points, I guess. SVN checkout is 53 MB, after unzipping fonts.zip it all occupies 171 MB.

7. I just noticed this morning that html.table() uses class="math" which is a jsMath way to tag span's or div's for processing. I haven't found how to do something similiar in MathJax, though this will work in jsMath compatibility mode. A very small test would indicate that the two modes can be used at the same time.

8. Consonant with (2) and (7), I'd love to see the notebook formatting move to something closer to rigorous XML (ie XHTML, I guess). Certain types of processing would be easier if we did, but that is not really what this ticket is all about.

[robert-marik]

comment:3

Thanks for comment, I feel that MathJax is much slower on cheap/older computer. This could be an important issue for using Sage in highschools and universities. Is it possible to keep both MathJax and jsMath and let the notebook admin to choose, which one will be used?

[jasongrout]

comment:4

Replying to @rbeezer:

6. MathJax is HUGE. Fonts for lots of Unicode points, I guess. SVN checkout is 53 MB, after unzipping fonts.zip it all occupies 171 MB.

I think MathJax includes the equivalent of our jsmath-image-fonts spkg. If we added MathJax to Sage, it might be good to strip out the image fonts and distribute them separately as a mathjax-image-fonts spkg (mathjax faq tells how to do this, I believe). Somewhere I have a half-finished prototype of this solution.

[sagetrac-rminer]

comment:10

Replying to @jasongrout:

Replying to @rbeezer:

6. MathJax is HUGE. Fonts for lots of Unicode points, I guess. SVN checkout is 53 MB, after unzipping fonts.zip it all occupies 171 MB.

I think MathJax includes the equivalent of our jsmath-image-fonts spkg. If we added MathJax to Sage, it might be good to strip out the image fonts and distribute them separately as a mathjax-image-fonts spkg (mathjax faq tells how to do this, I believe). Somewhere I have a half-finished prototype of this solution.

Just in case you haven't thought of this, what Gollum (the GitHub forum) folks did was host the MathJax fonts on Amazon S3, and then not include them in their distribution. I don't know if that would work for you, but I wanted to point it out.

[jasongrout]

comment:11

Replying to @sagetrac-rminer:

Replying to @jasongrout:

Replying to @rbeezer:

6. MathJax is HUGE. Fonts for lots of Unicode points, I guess. SVN checkout is 53 MB, after unzipping fonts.zip it all occupies 171 MB.

I think MathJax includes the equivalent of our jsmath-image-fonts spkg. If we added MathJax to Sage, it might be good to strip out the image fonts and distribute them separately as a mathjax-image-fonts spkg (mathjax faq tells how to do this, I believe). Somewhere I have a half-finished prototype of this solution.

Just in case you haven't thought of this, what Gollum (the GitHub forum) folks did was host the MathJax fonts on Amazon S3, and then not include them in their distribution. I don't know if that would work for you, but I wanted to point it out.

That's a very interesting solution. I suppose we could host them on the main sage webserver, for example. Or maybe Google Code or something like that so we had redundant sources.

[jhpalmieri]

comment:12

I just found the web page http://bitbucket.org/kevindunn/sphinx-extension-mathjax/wiki/Home, which allows the use of Sphinx with MathJax. Assuming it works, we could upgrade all of Sage (not just the notebook but also the docs), to use MathJax instead of jsMath.

[sagetrac-drkirkby]

comment:13

MathJax is very impressive looking. I like the idea the user does not have to have any fonts installed on his computer, which is a major advantage over jsMath

Dave

[rbeezer]

Screenshot of double integral

[rbeezer]

Attachment: mathjax-double-integral-20110322.png

Attachment: mathjax-matrix-20110322.png

Screenshot of matrix

[rbeezer]

comment:14

Steps that will install MathJax with the new Flask notebook.

1. Install the Flask version of the notebook.

   http://code.google.com/r/rkirov-flask/
   

2. Download v1.1 of MathJax as zip file (from bottom of page).

   http://www.mathjax.org/download/
   

3. Unzip the MathJax distribution into

$SAGE_ROOT/devel/sagenb/sagenb/data

and

rename the new directory: mathjax-MathJax-5a7e4d7 (or whatever)

to be just the directory: MathJax

4. jsmath compatibility. Edit

   $SAGE_ROOT/devel/sagenb/sagenb/data/MathJax/config/default.js
   

by adding "`jsMath2jax.js`" as the first entry of the "extensions" list, so it becomes

 ```
 extensions: ["jsMath2jax.js", "tex2jax.js"]

5. Edit

   $SAGE_ROOT/devel/sagenb/sagenb/data/sage/html/notebook/base.html
   

   and change

   <script type="text/javascript" src="/javascript/sage/jsmath.js"></script>
   

   to

   <script type="text/javascript" src="/static/MathJax/MathJax.js?config=default"></script>
   

This will install MathJax and the notebook will use it. But the setup is buggy, so needs work. I'm sure there is some configuration on the Sage side and/or the MathJax side that will need changes.

• A mix of black and green symbols.

• Only renders on a reload - adding new TeX via TinyMCE returns with an error about not finding fonts.

• Some stray tags are being rendered, or something.

Screenshots attached:

Double Integral:

http://wiki.math.toronto.edu/TorontoMathWiki/index.php/JsMath/MathJax_%28TeX_for_Web%29

$$ (2\pi h)^{-d}\iint_{\{H(x,\xi) <\tau\}} dx d\xi $$

Matrix:

$\begin{bmatrix}
x^2 & y^2\\
x^3 & \cos(z)
\end{bmatrix}$

[jhpalmieri]

comment:16

I'm attaching a draft of a patch for the Sage library. The integration with Sphinx is completely untested, and is probably broken. See the top of the patch file for a list of things to do.

[rbeezer]

Attachment: trac_9774-mathjax-flask-notebook.patch.gz

[rbeezer]

comment:17

Added patch to Flask notebook code to support MathJax, built with Davide Cervone's help.

1. This is a hand-edited patch to recover from an hg mess-up. I think it is OK, but be wary.
2. Fonts are coming from MathJax CDN. Comment in code indicates change for local MathJax installation.
3. <script> tags added by Palmieri's Sage library patch need to be handled with care on notebook side, so notebook does not evaluate them. Right now when "Typeset" box is checked, evaluated cells raise a Javascript error in evaluate_script_tags (or a function with a similar name).

[jasongrout]

comment:18

John's patch doesn't apply cleanly to stock 4.7; does it apply to the most recent alpha of 4.7.1?

applying mathjax.patch
patching file sage/misc/latex.py
Hunk #15 succeeded at 1750 with fuzz 2 (offset 2 lines).
Hunk #23 FAILED at 2382
1 out of 25 hunks FAILED -- saving rejects to file sage/misc/latex.py.rej
patch failed, unable to continue (try -v)
patch failed, rejects left in working dir
errors during apply, please fix and refresh mathjax.patch

[rbeezer]

comment:19

Replying to @jasongrout:

John's patch doesn't apply cleanly to stock 4.7; does it apply to the most recent alpha of 4.7.1?

Yes.

rob@tiger:/sage/dev/devel/sage$ ../../sage -version
| Sage Version 4.7.1.alpha2, Release Date: 2011-06-07                |
* Warning: this is a prerelease version, and it may be unstable.     *
rob@tiger:/sage/dev/devel/sage$ hg qimport -P https://github.com/sagemath/sage-prod/files/10650553/mathjax.patch.gz
adding mathjax.patch to series file
applying mathjax.patch
now at: mathjax.patch

[jasongrout]

comment:20

Don't we need the actual MathJax spkg or files somewhere? Rob: do you have instructions for putting these in the directory, or do we use my half-finished patch mentioned in the description, or something else?

[rbeezer]

Attachment: trac_9774-mathjax-flask-notebook-file-add.patch.gz

[rbeezer]

comment:21

Attached a patch to add sagenb/notebook/mathjax.py

New file is similar to, but not identical to, sagenb/notebook/jsmath.py

We did not delete the latter, but I think it can safely go away.

[rbeezer]

comment:22

Replying to @jasongrout:

Don't we need the actual MathJax spkg or files somewhere? Rob: do you have instructions for putting these in the directory, or do we use my half-finished patch mentioned in the description, or something else?

We need an spkg to be Internet-independent.

We did not experiment with your old one. I think it would be best to make a new one. This requires a small edit (once you are sure all works with CDN version).

Font suggestions coming up.

[rbeezer]

comment:23

Davide Cervone says for an spkg we need only keep font subdirectories called

otf,  eot,  svg

In particular png subdirectories are huge-est and can go away.

Rob

[jasongrout]

comment:24

ah; I bet it's because the svg fonts replace the png fonts for all browsers we care about, or something. Okay, Davide is the final authority on what browsers support what...

[ppurka]

comment:107

updated the try7 patch again, to changes in #13109. To make the review easier, the diff between this and earlier patch is here.

[kini]

comment:109

The patch has fuzz against 5.3.beta2.

[kini]

comment:110

The fuzz is caused by #13310 which was merged in 5.3.beta1 and is harmless.

[kini]

comment:111

Fixed.

[kini]

Attachment: trac_9774-mathjax-try7.patch.gz

apply to $SAGE_ROOT/devel/sage

[ppurka]

comment:112

What thing needs "review" here?

[kini]

comment:113

Uh... hmm. The rebasing, I guess? Whatever, looks fine to me ;)

[jdemeyer]

Merged: sage-5.4.beta0

[novoselt]

comment:116

This document does not compile anymore with SageTeX

\documentclass[12pt,letterpaper]{article}
\usepackage[utf8]{inputenc}
\usepackage[english]{babel}
\usepackage{sagetex}
\begin{document}
$\sage{"1 2"}$
\end{document}

because someone has replaced a verbatim spacer with a version that does not work, as was explicitly explained in the surrounding comment, and then deleted the comment altogether:

--- a/sage/misc/latex.py
+++ b/sage/misc/latex.py
@@ -323,11 +323,7 @@
     # 2) wrap each line into \verb;
     # 3) assemble lines into a left-justified array.
     
-    # There is a bug in verb-space treatment in jsMath...
-    spacer = "\\phantom{%s}"
-    # \phantom{\verb!%s!} is more accurate and it works, but it is not a valid
-    # LaTeX and may cause problems, so let's live with the above variant until
-    # spaces are properly treated in jsMath/MathJax and we don't need to worry.
+    spacer = r"\phantom{\verb!%s!}"
     lines = []
     for line in x.split("\n"):
         parts = []

What was the motivation for this???

[jasongrout]

comment:117

Do you by chance see who changed it? If it was me, I don't recall the motivation. So +1 to making sure things work.

[novoselt]

comment:118

It is in the jumbo patch to Sage library uploaded by Keshav, I guess it is a flattening of others. Most of it was automatic, I imagine, but this part is definitely made by hand.

[kini]

comment:119

Another reason why we shouldn't flatten patches...

[novoselt]

comment:120

#14382 finally reverts the change, sorry for delay.