Scripting the techexplorer Hypermedia Browser

Automatically Sizing Embedded techexplorer Windows in HTML

When using the <OBJECT> tag to invoke the ActiveX control version of techexplorer, the AutoSize parameter can be used to automatically size an embedded techexplorer window. However, when using the <EMBED> tag to include a reference to the techexplorer plug-in, the window size (width and height) must be fixed. This can be a problem when mixing-n-matching techexplorer equations and HTML constructs. Indeed, it is silly to always expect the author or the application that created the markup for the embedded object to know ahead of time how big an equation will be when rendered. Equation composition consists of non-trivial computations and is very dependent on the fonts used and their sizes. Knowing the width, height and depth can be the difference between a web page that looks like this:

vs. one that looks like this:

It is the renderer of the markup and not the producer that should compute the correct height, depth, and width of the object. By using the techexplorer Java API and JavaScript code this situation can be palliated. Users can now create web pages that automatically determine the alignment and correct size of techexplorer rendered mathematical equations. The techexplorerPlugin Java class provides seven methods for determining the width, height and depth of a LaTeX and MathML expression: getWidthFromMMLString(String mmlSource), getHeightFromMMLString(String mmlSource), getDepthFromMMLString(String mmlSource), getWidthFromTeXString(String texSource), getHeightFromTeXString(String texSource), getHeightFromTeXStringAndWidth(String texSource, int width), and getDepthFromTeXString(String texSource).

Automatically Sizing Mathematical Expressions

The following HTML source shows how these methods can be used to dynamically generate a HTML document that contains correctly sized techexplorer mathematical expressions for both Netscape and Internet Explorer!

<HTML>
<BODY>
<EMBED WIDTH=3 HEIGHT=3 TYPE="application/x-techexplorer" TEXDATA="" MAYSCRIPT>
<SCRIPT LANGUAGE="JavaScript">			 
   function isNetscape( ) 
   {
      return navigator.appName == "Netscape"
   }

   function setDimensions( latexString )
   {		
      if ( isNetscape() )
      {
         width = 0; height = 0; depth = 0; count = 0;	
         while ( (!width || !height || !depth) && count < 5 )
         {	 
            width  = window.document.embeds[0].getWidthFromTeXString( latexString );  
            height = window.document.embeds[0].getHeightFromTeXString( latexString );  
            depth  = window.document.embeds[0].getDepthFromTeXString( latexString ); 
            count++;
         }

         if (count >= 5)
         {
            width  = 100; height = 100; depth  = height/2;
         }
      }
   }

   function LaTeX( latexString )
   {
      if ( isNetscape() )
      {	 		
         setDimensions( latexString );

         content = ""
         content = content + "<EMBED align=absmiddle WIDTH=" + width + " HEIGHT=" + height;
         content = content + " TYPE=\"application/x-techexplorer\" ";
         content = content + " TEXDATA=\"" + latexString + "\" >";
         document.write( content );
         document.close();
      }
      else
      {
         content = "";
         content += "<OBJECT align=absmiddle CLASSID='clsid:5AFAB315-AD87-11D3-98BB-002035EFB1A4'CODEBASE='AXTCHEXP.OCX'/>";
         content += "<PARAM NAME='DataType' VALUE='0'/>";
         content += "<PARAM NAME='Data' VALUE='" + latexString +"'/>";
         content += "<PARAM NAME='AutoSize' VALUE='TRUE'/>";
         content += "</OBJECT/>";
         document.write( content );
         document.close();
      }
   }
</SCRIPT>
Here is an inline <SCRIPT>LaTeX("$\\frac{-b\\pm\\sqrt{b^{2} - 4 \\, a \\,c } } {2 \\, a}$" )</SCRIPT>
equation.
</HTML>
</BODY>

Use the "options" menu to increase the techexplorer font size. Netscape users can hit the reload button in your web browser to see the JavaScript code automatically adjust each techexplorer window's width and height!

Automatically Sizing LaTeX Documents

The following JavaScript source shows how getHeightFromTeXStringAndWidth can be used to dynamically generate a HTML document that contain correctly sized techexplorer LaTeX document fragments!

<SCRIPT LANGUAGE="JavaScript">
<!--
   function isNetscape( ) 
   {
      return navigator.appName == "Netscape"
   }

   function setDimensions( latexString, width )
   {		
      height = 0; count = 0;

      while ( ( height == 0 ) && count < 5 )
      {  	
         height = window.document.techexplorer.getHeightFromTeXStringAndWidth( latexString, width );
         count++;
      }
		 	 
      if (count >= 5)
      {
         height = 100;
      }
   }

   function LaTeX( latexString, width )
   { 		
        setDimensions( latexString, width );

        content = ""
                
        if ( isNetscape() )
        {	
            content += "<EMBED align=absmiddle WIDTH=" + width + " HEIGHT=" + height;
            content += " TYPE=\"application/x-techexplorer\" ";
            content += " TEXDATA=\"" + latexString + "\" >";
        }
        else
        {  
            content += "<OBJECT align=absmiddle WIDTH=" + width + " HEIGHT=" + height
            content += " CLASSID=\"clsid:5AFAB315-AD87-11D3-98BB-002035EFB1A4\" CODEBASE=\"AXTCHEXP.OCX\" />";
            content += "<PARAM NAME=\"DataType\" VALUE=\"0\" />";
            content += "<PARAM NAME=\"Data\" VALUE=\"" + latexString + "\" />";
            content += "</OBJECT/>";
        }
        
        document.write( content );
        document.close();
   }
// -->
</SCRIPT>

Use the "options" menu to increase the techexplorer font size. Hit the reload button in your web browser to see the JavaScript code automatically adjust the techexplorer window height!

IBM techexplorer Hypermedia Browser is a trademark of the IBM Corporation. Send comments and questions to techexpl@us.ibm.com.