Home
Fusion Research
Graduate School
Electrodynamics

RSS Info

 Subscribe in a reader

Subscribe by Email
Enter your email address:

Delivered by FeedBurner


A Simple LaTeX to HTML Converter

Direct Link to Form

See the changelog.

The text boxes below can be used to convert LaTeX input to HTML format. This is not a true converter program, however, because it does not do anything with equation arrays or images. I always make those into graphics for web posting. In fact, this is really intended to serve two purposes related to LaTeX ↔ HTML conversion issues:

  1. Convert the main text of a LaTeX document into a web ready HTML format. This includes converting special math symbols and Greek letters into their HTML entities form. I use this to convert the EM Topics entries because I find it easier to write them in LaTeX first and then transfer them to the web.
  2. Provide an example of using regular expressions and Javascript to change text in a systematic way. If you are learning about javascript and want to see an example of the replace method for string objects, then (in addition to the many resources a web search would return) you can download or view the javascript file used on this page: latex2html.js (it has been purposely commented to be more helpful)

How it Works

The text boxes at the end of this description allow you to set preferences and submit text to be converted. The routine will go through the input and wrap the mathematical elements in <span> tags. Preferences allow you to set the span class for general math (i.e., anything surrounded with $ signs) and vectors (i.e., anything enclosed in a \vec{}). If no preference is set, then “math” and “vector” classes will be used. Example replacements are:

No Preference Provided

  • $\pi$ → <span class="math">&pi ;</span>

    NOTE: the space in &pi ; will not be included in the output (it is used here to prevent the browser from rendering the pi symbol, π

  • $\vec{E}$ → <span class="math"> <span class="vector"> E </span></span>

User Preferences of "special" for Math and "bold" for Vectors

  • $\pi$ → <span class="special">&pi ;</span>


  • $\vec{E}$ → <span class="special"> <span class="bold"> E </span></span>

Caveats

Possible Slow Performance --

This routine is written in javascript, which means it runs on your computer, not my leased and shared server†. If you have a slow computer, or if you are running many other programs at the same time, then it is likely that the conversion will be slow. Also, all of the replacement processes in the code are “lazy”, which will add to the processing time. A resource for learning about a lazy process may be found here, in addition to just about any generic javascript reference.

Does not Use MathML --

The standard mechanism for including mathematics on the web is MathML. This is a very neat scheme and I have used it in the past. The problems now are that it is too cumbersome (see an example of all the markup required to display a one element matrix), browsers still render it in many different ways (see how your browser displays), and it is changing enough to make it difficult to keep up. The changing issue is good news, however, because it means that MathML is likely to improve and one day be easily implemented by web novices like me.

No Browser Preview is Given --

You will notice that the returned code is displayed in a second text box instead of within the HTML of my site. While it would be nice to see an immediate preview of the HTML output, doing so would make my site vulnerable to XSS and other attacks. The output text area makes it easy to copy the result which can then be pasted into its own file and opened with a browser for viewing.

Missing Characters --

I have been adding characters as I need them. If you would like a character added feel free to say so in the comments form at the bottom of this page.

Treatment of Φ --

The Greek letter phi is always converted to uppercase. On your browser this means phi → Φ and the lower case version would look like φ.

Changelog

  • Oct. 28, 2007 - Scripted items are given their own SPAN tags.


Conversion Form


Insert example LaTeX code for testing (also opens new browser window with display of HTML output and CSS code):

Change “$” to <span> tags with class name:
Change “\vec” to <span> tags with class name:
Change subscripted items, “_{}”, to <span> tags with class name:
Change superscripted items, “^{}”, to <span> tags with class name:

Place LaTeX here:


 

See HTML output here:

 

Tags: , , ,

This is not a sponsored link, but it is a referral link. If someone signs up for web hosting through this link then I get 10% of their fees. Dreamhost offers this to all of their customers as part of their affiliate program.

Initial Posting: Tuesday, 23 October 2007
Last Updated: Tuesday, 10 May 2011