November 27, 2011

Harking Back


After my recent spate of “you can do mathematics in your blog” posts (I am no mathematician, but I do know computers) I remembered that some time ago I did a post about Euler's identity, and at the time the best I could do was a graphic with the equation in it. I reproduce the graphic in large format below, to demonstrate how clearly unsatisfactory the graphic truly was at higher resolution (you may notice that at this size the pixellation of the font has become clearly visible, though some browsers make valiant efforts to disguise it):



Of course I could have taken more care, and produced a higher-resolution graphic, but the fact remains that ultimately this representation cannot be copied and pasted as part of another expression, because the bitmap representation is completely unrelated to the structure of the equation. And eventually, no matter how high the resolution at which you generate, someone will come up with an application that demands more resolution. More of everything cheaper is kind of a clarion call in the computing world, and by and large the engineers have done their best to deliver.

Now, though, with the magic of TeX at my blogging fingertips, I can display the same equation (or at least the same identity: most people seem to prefer the zero identity as the canonical form, but I am persisting in my original bloody-minded mistake for backwards compatibility reasons) with ease using the TeX formula

\(e^{\pi i} = -1\)

which renders (using standard font sizes) as:
\[
e^{\pi i} = -1
\]
Thanks to MathJax, when I blow the TeX formula up it renders without the unpleasant pixellation effects of my previous attempt:
\[
e^{\pi i} = -1
\]

To me this is clearly an improvement over my original method (though I must confess that I cannot remember at this distance how I produced the graphic for the original blog entry).

Access to TeX Source

If you hover the cursor over the MathJax equation you will get a context menu from it (Windows and Ubuntu users use your right mouse button, recent Mac users use a two-finger click) and ask to see the equation source code using the Show Source option:
The first time I used this feature it was in TeX mode, and what I saw was the TeX code I used to create the expression.  On my Mac that window looked like this:
So now your mathematics can be copied by others, for example to paste into their own blogs or other papers. People can now copy and paste mathematics freely. I think that's exciting news! Of course you can also repay the favor by copying TeX source from other blogs (as well as the many excellent TeX web papers and articles) into your own blogs.

MathML Too

If, like me, you are an inveterate tinkerer then you might wonder whether it's worth learning MathML. If you already know TeX then it would appear that the answer is “no,” because MathJax can translate between TeX and MathML format for you. If you want to see the mathML equivalent you first have to change MathJax's display format. This is again just a matter of using the MathJax context menu:

If you repeat your request to see the equation source you will now see the MathML equivalent to the TeX source I wrote in the first place. This neatly gives you the answer to your question “is mathML representation much more long-winded than TeX markup,” to which the answer is “yes, and then some” but you don't need to worry about that. Just be happy that MathJax can take care of them both:

I know it is equally possible to author for MathJax in MathML, so I would assume (but have not verified) that translation to TeX would similarly be possible. You'll have to switch back to TeX mode to start seeing TeX sources again, by the way.

Experiment

Someone wanted to know if superscripts can have superscripts. The answer, naturally, is yes. You can use the context menu to examine the source.

\(e^{{\pi i}^{\pi i}}\)

How did that work for you? Welcome to the world of copy and paste mathematics!

November 25, 2011

Source for “Testing Mathematics” Piece

So to complete a fast trilogy of mathematical typesetting here, I realized that while the last post might have looked very pretty it might be frustrating to readers who wanted to see the TeX source for the examples.

So here is a pasted copy of the contents of the compose edit window, to give you access to the TeX. Note that even this does not reveal quite all the secrets, since certain quotings and the scalable fonts are implemented in the HTML editor window. But it will at least help to explain why the post looks the way it does.


I decided it would be a good idea to test out the instructions from my last post, where I explain how to put mathematics in your blog. This is fast becoming addictive, so I am going to have to sit on my hands for a while after this post.

A Cross Product Formula

\[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0
\end{vmatrix} \]
That seemed to work, but I did notice a couple of glitches. So here are a few hints.
After you paste in the HTML, consider typing a couple of characters ("xx" or similar) as a placemarker so that you can be sure where your blog text is being inserted in relation to the script calls (the scripts should be right at the start). It's usually a good idea to lay down a marker like this when switching between “compose” and “HTML” editing modes.
If you want to put a formue just write it with a dollar sign before and after. So
and therefore $x^2$ cannot be zero
will come out as:
and therefore $x^2$ cannot be zero
When TeX inputs are copied from the web, to avoid formatting confusion it is often better to either paste into the HTML edit mode, or paste into a text window and re-copy to lose the formatting before pasting into the compose edit mode.
If at first you don't succeed, look for help among the TeX community. It is large, and many of its members are professional educators.
Just to test the application a little more throughly here are a few random examples lifted from the web. Did I mention I love the web?

