A (sort of) Documentation

More about Math Usage

* Try \h while in text mode for a "hidden dead key combo"

* As soon as the cursor leaves the math mode region containing the TeX code, the expression is automatically (re)rendered via MathJax. If you made a typo, just navigate back to the formula (either by mouse click or by keyboard navigation with arrow keys) and you can edit the contents.

* You can exit math mode by typing \) or \] anywhere in the math blocks.

* As \\ doesn't work well with Javascript, we automatically replace it with \newline.

* To delete an entire math environment: just empty its contents. Environments containing only white-space characters are automatically removed.

* Vanilla MathJax supports the processEnvironments option, that allows the use of \begin{align}...\end{align} (and similar environments) outside the standard delimiters. This is turned off on this site since it interferes with the function to edit mathematical expressions after the fact.

* We use MathJax v3; standard caveats about differences of \color versus v2 applies.

* JaxBoard loads the following MathJax packages: ams, amscd, bbox, color, braket, cancel. Due to how the code executes updates, there can be problems with dynamically loading packages, so that functionality is disabled. You can define your own macros using \newcommand as needed. Some mappings (that I use frequently) are already defined. View document source for a full list.

Principles of Operation

One of the problems with MathJax and dynamic content is that there is no untypeset() command for easily transforming processed mathematics back into the TeX representation. For the Jaxboard, the simplest solution is to keep around both the original TeX code as well as the typeset version. This is accomplished by having each "math mode" object secretly containing two HTML nodes. The first node is displayed in "editing mode" and contains the TeX code. The second node contains the processed code. What we then do is, upon exiting "editing mode" (when navigating out of the math mode expression), the TeX code gets copied over to the second node, and MathJax is called on it. Compared to versions 1 and 2 of the Jaxboard, this saves a lot of MathJax calls and this improves on the responsiveness.

Some amount of Javascript glue is required: what took me longest to figure out was how to detect whether I should be in math editing mode or not. Javascript focusin doesn't work well with contentEditable elements, and at the end of the day what worked is a hack using the Selection API. All things considered I am quite happy with how few lines of code are required to accomplish what I want.

Bugs?

Do let me know about bugs. Here are some caveats:

* I only use this on my Chromebook, and all the code has been only tested for Chrome. It should work for most modern webkit-based browsers, though. It would be a hard task convincing me to adapt the code for fixing browser-specific issues.

* As everything is rendered client side, the usability of this app depends strongly on the processing power of your computer, as well as the speed of your web browser at evaluating Javascript.