HTMX -- Equations in HTML (and more...)

Examples

$d=\sqrt{x^2+y^2+z^2}$
$\log (x) = \int_1^x 1/z \; \mbox{d}z$
$\Theta_{Z}(z) = \sum_{m=-\infty}^{\infty} q^{m^2} = 1 + 2q + 2q^4 + 2q^9 + \ldots$ where $q=e^{\pi iz}$

Introduction

The idea of HTMX is simple. It is an authoring tool for mathematicians and others who wish to include mathematical formulae in their HTML documents. You create a .htmx file which contains certain non-standard markup tags (most notably the <latex> and </latex> tags) you then run the HTMX script on the .htmx file and a standard HTML file is created. Anything between the <latex> ... </latex> tags is processed by LaTeX and included in your HTML file as an in-line GIF.

HTMX is a perl script.

Previous versions required that the latex2html converter be installed, this is no longer necessary, but it is still a recommended tool for anyone wanting to put mathematical content on the web. The current version creates anti-aliased gifs using Ghostscript and the Netpbm library. This technique was stolen from Textogif which was written by John Walker .

Prerequisites

Unix (any flavor should do)
Perl (I'm running version 5.8.7)
Netpbm -- actually, we only use a small subset of netpbm:
- pnmcrop
- pnmgamma
- pnmpad
- pnmscale
- ppmchange
- ppmtogif
LaTeX
Dvips
Ghostscript (I have ESP Ghostscript 7.07.1)

Downloading

Here is a tar-file containing the HTMX distribution.

The installation instructions are included. (Use "tar -xf htmx_v4_2.tar" on a command line to unpack )

Please send bug reports and/or installation problems to fieldsj1 (at) SouthernCT.edu

Using HTMX

HTMX recognizes several non-standard html-style tags:

<LATEX> ... </LATEX>
<LIM> ... </LIM>
<LDM> ... </LDM>
<REF label="foobar">
<#abbrev>
<PS file="foobar.ps">

We'll give an example of the use of each of these tags.

A small sample of a formula to be processed by LaTeX and included in the final HTML document as a transparent GIF follows:

$\int_0^\infty \frac{1}{x^2} \; \mbox{d}x$

The equation above was produced by source code of the form:

 
...as a transparent GIF follows: 
<P> 
<LDM> \int_0^\infty \frac{1}{x^2} \; \mbox{d}x </LDM> 
<P>

This is the LaTeX Display Math tag.

Here's a short formula $\aleph_1 = 2^{\aleph_0}$ in the middle of a line, that was an example of the LaTeX Inline Math tag, the source for which looked like:

 
...formula <LIM> \aleph_1 = 2^{\aleph_0} </LIM> in the...

And this is a LaTeX table with a whole lot of $\begin{tabular}{|c||c|c|c|} \hline & col hdr 1 & col hdr 2 & col hdr 3 \\ \hline \hline row hdr 1 & (1,1) & (1,2) & (1,3) \\ \hline row hdr 2 & (2,1) & (2,2) & (2,3) \\ \hline \end{tabular}$ silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, silly, text surrounding it, because we want to illustrate that the <Latex> tag can take the same arguments as the <IMG> tag. In fact any arguments are just passed along to the <IMG> tag which replaces the LaTeX material. The source for the last paragraph looked like:

 
And this is a LaTeX table with a whole lot of silly, ... , silly 
<LATEX align=left vspace=5 hspace=5> 
\begin{tabular}{|c||c|c|c|} \hline 
       & col hdr 1 & col hdr 2 & col hdr 3 \\ \hline \hline 
row hdr 1 & (1,1) & (1,2) & (1,3) \\ \hline 
row hdr 2 & (2,1) & (2,2) & (2,3) \\ \hline 
\end{tabular} 
</LATEX> 
text surrounding it, because we want to...

As you can (hopefully) see the "align=left" and other arguments to the <LATEX> tag have the same effect as with images.

Currently, HTMX puts the LaTeX source code in as the alternate string to display for text-based browsers (and people who keep image-loading turned off)

HTMX understands "abbreviations" which are HTML tags of the form

 
<#abbrev>

The program searches for such abbreviations in a .htmx_abb file and replaces them with some associated (longer) string. For example, the address at the bottom of the page was created by an abbreviation:

 
<#myaddress>

in the .htmx source file which becomes

 
<P><HR> 
<ADDRESS> 
<A HREF="mailto:fieldsj1@SouthernCT.edu">fieldsj1@SouthernCT.edu</A> 
</ADDRESS>

in the final .html file.

Basically, abbreviations give you a way to reuse common segments of HTML code easily. This can certainly improve the readability of your source -- and what actually gets published on the web is still perfectly standard HTML.

The <PS file="foobar.ps"> tag is probably self-explanatory. The PostScript file mentioned in the argument to the tag (which must be a one page file) is converted to GIF and included in the final HTML file as an image. Many people who use LaTeX for scientific papers will have figures and diagrams in PostScript format -- the <PS> tag is a convenience function to handle format conversion automatically.

The GIF below was created from an EPS source.

The <REF> tag was added at the request of Matt Bardoe, my favorite beta tester.

Suppose you have an equation like $-1 = e^{\pi i}$ that appears in your document several times. For instance this sentence has $-1 = e^{\pi i}$ in it. And so does this one: $-1 = e^{\pi i}$ . For this situation we have the <REF> tag, and an optional label="foobar" argument for the <Latex> tag.

Here's the source code which produced the last paragraph:

 
Suppose you have an equation like 
<latex label="euler"> $ -1 = e^{\pi i} $ </latex> 
that appears in your document several times. 
For instance this sentence has <ref label="euler"> in it. 
And so does this one: <ref label="euler">. 
For this situation we have ...

fieldsj1 (at) southernct.edu