Simple equations
\begin{equation}\label{eq1}
\sum_{i=0}^{i=10} \phi_i(3)
\end{equation}

\begin{equation}\label{eq2}
\int_{0}^{10} \phi_i(x)dx = 3
\end{equation}

\[
z \left( 1 \ +\ \sqrt{\omega_{i+1} + \zeta -\frac{x+1}{\Theta +1} y + 1}
\ \right)
\ \ \ =\ \ \ 1
\]

Multi-line equation

\[
\begin{align}
(a+b)^3 &= (a+b)^2(a+b)\\
&=(a^2+2ab+b^2)(a+b)\\
&=(a^3+2a^2b+ab^2) + (a^2b+2ab^2+b^3)\\
&=a^3+3a^2b+3ab^2+b^3
\end{align}
\]

The derivative is defined as

\begin{equation}
\frac{dy}{dx} = \lim_{\Delta x \to 0} \frac{\Delta y}
{\Delta x}
\end{equation}
\begin{equation}
f(x) \to y \quad \mbox{as} \quad x \to
x_{0}
\end{equation}
\begin{equation}
f(x) \mathop {\longrightarrow}
\limits_{x \to x_0} y
\end{equation}

Math with font-size set to 250%
\[
g\frac{d^2u}{dx^2} + L\sin u = 0
\]

While my testing can hardly be called exhaustive, I think I have provided as good a start as anyone could expect in the world of mathematical blogging. Good luck with yours!

Just Testing Mathematics Setting with MathJax


I decided it would be a good idea to test out the instructions from my last post, where I explain how to put mathematics in your blog. This is fast becoming addictive, so I am going to have to sit on my hands for a while after this post.

A Cross Product Formula

\[\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0
\end{vmatrix}  \]
That seemed to work, but I did notice a couple of glitches. So here are a few hints.
  1. After you paste in the HTML, consider typing a couple of characters ("xx" or similar) as a placemarker so that you can be sure where your blog text is being inserted in relation to the script calls (the scripts should be right at the start). It's usually a good idea to lay down a marker like this when switching between “compose” and “HTML” editing modes.
  2. If you want to put a formula in-line just write it with a dollar sign before and after. So
    and therefore $x^2$ cannot be zero
    will come out as:
    and therefore $x^2$ cannot be zero
  3. When TeX inputs are copied from the web, to avoid formatting confusion it is often better to either paste into the HTML edit mode, or paste into a text window and re-copy to lose the formatting before pasting into the compose edit mode.
  4. If at first you don't succeed, look for help among the TeX community. It is large, and many of its members are professional educators.
Just to test the application a little more throughly here are a few random examples lifted from the web. Did I mention I love the web?

Simple equations
\begin{equation}\label{eq1}
\sum_{i=0}^{i=10} \phi_i(3)
\end{equation}

\begin{equation}\label{eq2}
\int_{0}^{10} \phi_i(x)dx = 3
\end{equation}

\[
z \left( 1 \ +\ \sqrt{\omega_{i+1} + \zeta -\frac{x+1}{\Theta +1} y + 1}
\ \right)
\ \ \ =\ \ \ 1
\]

Multi-line equation

\[
\begin{align}
(a+b)^3 &= (a+b)^2(a+b)\\
&=(a^2+2ab+b^2)(a+b)\\
&=(a^3+2a^2b+ab^2) + (a^2b+2ab^2+b^3)\\
&=a^3+3a^2b+3ab^2+b^3
\end{align}
\]

The derivative is defined as

\begin{equation}
\frac{dy}{dx} = \lim_{\Delta x \to 0} \frac{\Delta y}
{\Delta x}
\end{equation}
\begin{equation}
f(x) \to y \quad \mbox{as} \quad x \to
x_{0}
\end{equation}
\begin{equation}
f(x) \mathop {\longrightarrow}
\limits_{x \to x_0} y
\end{equation}

Math with font-size set to 250%
\[
g\frac{d^2u}{dx^2} + L\sin u = 0
\]

