MIT - Academic Computing

Displaying Math on the Web -- Samples and Tools

The samples below are intended as a simple illustration of various options for displaying equations on the web; all were generated using tools available on Athena.
hand-drawn equation: the integral from zero to infinity of e to the (minus x squared) dx equals (the square root of pi) over 2
Displaying Math on the Web: Samples and Tools | Comparison of Approaches | Further Information

Contents

 

LaTeX originals

The latex2html and TtH samples below were converted from these originals:
standard latex sample
standard latex2e sample
latex sampler of equations
latex sampler of equations (equation env.)
latex2e of above with \htmlimage{no_antialias} 		(default Athena latex --> sample.dvi)
(newtex locker's latex2e --> sample2e.dvi)
(default Athena latex --> equations.dvi)
(default Athena latex --> equations_eq.dvi)
(newtex locker's latex2e --> equations_noaa.dvi)
 

HTML versions (samples at left, notes on tools at right)

 
HTML from latex2html By default, latex2html creates GIF images of most equations (as well as special accents, external PostScript files, and any LaTeX environments it cannot directly translate into HTML). In the equations*.html files on the left, all but the first equation are GIF images, whereas the sample*.html files consist solely of HTML text.
Default settings: Options (html.sty): Options (command-line): General syntax 
     athena% add infoagents
     athena% latex2html filename.tex
Options to override default settings

There are numerous command-line options, as well as latex2html-provided styles that can be used to customize the ouput. At left:

  • equations_noaa.html includes a non-antialiased version of each equation, created by adding \htmlimage{no_antialias} commands to the .tex file.

  • the second pair of sample*.html files were generated with the following command-line options: 
    athena% latex2html -split 0 -info 0 -no_navigation filename.tex
    where the flags are as follows: 
    -split 0         generate a single html file
-info 0          omit "About this document ..." info.
-no_navigation   omit navigation buttons

For more information see:

Notes

  1. Equation images are generated from PostScript via DVIPS; hence any settings in your ~/.dvipsrc file may affect the final appearance (for example, the BaKoMa font substitutions recommended above for PDF output seem to produce lower quality images under latex2html).

  2. Long afs paths may cause errors such as the following. To avoid this, copy source files to the hard drive (/tmp) and run latex2html there, then move the files over to the locker. 
    <tex.pro>[7] 
Unrecoverable error: limitcheck in .putdeviceprops
(1488)op_array(486)0x14dd88:Execution stack at 0x10f244:
0x118118: 0x0f oper --F---e-- 0x0000 0x0003c340 = %interp_exit
0x118120: 0x03 file --G-rxe-- 0x0001 0x0014e2e0
0x118128: 0x05 mpry --G-rxe-- 0x0002 0x0014eecc
0x118130: 0x05 mpry --G-rxe-- 0x0039 0x0014f73e
Dictionary stack at 0x10f16c:
0x118948: 0x02 dict --Gwrx--- 0x0000 0x00118ab0
0x118950: 0x02 dict --Gwrx--- 0x0004 0x001637e0       
0x118958: 0x02 dict --Lwrx--- 0x0000 0x0011d9c0       
0x118960: 0x02 dict --Gwrx--- 0x0000 0x00118ab0       
Error while converting image: No such file or directory


  3. By default, latex2html puts its output in a directory named with the prefix of the tex file (e.g., the dir. filename if the tex file is filename.tex). The output in the filename directory will include the files:

    filename.html or index.htmlbase page
    filename.cssstyle sheet
    img1.gif, img2.gif, etc.images of equations, if any
    node1.html, node2.html, etc.subpages, if any

    Other files can be deleted, once you have taken a look at the html page(s) to determine which are actually necessary. (One way to do this is to generate the files in /tmp, move just the html, image, and css files to their final location, and check in a browser to see if things looks ok and the links work.)

 
HTML from TtH Unlike latex2html, TtH does not use images to display equations; instead, it translates all equations into HTML, relying on symbol fonts supported by common browsers to display equations. It may be necessary to configure your browser to display these fonts correctly; a test page with instructions is provided to check your settings. (TtHMML, a TeX-to-MathML translator from the TtH author, is now in testing.)
Default settings Using options: General syntax 
     athena% add tth
     athena% l2h filename      (omit the extension .tex)
Options used in samples 
     athena% l2h filename -i
The -i flag specifies that italics should be used in equations, as in TeX. For more information, see the TtH manual and Athena-specific notes in /mit/tth/README.athena.
 
HTML with WebEQ WebEQ is designed to produce web-ready equations for inclusion in HTML files. It supports the emerging MathML specification, and can output equations as JPEG or PNG images, Java applets, and/or MathML code. (MathML is a markup language which cannot yet be rendered directly by commercial web browsers, but can be used by other conversion tools; for the experimental browser Amaya and other information see the Further Information page).
Sample files with notes: General information about WebEQ follows; the sample pages on the left include specific notes on how each equation was created.

WebEQ includes two tools for creating equations:

  • WebEQ Equation Editor is a WYSIWYG, graphical editor for creating simple equations. Equations can be entered by hand, or imported from MathML.
  • WebEQ Wizard is a more powerful command-line editor and file converter. Equations can be entered by hand in either WebTeX (a TeX-like syntax) or MathML, and HTML files containing either format can be converted directly to HTML with images or applets for the equations.

The WebEQ documentation includes information on WebTeX and MathML, in addition to WebEQ samples and general information.

Running WebEQ on Athena

To get started, type: 

   athena% setup webeq
This will launch an xterm labelled "webeq" in which to type the various commands listed below.

Using the Equation Editor

Using the Wizard
  • online documentation
  • starting the GUI Wizard: 
       athena% webeq_wizard &
  • using Wizard from the command line: 
       athena% webeq_wizard_command -eq 'equation' 

or athena% webeq_wizard_command -o output.html source.html
    For additional options, type: 
       athena% webeq_wizard_command
Notes on applets

WebEQ applets run by passing WebTeX or MathML code to webeq.Main. In order for the browser to find the necessary files, you should specify 

   codebase="http://web.mit.edu/webeq/currenthome/classes/"
in the HTML's applet tag, e.g.: 
   <APPLET CODEBASE="http://web.mit.edu/webeq/currenthome/classes/" 
   CODE="webeq.Main" WIDTH=131 HEIGHT=48 align=middle>
This value can be set as an option in the Wizard (go to the Options menu, select Show, type the above URL into the Codebase dir. in the Options window; then go back to the Wizard window and select Options-->Save). If running from the command-line, use the -codebase flag.
 

PDF versions

PDF
If you are starting with latex (or tex) source, you can generate PDF directly on Athena using pdflatex (pdftex). This is currently beta software, but generally produces good results; it does not require the intermediate processing of a DVI file with special handling of mathematical fonts as is otherwise recommended.

Starting from source

  • using pdflatex (if your latex file does not include postscript figures) 
      athena% pdflatex filename.tex
    will produce filename.pdf in the current directory. Note that included postscript files aren't currently supported (pdflatex will just omit them); formats which will work for graphics are jpeg, pdf, png, or tiff, using \usepackage[pdftex]{graphicx}

  • otherwise 
      athena% dvips -Ppdf filename.dvi
  athena% add acro; distill filename.ps
    The first line produces filename.ps in the current directory, from which the second line produces filename.pdf.

    Note that the flag -Ppdf substitutes scalable fonts in place of default DVIPS bitmaps for mathematical symbols; otherwise, PDF produced from DVIPS output tends to be poor quality for on screen viewing. (This supersedes previous instructions on customizing your own ~/.dvipsrc file for Athena 8.3 and earlier. For details, see optimizing TeX/LaTeX originals for PDF conversion in the ACS PDF FAQ.)

 

MathML versions

MathML These samples are HTML pages containing MathML for the equations. To view the equations as intended, you will need to open them in a program that is able to render or convert MathML. (See Further Information.)
The first two samples were generated from the editor/palette features in Amaya and WebEQ respectively; the third was created from the sample latex file equations_eq.tex using the experimental TtHMML translator.
Displaying Math on the Web: Samples and Tools | Comparison of Approaches | Further Information
MIT | Academic Computing | Contact us
Last modified: Fri Aug 4 13:03:35 2000