(Excerpt from "The MathML Handbook" by Pavi Sandhu)
IBM's techexplorer was one of the first tools released that enabled users to display MathML in Web browsers. It can directly render MathML, as well as TeX and LaTeX markup, in both IE and Netscape. techexplorer works as a plug-in for Netscape and as an ActiveX control for IE. Versions of techexplorer are available for most platforms, including Windows, Macintosh, and Unix. The current release, Version 3.1, supports most of the presentation and content tags defined in MathML 2.0. You can also use techexplorer as an ActiveX control to display interactive equations in Microsoft applications such as Word, Excel, and PowerPoint.
- Equations that can link to other documents.
- Links that can play audio or video files.
- Links that can toggle between two different displays.
- Links that open a pop-up window for displaying footnotes.
Once you install techexplorer, your browser is automatically configured to view files with the extensions .mml, .tex, .ltx, and .tcx (for MathML, TeX, LaTeX, and techexplorer documents, respectively). Whenever you open any document with these file extensions, techexplorer will be used to display the entire document. Alternatively, you can include instances of MathML, TeX, or LaTeX markup in an HTML document.
You can use techexplorer in either full-screen mode or window. In full-screen mode, the entire browser window is taken up by techexplorer for displaying the content of a document. This mode is used when you load a document that has one of the extensions or file types noted above for which techexplorer is defined as the helper application.
In window mode, techexplorer displays an embedded expression in an HTML document in a small window within the main browser window. The size of the techexplorer window is typically specified via the attributes of the embed tag or object tag, used for inserting the displayed expression in the HTML document.
If you right-click in a blank area inside the techexplorer window (or control-click on Macintosh) a context menu (see the following figure) appears. This menu gives you access to several basic features of techexplorer such as navigating within a document, printing (available in the Professional edition only), and changing options.
Figure: The techexplorer document context menu.
If you click on the Options menu, the dialog shown in the following figure appears. This lets you set options to control various features of how a document is displayed (such as colors, fonts, and so on). You can specify different option settings for regular text and mathematical expressions. For example, using the MathAutoColor tab, you can cause mathematical expressions to be displayed with a different background and foreground color from the surrounding text. You can also set operators, delimiters, and numbers to each appear in a different color.
Figure: The MathAutoColor section of the Options dialog.
If you have multiple fonts installed for displaying mathematical symbols, you can specify a given set of fonts as a default by using the Math and Symbols section of the Options dialog.
The following sections provide information on how to author HTML documents containing MathML content that can be displayed by techexplorer. The details of how MathML markup should be embedded in the HTML document vary depending on whether the document is to be viewed in Netscape or IE and whether you wish to use techexplorer as a plug-in, an ActiveX control, or an IE Behavior.
Authoring documents for Netscape
In Netscape, content to be rendered by techexplorer must be included in an HTML document using the embed tag. This element is used in HTML to enclose any content that should be rendered using a plug-in. Some of the important attributes of the embed element are:
- type: is the MIME type of the embedded object. For techexplorer, this is always set to application/x-techexplorer.
- src: gives the location of the file to be displayed, either as an absolute or relative URL.
- width and height: give the size of the plug-in display window, in pixels or as a percentage of the screen size.
- pluginspage: specifies the URL of the Web site for the plug-in that should be used to display the content. For techexplorer, this is always set to "http://www.software.ibm.com/techexplorer/".
- alt: allows you to specify alternate text that should be displayed as a fallback in case the plug-in cannot render the embedded content.
You can directly insert the MathML markup into the embed element using the mmldata attribute. The value of this attribute is a string that contains the MathML markup to be rendered. The next example shows the source for an HTML document that contains content to be rendered by techexplorer. The next figure shows the document displayed in Netscape.
Example: A sample document for displaying MathML in Netscape using techexplorer.
<html> <head></head> <body> <p>Here is a simple equation. <embed type="application/x-techexplorer" mmldata=" <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <msup><mi>x</mi><mn>2</mn></msup> <mo>-</mo> <mrow><mn>2</mn><mo>⁢</mo><mi>x</mi></mrow> <mo>+</mo><mn>1</mn> </mrow> </math>" pluginspage="http://www.software.ibm.com/techexplorer/" height="100" width="200" name="equation"> </embed> </p> </body> </html>
Figure: A simple MathML equation displayed in Netscape using techexplorer.
Alternatively, you can include the MathML markup in a separate document and refer to the document using the src attribute of the embed tag. In the following example, the MathML content is placed in a file called equation.mml, which is in the same directory as the HTML document.
Example: Using the src attribute to specify a MathML equation in a separate file.
<html> <head></head> <body> <embed type="application/x-techexplorer" pluginspage="http://www.software.ibm.com/techexplorer/" src="equation.mml" height=100 width=200 name="equation"></embed> </body> </html>
Note that for each MathML equation in your document, you must explicitly specify the size of the window in which it will be displayed! If you specify a window size that is too small to display the equation, the parts of the equation that don't fit in the window will get cut off. However, in such a case, techexplorer automatically places scroll bars around the display window, as shown in the following figure. You can then move the scroll bars to see the parts of the equation that would otherwise be hidden. When you use techexplorer with IE on Windows, it is possible to have the size of the window calculated automatically, as explained in the next subsection.
Figure: An equation rendered by techexplorer with too small a window size specified. The equation gets clipped because it is too long to fit in the window.
Authoring documents for IE
For IE on Windows, techexplorer is also implemented as an ActiveX control. Hence, to view MathML content you can enclose the MathML data in an object element instead of the embed element. Some of the important attributes of the object element are listed here:
- classid: is a unique label used in the Windows registry to tell IE where the helper application is installed on the local machine. For techexplorer, this is always set to: clsid:5AFAB315-AD87-11D3-98BB-002035EFB1A4.
- width and height: give the size of the ActiveX control window, in pixels or percentage of the screen size.
- autosize: specifies if techexplorer should allow the minimum space needed for the displayed expression. If set to true, the expression is shown without a scroll bar. If this parameter is not specified or if it is set to false and the techexplorer window is not large enough to fit the entire expression, the expression is displayed with scroll bars.
- param: provides a way to specify additional properties of the embedded object. It lets you specify values for a number of named parameters, using the syntax: <param name="name" value="value">. For viewing MathML using techexplorer, the important values of name are datatype and data.
- data: specifies the URL or the actual data of the document to be displayed.
- datatype: specifies the type of data to be displayed. It can take the values shown in the following table.
Table: datatype values.
Value of datatype attribute Type of Data 0 TeX or LaTeX data 1 MathML data 2 URL to a TeX or LaTeX document 3 URL to a MathML document
The following example shows the same document, modified for viewing in IE.
Example: A sample document for displaying MathML in IE using techexplorer.
<html> <head></head> <body> <p>Here is a simple equation. <object ID="eqn" height="100" width="200" classid="clsid:5AFAB315-AD87-11D3-98BB-002035EFB1A4"> <param name="autosize" value="true" /> <param name="datatype" value="1" /> <param name="data" value="<math xmlns='http://www.w3.org/1998/Math/MathML'> <mrow> <msup><mi>x</mi><mn>2</mn></msup> <mo>-</mo> <mrow> <mn>2</mn><mo>⁢</mo> <mi>x</mi> </mrow> <mo>+</mo><mn>1</mn> </mrow> </math>" /> </object> </p> </body> </html>
Notice that the width and height attributes are not specified explicitly in the object tag. The autosize parameter is set to true, so techexplorer automatically sets the window to the size needed for displaying the equation. Since techexplorer is used here as an ActiveX control, it can get information about the equation's size from the browser and adjust the size of the display window accordingly. This makes authoring easier and produces better-looking output than if you used techexplorer as a plug-in with Netscape.
For content that can be rendered by both Netscape and IE, you can use the object tag to enclose an embed tag, as shown in the following example. This is a more robust method than using either the object or embed tag alone, because it allows techexplorer to be used as an ActiveX control by IE and as a plug-in by Netscape.
Example: An object tag that contains an embed tag. This allows the MathML markup to be rendered by both IE and Netscape.
<object ID="eqn" height="100" width="200" classid="clsid:5AFAB315-AD87-11D3-98BB-002035EFB1A4"> <param name="datatype" value="1" /> <param name="data" value="<math><msup><mi>x</mi><mn>2</mn></msup></math>" /> <embed type="application/x-techexplorer" mmldata="<math><msup><mi>x</mi><mn>2</mn></msup></math>" pluginspage="http://www.software.ibm.com/techexplorer/" height="100" width="200" name="eqn"></embed> </object>
Although you can use the AutoSize parameter to solve the problem of adjusting the window size to fit the equation, another limitation of techexplorer remains: it renders all equations with an opaque background. If you change the default background color of your document using the browser's option settings, the background of the techexplorer window can be explicitly seen since it appears in a contrasting color (see the following figure). You can overcome this problem by using techexplorer as a Behavior, as explained in the next section
Figure: A MathML equation displayed in IE that shows a mismatch between the background color of the document and the techexplorer window.
IBM techexplorer can also be used as a Behavior for IE. As explained in the discussion of MathPlayer, IE Behaviors allow you to associate a given type of embedded content with a specific rendering application. Moreover, the application has access to the APIs of the browser, and can thus get more information about the Web page, which allows for better integration of the plug-in content with the surrounding HTML data.
To use techexplorer as a Behavior, you have to author the document as shown in the following example.
Example: A sample document for displaying MathML in IE using techexplorer as a Behavior.
<html xmlns:m="http://www.w3.org/1998/Math/MathML"> <head> <object id="techexplorer" classid="clsid:0E76D59A-C088-11D4-9920-002035EFB1A4"></object> <?import namespace="mml" implementation ="#techexplorer"/> </head> <body> <p>Here is a simple equation.</p> <p> <m:math> <m:mrow> <m:msup> <m:mi>x</m:mi><m:mn>2</m:mn> </msup> <m:mo>-</m:mo> <m:mrow> <m:mn>2</m:mn> <m:mo>⁢</m:mo> <m:mi>x</m:mi> </m:mrow> <m:mo>+</m:mo> <m:mn>1</m:mn> </m:mrow> </m:math> </p> </body> </html>
The object element associates the techexplorer ID with the techexplorer software. This association is established through the values of three attributes:
- id: defines a keyword for referring to the software.
- classid: is a unique label that identifies techexplorer in the Windows registry. It tells IE where techexplorer is installed on the local machine.
- codebase: tells IE where to find the techexplorer software if it is not present on the local machine.
The import processing instruction says that any element with the namespace prefix m: should be displayed using the software whose ID is techexplorer. The MathML expression is then included in the document with each MathML element in the form of a qualified name with the m: prefix. A namespace declaration in the html element associates this prefix with the MathML namespace.
The following figure shows an equation rendered in IE as a techexplorer Behavior. Notice that the background color of the techexplorer window is automatically adjusted to match that of the entire document, instead of rendering the equation with an opaque background.
Figure: A MathML equation displayed in IE as a techexplorer Behavior.
|<< back||next >>|
Copyright © CHARLES RIVER MEDIA, INC., Massachusetts (USA) 2003
Printing of the online version is permitted exclusively for private use. Otherwise this chapter from the book "The MathML Handbook" is subject to the same provisions as those applicable for the hardcover edition: The work including all its components is protected by copyright. All rights reserved, including reproduction, translation, microfilming as well as storage and processing in electronic systems.
CHARLES RIVER MEDIA, INC., 20 Downer Avenue, Suite 3, Hingham, Massachusetts 02043, United States of America