Allow to use MathJax

[asmeurer]

I hope you decide to change http://www.theoretical-physics.net/ to MathJax, because it's (still) quite unreadable on high DPI displays.

[certik]

@asmeurer I am thinking of having both versions. It should be possible, since I build the web automatically by Travis (https://github.com/certik/theoretical-physics/blob/1281ba1be5f29bd2e4b376b3c407015e7a7e94b2/bin/deploy.sh), so all I have to do is:

• make each PR build both png and mathjax versions
• if merged, upload both

The mathjax is much faster to build, but the pages take forever to load, though I've seen huge improvements since the last time I tried. Also some of the equations look ugly in mathjax.

But I think it's good enough for some purposes, and also mathjax allows me to develop on a Mac where I don't have latex installed.

[asmeurer]

+1. Is it hard to add a popup at the top (like the one that they have in the Python docs) to choose MathJax or png?

Is it possible to make the png math render at a higher resolution? That would make it usable (although mathjax is still preferable for accessibility purposes), but it would also make the page sizes larger.

[certik]

You can render png at higher resolution, but then on smaller monitors you have to downscale the image and it will look ugly. The solution is to use mathjax. A popup would be the best. I can't find any example at docs.python.org though. Would you mind pointing me to the exact page that has it? I'll look at how they did it and do the same.

[asmeurer]

I mean at the very top where they let you change what Python version the docs are for.

[certik]

Ah I see. Yes, that should work. I'll try to get it done.

[certik]

So #64 implements the deployment. The MathJax version is available here:

http://www.theoretical-physics.net/dev/html_mathjax/index.html

Now I just need to add the pop up menu for easy access/switching. How does it look like on your retina?

[emptymalei]

I think the preambles should be set in the mathjax config like this: https://github.com/emptymalei/physics/blob/master/docs/_templates/layout.html#L48

<script type="text/x-mathjax-config">
     MathJax.Hub.Config({
       TeX: {
         Macros: {
           overlr: ['\\overset\\leftrightarrow{\#1}',1],
           overl: ['\\overset\leftarrow{\#1}',1],
           overr: ['\\overset\rightarrow{\#1}',1],
           bra: ['\\left\\langle \#1\\right|',1],
           ket: ['\\left| \#1\\right\\rangle',1],
           braket: ['\\langle \#1 \\mid \#2 \\rangle',2],
           avg: ['\\left< \#1 \\right>',1],
           slashed: ['\\cancel{\#1}',1],
           bold: ['\\boldsymbol{\#1}',1],
           d: ['\\mathrm d',0]
         }
       }
     });
     </script>

In fact, I tried to convert your preambles to mathjax config, but they are just too many.

[asmeurer]

It looks good. I guess mathjax now has a "fast preview" option which shows the math immediately in a not very good form and then it replaces it with the fully rendered form when it is ready (you can disable it in the settings), so you end up seeing some rendered math basically right away.

[certik]

@emptymalei thanks a lot for the tip. I think there are two ways how to do it, the one you've shown, and the one I did. What I don't like about your approach is that you have to rewrite the TeX preambles into JavaScript, which sucks. My approach allows me to (more or less) copy the TeX verbatim.

You are right that I have way too many preambles. My notes started as a latex document, so I had lots of defines. My plan is to reduce them to bare minimum, i.e. things like \R which is used often should be there, but some specialized macros that are only used a few times should not be there. Also things like the Ш symbol are defined differently in latex and in mathjax, so those need to go into preamble, so that the equation itself is identical in both.

Finally, to fix the equations that don't render at all in MathJax, I think the way forward is to define a macro in the preamble, that does the right thing in Latex, and in MathJax it just does what it can so that MathJax knows how to render it, and so that it looks as best as it can.

@asmeurer excellent. I'll play with the setting to see which one is better. I think it's a good start and I'll iterate on it.