7.4 Add-on Software

< Day Day Up >

The next section discusses the plug-in MathPlayer.

MathPlayer

MathPlayer is a free plug-in developed by Design Science Inc. It enables high-quality rendering of MathML on Versions 5.5 and later of IE on Windows. MathPlayer takes advantage of a special feature of IE called Behaviors, which allows low-level integration of a helper application with the browser. When you use the Behaviors functionality, MathPlayer can query the browser to get information about the font style and size, as well as spacing and alignment of text in a document. This information is then used to render MathML equations that are well integrated with their environment; that is, the font styles and sizes, as well as the baseline of the equations, are consistent with the adjacent text.

MathPlayer does an excellent job of rendering both content and presentation markup. It is written entirely in C++, making it fast and efficient. It can render hundreds of equations in a fraction of a second. MathPlayer comes with a special set of fonts for displaying mathematical symbols. These fonts are automatically installed on the machine when MathPlayer is installed.

MathPlayer also allows you to access the MathML source for any equation it displays. To do this, right-click on the equation to bring up a pop-up menu. If you then choose the Copy MathML command from this menu, the markup for the equation is copied to the clipboard. You can then paste this markup into another application, if desired.

MathPlayer supports some limited functionality for displaying interactive equations, such as toggling between two displays, changing the color or background of an equation, and displaying a message in the browser's status area when you move the mouse over it. For this type of interactivity, the equations must be authored using the WebEQ Editor application, details of which are provided in Section 8.3.

At this time, MathPlayer is not available for Macintosh. This is because the Behaviors functionality that it relies on is not implemented in IE for Macintosh.

Authoring Documents for MathPlayer

Example 7.4 shows the source of a typical document that contains an equation to be displayed by MathPlayer.

Example 7.4: A sample document for displaying MathML in IE using MathPlayer.

     <html xmlns:m="http://www.w3.org/1998/Math/MathML">      <head>      <object id=MathPlayer      class>"      </object>      <?import namespace="m" implementation="#MathPlayer" >      </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></m:msup>          <m:mo>-</m:mo>          <m:mrow>          <m:mn>2</m:mn>          <m:mo>&InvisibleTimes;</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 above document has the various key features that are explained next.

The xmlns:m attribute in the html tag associates the prefix m: with the MathML 2.0 namespace. This specifies that any tag of the form m:name in the document should be interpreted as the name tag defined by MathML 2.0.

The object element associates the MathPlayer ID with the MathPlayer 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 MathPlayer in the Windows registry. It tells IE where MathPlayer is installed 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 MathPlayer.

The MathML expression is included in the document with each MathML element in the form of a qualified name with the m: prefix.

Using the above guidelines, you can author by hand Web pages that contain MathML to be displayed by MathPlayer. Alternatively, you can use the translation mechanism provided in products like MathType or WebEQ to save an equation in the desired form and directly paste it into the HTML document. Details of how to do this are provided in Sections 8.2 and 8.3. Figure 7.4 shows how the document in Example 7.4 looks, when viewed in IE.

click to expand
Figure 7.4: A simple MathML equation as displayed in IE using MathPlayer.

Since MathPlayer is implemented as an IE Behavior, it has access to information about the various display settings of the browser (such as the font style, size and color). Hence, MathPlayer can automatically adjust the display of all equations to match the default settings of the browser. Figure 7.5 shows the result of viewing the same document as in Figure 7.4 but with the default font style set to Courier, a larger font size, and the background color set to gray. Note that all these changes are automatically applied to the display of the equation.

click to expand
Figure 7.5: The same equation as in Figure 7.4 but using different default settings for the font style, font size, and background color.

IBM techexplorer

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.

techexplorer is available in two versions: a free Introductory edition (which has the basic features needed for viewing scientific documents) and a Professional edition (which adds some extra features such as support for printing as well as scripting using JavaScript and Java). techexplorer is much more than a viewer for scientific documents. It supports a special set of commands that can be included as markup in a document to implement various features, such as the following:

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
A programming interface that allows techexplorer to be controlled using JavaScript or Java

These features make it possible to use techexplorer for creating Web pages with dynamic mathematics. The Professional version of techexplorer includes a special set of class libraries and an implementation of the W3C's DOM. You can use these to manipulate various parts of a document in response to user events such as mouse clicks by writing appropriate JavaScript and Java programs. Some examples of using techexplorer to display interactive mathematical content are given in Section 12.4.

Viewing Documents

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 (Figure 7.6) 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 7.6: The techexplorer document context menu.

If you click on the Options menu, the dialog shown in Figure 7.7 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.

click to expand
Figure 7.7: 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.
name: allows you to name the embedded object so that it can be referred to by a Java or JavaScript program or another plug-in.
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. Example 7.5 shows the source for an HTML document that contains content to be rendered by techexplorer. Figure 7.8 shows the document of Example 7.5 displayed in Netscape.

Example 7.5: 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>&InvisibleTimes;</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>

click to expand
Figure 7.8: 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 Example 7.6, the MathML content is placed in a file called equation.mml, which is in the same directory as the HTML document.

Example 7.6: 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="/books/4/532/1/html/2/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 Figure 7.9. 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..

click to expand
Figure 7.9: 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.
name: allows you to name the embedded object so that it can be referred to by a Java or JavaScript program or another plug-in.
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 Table 7.2.