While my testing can hardly be called exhaustive, I think I have provided as good a start as anyone could expect in the world of mathematical blogging. Good luck with yours!

Blogging Mathematics

I just wanted to see if I could get some simple mathematics into this blog. Not so much for my own needs, but because my brother (who is a far better mathematician than I am, but rather less adventurous when it comes to using computers) has been wanting to do so for a while, but hasn't been able to find a suitable system.

If you want to write about mathematics you need some way to describe the formulae, as the “mathematical keyboard” does not yet appear to have been invented. The most commonly-used mathematical typesetting system is probably Donald Knuth's TEX, which provides a very versatile language for describing mathematical expressions in relatively plain text. I started my search on the assumption that there has to be some way of integrating TEX with the popular Blogger platform that I and many others use. There are other languages for describing mathematics, including a markup (HTML-like) language called MathML, and this solution can be adapted (by reading applications documentation) to handle some others.

Ideally the author should just be able to type TEX-style input and have wonderful formulae appear automatically. In other words when you want to talk about the probability of getting \(k\) heads when flipping \(n\) coins you should be able to write

\[P(E) = {n \choose k} p^k (1-p)^{n-k}\]

and have it appear as

\[P(E) = {n \choose k} p^k (1-p)^{n-k}\]

(EDIT: Formula corrected Nov 25, 2011)
Note that the \(k\) and \(n\) in the paragraph above the formula, as well as those in this one, are properly represented in mathematical notation, and therefore identifiable as mathematical symbols, because they are so flagged in the body of the text—you can write simple or complex formulae inline as well as in separate expressions like the one above. I achieved this result using the MathJax system, which uses Javascript to render complex mathematics in the browser. The really nice part is that there's nothing to install, because MathJax is downloaded by the reader's browser. I'd welcome similar instructions for other blogging platforms in the comments if readers want to help users of those other platforms.

I realize that these instructions are detailed and therefore somewhat tedious, but I wanted them to be as useful and as simple as possible. Unfortunately the authors of MathJax make a very common mistake of software authors - they assume that their readers know enough to already understand how MathJax is used on the web. The people who really need to know this stuff are working mathematicians, scientists and engineers. While they are often as smart as all get-up they mostly don't have the time to develop great insight into web technologies, and I am hoping this proves they don't need to.

As usual, however, the assumption is that users will be happy to pick up whatever skills they need to get the job done. The MathJax site has examples in it, but nothing that really shows you exactly how to get that mathematics into your pages. I hope to provide those missing steps here. Please note, however, that I know very little about TEX, and cannot help you to find representations for specific formulae. As a working computer scientist I often have to learn enough about a “foreign” system to be able to demonstrate a concept. This blog post is intended to provide no more than a simple proof-of-concept, and I will not be responsible for any limitations of or problems with MathJax, Blogger or these instructions.

The first thing to do is to make sure your post includes a couple of pieces of information. You have to insert configuration data for MathJax (there are various options you can explore once you understand its principles). You must also include a request to load the actual code of MathJax, which is conveniently stored at multiple locations on the internet under a single name—a “content delivery network” determines your closest location and sends the code from there.

There are two different ways to inject this code. The simpler way, which I have used for this post and describe here, inserts these instructions in each individual post. If you want mathematics in every post then you should consider moving the configuration data and code request into your blog template, so you do not need to repeat the insertion for each post. This more advanced method is beyond the scope of this article, but I mention it for those bloggers who know enough to be able to use it.

So, create a new post for your blog, and then switch to the HTML input mode. Copy the text from the area immediately below and paste it in at the start of your HTML input window:



(You might want to follow the final ">" with an x that you use to set the cursor after the code, which should begin the post). Then go back into standard compose mode and, as an example, enter the following text:


A Cross Product Formula

\[\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0
\end{vmatrix}  \]



Hopefully, if all has gone well, you can now see this when you preview your blog page:

A Cross Product Formula

\[\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0
\end{vmatrix}  \]

As I believe I mentioned, this is largely a proof-of-concept post. I can't imagine why the MathJax guys haven't published this already. It's possible they already have an application note about about this, but if not then they are free to link to this article to help their users (hello, MathJax users).

So there you have it. This could make it much easier to talk about mathematics on the web. Please let me know if anything isn't clear, and I will try to correct it until it is. Otherwise, just have fun blogging mathematics!