» «

That LaTeX jQuery plugin

December 22nd, 2009 at 10:54 pm

I’ve been seeing a link to this article, “A jQuery plugin to directly embed LaTeX into your website or blog,” on delicious.com/popular today. I have a strong interest in this topic—most recently expressed here and here—so I followed the link to have a look. It was disappointing.

Basically, the plugin

You can use other online LaTeX generators in place of Code Cogs, but they all generate images.

How is this disappointing? Let me count the ways:

  1. It won’t do inline equations. Reliance on <div>s forces each equation into its own block.
  2. You have to write the LaTeX and call the plugin for each equation.
  3. It relies on the LaTeX generator site to be up and running when someone visits your page.
  4. Although the equation is just a static image, that image has to be generated every time the page is visited.1
  5. Images don’t scale with the font size of the page.
  6. Images look like shit when printed because they’re lo-res bitmaps.

Update 12/24/09
Andreas Grech, the plugin’s author corrects me in a comment below.

Point 2 is wrong. You need only call the plugin once per page. I read the source code of his example page too quickly and came to the wrong conclusion. He calls the plugin several times on that page because he’s demonstrating various ways of using it.

Point 1 is at least half wrong. Because the plugin works off classes, you can put equations in <span>s. I’m not sure there’s a way to get LaTeX’s inline style, which is different from its display style.

His comment is a good defense of his plugin. It doesn’t persuade me to use the plugin, but it’s worth reading.

The jsMath system, which has been around for quite a while, has none of these disadvantages. OK, the equations are “typeset” on the page dynamically, but the work is done locally on the browser’s computer, so it’s well distributed and not being performed by some innocent third-party server.

You could argue that images have more universal support than the CSS tricks jsMath uses. That’s true, but apart from Mobile Safari, is anyone really using a browser that isn’t on jsMath’s supported list?

Maybe I shouldn’t be so harsh; after all, I’ve written plenty of scripts that must seem foolish to others. But if you want to use images for your equations, it’s far more efficient to generate them statically. You could even write a script that does what this plugin does, but saves the generated images to your site and inserts the appropriate <img> tags into the HTML. Such a script would be run just once—or, at most, a few times as you’re editing the page.

And if you want equations that actually look good on your page, use jsMath.

  1. I can see where this would be an advantage as you’re writing and editing the page, but once it’s done you’re just using the generator site’s bandwidth for no good reason. ↩

Tags: , , , , , ,
Post #1140 | 6 Comments