Table 7.2: `datatypec 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

Example 7.7 shows the same document as in Example 7.5, modified for viewing in IE.

Example 7.7: A sample document for displaying MathML in IE using techexplorer.

     <html>       <head></head>         <body>           <p>Here is a simple equation.         <object  height=100 width=200       class>           <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>&InvisibleTimes;</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 Example 7.8. 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 7.8: An object tag that contains an embedc tag. This allows the MathML markup to be rendered by both IE and Netscape.

     <object  height=100 width=200    class>      <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 (Figure 7.10). You can overcome this problem by using techexplorer as a Behavior, as explained in the next section.

click to expand
Figure 7.10: A MathML equation displayed in IE that shows a mismatch between the background color of the document and the techexplorer window.

IE Behaviors

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 Example 7.9.

Example 7.9: 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        class>       </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>&InvisibleTimes;</m:mo>          <m:mi>x</m:mi>          </m:mrow>          <m:mo>+</m:mo>          <m:mn>1</m:mn>        </m:mrow>      </m:math>      </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.

Figure 7.11 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.

click to expand
Figure 7.11: A MathML equation displayed in IE as a techexplorer Behavior.

WebEQ

WebEQ is a suite of Java-based software tools for authoring and displaying mathematical equations in a Web page. WebEQ consists of five components:

Editor: is a WYSIWYG tool for authoring equations using template-based palettes similar to those available in MathType.
Publisher: is a tool for processing an HTML document that contains mathematics so it can be directly placed on a Web server.
Equation Server: is a command-based version of Publisher to enable batch processing of documents; for example, using scripts on a server.
Viewer Control: is a Java applet for displaying mathematical notation in a Web browser. The equations must be enclosed in an applet tag in either MathML or WebTeX form. WebTeX is a markup language for mathematics whose syntax is very similar to that of LaTeX.
Input Control: is a Java applet that enables a user to create and edit equations interactively by clicking buttons on a Web page. The equations can then be transmitted to a server for processing. For example, the Input Control can be used as part of a mathematical bulletin board. Students can graphically input equations that are then converted to images by the server and posted on a Web page.

WebEQ Input Control is primarily useful in setting up dynamic mathematical Web sites that allow users to interactively manipulate mathematical equations. The details of installing and using the Input Control are relatively complex, since it requires some knowledge of using JavaScript and Common Gateway Interface (CGI) programming on Web servers. A detailed discussion of the Input Control is deferred to Chapter 12, which specifically deals with dynamic mathematical features. A discussion of the Editor and Publisher is provided in Chapter 9, which deals with MathML authoring tools. In this section, we confine ourselves to discussing the features of the Viewer Control, since that is the component relevant for displaying equations.

WebEQ Viewer Control provides a way of displaying interactive MathML equations in a Web browser. For the equations to be displayed in a browser, the user must have access to a set of Viewer Control class files. These files can be either installed locally on the client machine or automatically downloaded from the server each time you view a Web page that contains an equation. For details of how to make the class files available on a Web server or to install them on a client machine, see the WebEQ product documentation.

Viewer Control Applets

To be displayed by the Viewer Control, each equation must be enclosed in an applet tag. This tag is used in HTML to indicate an applet call and has the following important attributes:

codebase: specifies the location of the required WebEQ class files.
code: specifies the applet to be run. For WebEQ Viewer Control applets, this attribute is always set to the value "webeq3.ViewerControl".
width and height: specify the size of the window in which the applet is displayed.
name: assigns to the applet a name that can be used to control it using a JavaScript or Java program.
param: specifies additional properties of the applet. This attribute is always specified using the syntax: <param name="name" value="value">.

The WebEQ Viewer Control recognizes a number of parameters that can be used to control specific aspects of how WebEQ should display the equation. Some of the important parameters are:

name=eq: specifies the equation to be displayed in the form of MathML or WebTeX markup.
name=src: specifies the URL of file that contains the equation to be. This is an alternative to specifying the equation directly using name=eq.
name=parser: specifies the markup language used for representing the equation. The allowed values are mathml and webtex.

Several other input parameters control various aspects of the equation's appearance (such as its font size, color, alignment, or padding). However, you do not have to know the names of all the parameters since in most cases you will not be authoring Viewer Control applet tags by hand. You can instead create applet tags for any equation using either WebEQ Editor or Publisher. These applications allow you to specify the properties of an equation using menus or dialogs, and they automatically generate the applet tag for the equation with the appropriate parameter values included.

Example 7.10 shows a simple document that contains a Viewer Control applet tag.

Example 7.10: A sample document for displaying MathML using the WebEQ Viewer Control.

    <html>         <head><title> MathML Example </title></head>           <body>             <p>Here is a simple equation.</p>               <applet codebase="../../classes"                                code="webeq3.ViewerControl"               width=200 height=100>               <param name=size value=12>               <param name=eq 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>&InvisibleTimes;</mo>                      <mi>x</mi>                </mrow>                <mo>+</mo>                <mn>1</mn>             </mrow>          </math>">        </applet>      </body>    </html>

Figure 7.12 shows a typical document that contains WebEQ Viewer Control applets as displayed in IE.

click to expand
Figure 7.12: Displaying a MathML equation as a WebEQ applet.

< Day Day Up >