Mohegan SkunkWorks

HTML

HTML supports special characters as well as subscripts and superscripts. . Let's give it a shot, starting with embedded equations.

Embedding

Here's an example of the use of HTML to embed equations and symbols. I'll be using the same example through out.

... a classification error ε_i is the average of all instances of the test data where h_t (x_i ) ≠ y_i . This yields the ratio ⁿ ⁄ _N ..... where we integrate ∫ ₀ ^π...

Block Equation

This is the latex of the block equation I'm going to try to render in html :

    D_{t+1} = \frac{D_{t}}{Z_{t}} \times  
                            \begin{cases}  
                                   & e^{-\alpha_{t} }   \text{ if }  y_{i} = h_{t}(x_{i}) \\  
                                   & e^{\alpha_{t} }   \text{ if }  y_{i} \neq  h_{t}(x_{i})  
                            \end{cases}  
                                        = \frac{D_{t}}{Z_{t}} \times e^{(\alpha_{t} y_{i} h_{t}(x_{i}))}

It's the equation used in the AdaBoost algorithm.
Here's what the equation looks like when I try to render it directly in HTML :

D_t+1 = ^D_t ⁄ _{Z_t} × {^{e ^{(α _t )} if y_i = h_i (x_i )} _{e ^{(-α _t )} if y_i ≠ h_i (x_i )} = ^D_t ⁄ _{Z_t} × e^{( α _t y_i h_t (x_i ))}

Conclusion

For quick inline equations html is certainly good enough. For block equations the html rendered version does not nearly look as good as the Latex one. In the original text the html tags start to overwhelm the content and it becomes hard to see the mathematical trees in the html forest. This makes correcting or updating complicated code blocks difficult.

SITMO

According to it's web site is a 'quant' company located in Delft, The Netherlands. The company provides an easy to use latex editor which it also makes available as a Google gadget.

You have to option bteween downloading an image or of embedding links to the rendered latex directly into your html.

Embedding

Typically you can embed the link provided by SITMO straight into your html, like so :

This is what I've done below in order to inline special symbols and simple equations :

... a classification error $\epsilon_{i}$ is the average of all instances of the test data where $h_{t} \neq y_{i}$ . This yields a ratio $\frac{n}{N}$ .... where we integrate $\int_{0}^{\pi}$ ...

Block Equation

First I tried to generate a link just as I did for the inline symbols and equations. Here's the url generated by the editor :

http://www.sitmo.com/gg/latex/latex2png.2.phpz=100&eq=%20D_ %20%3D%20\frac 0} 0}%20\times%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20\begin %20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26%20e^ %20 0}%20%20%20\text %20%20y_ %20%3D%20h_ (x_ )%20\%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26%20e^ %20 0}%20%20%20\text %20%20y_ %20\neq%20%20h_ (x_ )%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20\end %20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3D%20\frac 0} 0}%20\times%20e^ %20y_ %20h_ (x_ )) 0}%0A

This obviously needs some serious url-shorting. First up is New York favorite bit.ly which shortens the url to : http://bit.ly/x6uke.

Obviously we've lost some accuracy here.

Next up is the link generated by venerable tinyurl which shortens the url to a manageable http://tinyurl.com/yjx54h6 :

No complaints here.

The SITMO editor can also be used to generate a png image, which you then can embed yourself. Here's the result :

Conclusion

Take a look at the embedded symbols and equations for this section. If you're a stickler for consistent layout using image links to inline equations creates a few challenges. You need to handle the integration with your background color as well as the alignment within the main text. I found the use of embedded links more cumbersome than using inlined html because these embedded links don't integrate well with the overall layout without tweaking. On the other hand the rendered latex is looks better than the embedded html, and using both html (for inline equations) and latex (for blocks) in your post may create it's own formatting discontinuities.

The block equation is rendered beautifully by the Lates editor. The challenge is dealing with the ungodly long url if you want to embed the link generated by the SITMO editor. Clearly, not all bit shortners are able to handle this. The alternative is to embed an image in your document.

CodeCogs

This editor is provided by CodeCogs engineering. Please consult the install page for more information. This editor seems to be quite popular on the web. CodeCogs provides an equation editor which generates a url on their website you can embed or a gif image you can host yourself. CodeCogs provides a variety of formats like html snippets, a url and code to embed into wiki pages, among other things.
Here's an example of an html snippit :

Embedding

Embedding the url provided by CodeCogs into your html is straightforward :

This generates a default image size of 110 dpi. When you compare this to the SITMO url you'll notice that it doesn't have a size tag. CodeCogs does allow you to vary the size through a drop box . This adds a dpi tag to the url :

Here's how the embedded equations are rendered, using image url's :

... a classification error $\epsilon_{i}$ is the average of all instances of the test data where $h_{t} \neq y_{i}$ . This yields a ratio $\frac{n}{N}$ .... where we integrate $\int_{0}^{\pi}$ ...

Block Equation

I would have liked to have been able to test the HTML snippet generated by the CodeCogs editor. However, as I mentioned in the intor, my blog engine runs pages through a mark down transformer and chokes on the html generated by CodeCogs.

As an alternative I've run the url through two bit shortners. Here's the rendering using the url generated by bitly 'http://bit.ly/aKH31' :

Again, something obviously got lost in translation.

Here's the the rendering from the link generated by tinyurl : 'http://tinyurl.com/yhv9xqx'

CodeCogs can also be used to generate an image file. You can choose between several image formats, like png, gif, pdf and others and several fonts. By the way, this applies to the url as well. The image below is generated in comic sans serif at 150 dpi :

Conclusions

I found the CodeCogs editor easy to use. It allows equations to be saved in a wide variety of image formats, sizes and fonts and provides code to embed them in a variety of markup formats.

My observations about inlining symbols when discussing the SITM editor apply here as well.

I was unable to test the html snippet generated for the block equation, due to limitations (bugs !) in my blog engine. Nevertheless, running the url provided by the editor through a bit shortner provides a good alternative. In addition, you can save an image of the equation ins a variety of formats.

Textify

Textify is a product designed by John Forkosh Associates, Inc. Textify does not provide a Latex editor so it assumes at least some Latex proficiency on the user's part. In fact, it's web page can best be described as no-frills, which I happen to think of as a complement.

Ok, so let's get to it.

Embedding

Textify provides results that can be used in web pages, email or forums. Whereas the previous two services provide a web based api, Textify generates an html snippet around a gif, which can be embedded in your web page :

There are two alternative sizes for the image provided on the page. You don't have the ability to customize the size or font the image.
Let's see how it works out :

... a classification error $\epsilon_{i}$ is the average of all instances of the test data where ..........

Ok, ooopsee.. As an alternative, I tried to use the other image files that were generated :

... a classification error is the average of all instances of the test data where This yields a ratio ... where we integrate ...

Clearly not very useful for my purposes, but it does allow you to use links in emails or google docs.

Block Equation

Textify automatically generates shortened url for use in twitter. Unfortunately, it's using bit.ly which proves problematic :

The shortened url used here is 'http://bit.ly/1Jcm0e' and it exhibits the same pathologies I mentioned above for SITMO and CodeCogs.

Conclusion

I like the clean look of Textify. Unfortunatly, I can't use it as use of the server is restricted. In addition, providing shortened urls for equations is clearly a smart thing, but bit.ly seems doesn't seem to handle the latex formatting urls properly.

Mohegan SkunkWorks

Embedding Equations in a Blog Post

Conclusions

HTML

Embedding

Block Equation

Conclusion

SITMO

Embedding

Block Equation

Conclusion

CodeCogs

Embedding

Block Equation

Conclusions

Textify

Embedding

Block Equation

Conclusion