6 Responses to “That LaTeX jQuery plugin”

  1. Andreas Grech says:
    December 24th, 2009 at 6:17 am

    I am Andreas Grech, and I am the author of the jsLaTeX jQuery plugin.

    Here a just a few points on what you said.

    First off, the plugin is not relying on divs. The plugin takes the equations from the containers specified in the jQuery selector that is used. For example, if the plugin was invoked like this: $(".latex").latex(); (take all the elements that have a class called latex), not only divs can have the latex class. The class can obviously be applied to any type of container. This will in turn allow you to write inline equations as well because a span is, by default, displayed inline, unlike a div which is displayed as a block.

    As regards point 2 of your post, that is also not true. The plugin does not need to be called for each equation you have; in fact, the plugin needs to be called only once. This is because you normally use a standard class (say for example, latex) for all the containers that will contain equations, and then you only call the plugin once and it takes care of all the passed-in containers. Therefore, you only need to call the plugin once, like such $(".latex").latex();

    Point 3 of your post is true, but that is why I provided the ability to easily change the engine that is used to generate the LaTeX images. It’s true that the plugin requires the engine to be up and running for successfully generating the images but if there is a case in where the engine is not up, you can easily change the engine by using the url parameter; and there are a lot of engines you can use to generate the LaTeX. Also, some engines are quite reliable. For example, I can safely say that by using for example CodeCogs or Google’s engine, you are fairly safe from the problem of the server being down.

    Point 4 is only true when visiting the page for the first time. But after that, most of the images will be cached within your browser and thus you won’t be using the provider’s bandwidth and the images will load much quicker, because they will be loaded from the cache.

    The issue with jsMath is that, other than the fact that it uses a ton of css-tricks to render the image, it requires the jsMath TeX fonts for the equations to be rendered correctly. Also, coming to the css-tricks issue; by using such css manipulation, there is really no guarantee that the equations will be displayed uniformly across all the browsers; and this disadvantage is completely eliminated when using images.

    This CSS point can be clearly illustrated from one of your posts: PHP Markdown Extra Math. For example, most of the equations you put on that page are overlapping on the text (at least on my Chrome, Firefox and IE). The worst example is the section where there is the Castigliano equation. This is a screenshot of that section in your page:

    There are also some problems (with the rendering of the equations) in your An application of Castigliano’s Second Theorem with Octave post:

    All of these problems can be eliminated if the equations are displayed as images. I have now added your equation to my demo and here is a screenshot of how it is rendered with the plugin:

    On a final note, I thank you for taking the time to analyze and write constructed criticism about my plugin, and I appreciate it.

  2. Dr. Drang says:
    December 24th, 2009 at 10:04 am

    I’ve amended the post regarding Points 1 and 2. It appears to me that the LaTeX generators always create display-style equations; is there a switch to have them generate inline-style equations?

    My concern in Point 4 was not with a single visitor hitting the page several times but with many people hitting the page. That will force the same set of images to be generated many times.

    jsMath actually doesn’t require you to have the TeX fonts installed. If you don’t have them, it will use its own set of images. Obviously, this doesn’t give results that I would be pleased with, but it is a reasonable fallback position. MathJax should improve on this by downloading any missing fonts.

    I’m surprised you had rendering problems. While I’ve never tested it against Chrome, jsMath has never given me problems in Firefox. I’ve just opened the two pages you mentioned in Firefox, and the rendering has been fine. (This is on a Mac, but I seriously doubt the Windows FF rendering engine is different.) If you’d be willing to send me some screenshots (there was no link at that point in your comment) and tell me a bit about which fonts you have installed and how you have jsMath configured, I’d like to do some testing and perhaps send a bug report to Davide Cervone.

  3. Andreas Grech says:
    December 24th, 2009 at 10:26 am

    I actually posted 3 images in the post (using Markdown syntax) but I guess they must have been blocked by the spam filter or something.

    Anyways, these are the 3 images:

    1) …This is a screenshot of that section in your page:

    http://img63.imageshack.us/img63/8454/equations.png

    2) …in your An application of Castigliano’s Second Theorem with Octave post:

    http://img51.imageshack.us/img51/8454/equations.png

    3) …screenshot of how it is rendered with the plugin:

    http://img684.imageshack.us/img684/3144/castigliano.png

    -

    I tried them on 3 different computers and with three browsers; Chrome, Firefox and IE

  4. Dr. Drang says:
    December 24th, 2009 at 11:11 am

    I’ve done some testing this morning and found the following:

    1. IE and Firefox on (virtual) Windows machine render the equations just fine for me when the TeX fonts are installed.
    2. No browser renders the equations well if the TeX fonts are disabled or not installed. In fact, they’re a complete mess.

    I feel certain that in the past I’ve tested jsMath with the TeX fonts disabled and found them serviceable. I wonder if I’ve made a change to the CSS of my site that’s screwed them up. Something to investigate.

    Andreas, do you have the TeX fonts installed? And what are your settings in the jsMath control panel?

  5. Andreas Grech says:
    December 25th, 2009 at 3:08 am

    I didn’t have the TeX fonts installed when I took those screen shots. Now I installed the fonts, and the formulas are displayed correctly.

    The settings are ‘default’ as I didn’t change any of them.

    So the problem is really when the fonts are not installed, because the equations are literally jumbled up and illegible.

  6. Dr. Drang says:
    December 26th, 2009 at 8:00 pm

    The problem with illegible jsMath equations has been fixed. It wasn’t the fault of jsMath; it was due to a recent CSS change I made to the margins of <img>s in the main content area. I’ve now changed the CSS back to the way it was and equations are rendered properly even if the visitor doesn’t have the TeX fonts installed.