MathJax

Thanks to a suggestion of Alex Chan I am now experimenting with MathJax, which claims to achieve "Beautiful math in all browsers". Interestingly, it is also used by the writers of CATAM news.

MathJax seems to work well. But if it does not look right, then you might need to refresh the page. Also, Javascript must be turned on. The only hiccup I have noticed is that the rendering is less good in Google Chrome for Windows than it is in other browsers.

Read beyond this point only if you want to learn more about some MathJax's additional features and what I did to tweak its installation into Blogger.

I began by adding some code to my Blogger template, so that Mathjax.js is loaded on each page.

<script type='text/x-mathjax-config'>  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "HTML-CSS": { availableFonts: ["TeX"] }
  });
</script>

<script src='http://cdn.mathjax.org/mathjax/2.1-beta/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full' type='text/javascript'/>

</head>

I changed the body font for the posts from Arial to Georgia, so that the text fonts and maths fonts are better-matched.

I have also changed the line-spacing to 150% so as to leave more room for subscripts and superscripts in-line. I did that by adding to my template

.post {
  margin: 0 0 $(post.margin.bottom) 0;
}
.post * { line-height: 150%; }

There remains a problem with Google Chrome and Windows 7 in that the mathematics font is displayed too darkly. Firefox and Safari are OK; Chrome on a Mac and iPad looks good. The issue with Chrome is not solved. It seems there is bug in the way Chrome does its font anti-aliasing. There is some discussion of this bug here. We hope Google will eventually fix this bug.

If the maths it is not looking good for you then I suggest you clear your browser cache. I would be interested to know if anyone has trouble seeing the maths.

Another thing to try is to right click some maths and make sure that the rendering method is selected to be HTML-CSS

By right-click (or CMD right-click in OSX) you can also choose a setting to zoom-in the maths, or to see the LaTeX code that produced the maths.