This site is a showcase for using LatexRender for mathematics in WordPress

Using LaTeX in WordPress

mathTeX helper

Monday 14th January 2008

Filed under: — Steve @ 5:49 pm

As mentioned in Online LaTeX mathTeX lets you incorporate high-quality LaTeX images in an web page using an image tag so
<img src="\sqrt{a^2+b^2}" />
becomes which may be placed slightly too high on the line.

This is very simple to do but remembering exactly what to type can be a problem, particularly in sites like Blogger. So I have written a tool which

  • allows you to test LaTeX code first
  • creates the image code (or URL with a link if you prefer) automatically for you
  • adds title attributes so that hovering a mouse over the image shows the code
  • ensures that the image’s vertical spacing is improved

This makes it simple to produce c=\sqrt{a^2+b^2} whose code is
<img src="\sqrt{a^2+b^2}" title="c=\sqrt{a^2+b^2}" alt="c=\sqrt{a^2+b^2}" style="vertical-align:-2pt;" />

Download mathTeX helper which runs on your own computer and uses JavaScript.


  1. Hi Steve,

    I did some work a year or so ago to improve TeX handling in MediaWiki. Specifically I modified the code that generates the relevant image to
    – create an image that has a transparent background (not white) so it looks better against on a non-white page
    – does some measurements of the full size of the image and where the baseline is

    The HTML that then inlines the image uses the baseline/size info to place the image with the correct baseline, and scaled in em-units, so that if the text is grown or shrunk, the image scales with the text.
    I think, for example, that my base-line aligning does a better job than yours and does it automatically.

    The net result is something that feels a lot more like organically inline text. The one downside is that if your browser uses crappy image scaling code, the result looks nasty because it is always being scaled by weird fractions. At the time I tested this, Safari had great image scaling code, Firefox and other gecko browsers were on the OK side of lousy, and IE was just unacceptable. I’ve no idea if this has changed over the last year.

    So there is a price to be paid, but of course a plugin could try for browser identification, and if the browser is lousy, route down the old path. Certainly both the base-line work and the transparency should be applicable to all browsers; only the scaling is problematic with lousy non-aliasing image code.

    Anyway, if you are interested email me and I’ll let you know the relevant mods I made and give you my code.

    Comment by Maynard Handley — Wednesday 23rd January 2008 4:48 am #

  2. Not sure which image generation system you are referring to. LatexRender generates a transparent image already and Vertical Alignment of Images shows how to improve the placement of images. Perhaps this is the system you are referring to?

    On the other hand if you have done the same for mathTeX, where the image is generated elsewhere and mathTeX helper only has a fixed vertical alignment, then it would be worth publicising it and letting John Forkosh, the author of mathTex, know.

    Comment by Steve — Wednesday 23rd January 2008 10:05 am #

  3. Thanks for the helper. it has proven very useful.

    Comment by aL — Tuesday 19th February 2008 3:25 am #

  4. Thank you for the nice app. Saves me a lot of trouble.

    Comment by Freiddie — Friday 4th July 2008 10:21 am #

Sorry, the comment form is closed at this time.


This site is a showcase for using LatexRender for mathematics in WordPress