WWW 2007 / Poster Paper

Topic: User Interfaces and Accessibility

Generation, Documentation and Presentation of Mathematical Equations and Symbolic Scientific Expressions Using Pure HTML and CSS
Kehinde Alabi, Ph.D
SUNY at Stony Brook 110 Friendship Drive Rocky Point, NY 11778 (001) 6314840778

Kenny@tutorcentral.net ABSTRACT
This paper describes a comprehensive method for presenting mathematical equations and expressions using only pure HTML and CSS. This method renders the equations portable and editable and contrasts with previous procedures that represent equations as whole graphic objects. Methods for generating and documenting the equations using HTML and JavaScript are also described such that the equations can be interpreted and converted to or from other formats such as LaTex, MATHML, or linear representation. Categories and Subject Descriptors I.1.7 [Document and Text Processing]: Document Preparation ­ Photocomposition/Typesetting, Hypertext/Hypermedia, Format and Notation, Markup Languages. J.2 [Physical Sciences and Engineering]: Mathematics and Statistics, Engineering. I.1.1 [Symbolic and Algebraic Manipulation]: Expressions and their Representations ­ Representations. General Terms: Documentation, Standardization, Languages, Human Factors. Keywords: HTML, CSS, MATHML, Mathematical Equations, Symbolic Scientific Expressions. Figure 1. Representation of Fractions in HTML and CSS.

2.0 Generating Built-up Expressions
The elements of an HTML equation in the current method consist of symbols and operators. Symbols may include fonts and small bits of graphics representing symbols and may also include UNICODE symbols where supported by the browser[4,5]. The symbols and operators have appearance that is distinct from ordinary text in an HTML presentation [6]. This requirement is effected by applying appropriate style (CSS) to the equation cell, row, or table. Style elements include text spacing and font style set to provide the desired appearance for mathematical expressions. Built-up portions of an equation include elements such as fractions, subscripts, superscripts, matrices, and limiters. The procedure for presenting built-up equation elements in HTML table cells are illustrated in figures 1 through 7.

1.0 INTRODUCTION
In spite of the success of HTML as a pervasive format for document storage and presentation, when it comes to scientific and mathematical content, HTML is hardly yet a dominant format for document presentation. In fact, much scientific documents are processed and presented in LaTex [1], pdf, or other Word processing format. This is due to the difficulty associated with generating scientific expressions and mathematical notations in HTML. Current procedures include generating the equations as graphic files embedded within the HTML page [2], use of java applets, and more recently use of MATHML [3]. The first two methods suffer from additional download times required for the relatively larger graphics or applets. Also, equations once set in graphic form are difficult or almost impossible to edit. All methods require a browser plug-in, an embed, or additional software to present, author or edit the equations. The current method utilizes advances in HTML and AJAX technology to devise procedures to generate and present equations and expressions in HTML and CSS using only the basic web browser.

Figure 2. Combined Subscript and Superscript.

Figure 3. Representation of Variable-size Limiters.

Copyright is held by the author/owner(s). WWW 2007, May 8­12, 2007, Banff, Alberta, Canada. ACM 978-1-59593-654-7/07/0005.

Figure 4. Variable-size Horizontal Decorations.

1321


WWW 2007 / Poster Paper

Topic: User Interfaces and Accessibility icons that trigger programs to generate or modify an aspect of an HTML equation. Associated with the click of the icons are JavaScript programs or instructions. Since the editor is implemented in HTML, the entire document as well as the equations may be directly edited as illustrated in Figure 9.

Figure 5. Representation of n-ary Operators.
Drop-Down Menus

Edit in-place

Menu Menu Items

Figure 6. Representation of Matrices in HTML and CSS. Figure 9. Sample HTML Equation Editor in a Browser.

4.0 Documenting HTML Equations
Figure 7. Text and Conditional Expressions. Figure spaces is easier and Conditional Expressions. Handling of 7. Use of Text in the current method than traditional methods of presenting equations. Spaces can be directly inserted as desired within expressions and within cells using the free-form ability of HTML. Nesting of equation elements in the current procedure is also straightforward. Each cell in a built-up sequence is essentially an equation cell in its own right and can accommodate any of the built-up sequences illustrated above. Documentation of the equation is accomplished by using tags within the HTML text. Some tag names used with parts of the equation include frac, matrix, numerator, subscript etc. Note the fact that some of the names are derived from commands in formats such as LaTex to facilitate the easy development of converters to or from those formats. Further, the symbol images in an expression are given names that have a descriptive order. For instance, the image used for the symbol "±" (if image symbols are used rather than Unicode or other font representation) is math_pm.gif (similar to \pm used in LaTex). Named styles are also descriptive. For instance, the text style is named math_text. Together, the entire content of HTML equations may be completely interpreted from the HTML text alone.

5.0 Conclusion
Comprehensive procedures for generating mathematical equations and symbolic scientific expressions in pure HTML and CSS are presented. The equations are stored in HTML text rather than whole graphics rendering them easily editable. This method potentially confers the same properties of portability and ease of exchange and presentation on scientific material as for other content presented in HTML on the World Wide Web. Documentation of the equations was also described such that the equations can be inter-converted to other format such as Latex. The procedures can be combined with MATHML to take advantage of additional documentation features in MATHML for non-browser presentation.

(a) (a)

(b)

Figure 8. Visual Qualitative Comparison of HTML Equations and Word-Processed Graphic Equations. Figure 8 shows a number of equations generated using the current method compared to equations presented in graphic form in desktop publishing software. The figure shows the ability of the HTML form to render equations about as successfully as the graphic equivalent.

6.0 REFERENCES
[1] [2] [3] [4] [5] [6]
Lamport, L. LaTeX: A Document Preparation System, Users Guide and Reference Manual. Addison-Wesley, 2 (1994). Wegrzanowski, T. TexVC LateX to HTML Translator. http://en.wikipedia.org/wiki/Texvc Mathematical Markup Language. http://www.w3.org/TR/MathML/. Hutchinson. TTH: a "TeX to HTML" Translator, Ver 3.43. http://hutchinson.belmont.ma.us/tth/manual/. Murray, S. Unicode Nearly Plain-Text Encoding of Mathematics, Unicode Technical Node. (April 2006). Alabi, K, "NetVIOS Editbox User Manual, (October 2006).

3.0 Generating and Editing Equations
The HTML generation application consists of a sequence of menus that can be activated by the user. Each menu contains

1322