Standard Answers

As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Internet Explorer, see Internet Explorer Developer Center.

By Jay Allen, Mark Davis, Heidi Housten, and Tosh Meston
Microsoft Corporation

October 4, 2002

There are so many standards and developments to keep up with and it's our job to keep you informed of them when it comes to Web development. This month a reader asks about MathML. Did you even know it existed? If you did, then maybe you'd like to join our crack team of savvy writers!

We have a heap of different questions so there is bound to be at least one, and hopefully more, that gives you something interesting to think about in your next project. Don't forget to peek in the archives.

Contents

Formulaic Answers—MathML and Internet Explorer
Giving Your Name and Other Properties—Excel: filenames and properties

Web Team in Short

Formulaic Answers

Dear Web Team:

I would like to know to what degree does Internet Explorer support MathML?

Thanks,
Albert Mungin

The Web Team replies:

We're glad you asked about this topic, Albert. Like so many people at Microsoft and in our industry at large, the Web Team members were at one time or another big-time math geeks, so a marriage between Math and XML is an exciting and interesting topic certainly worthy of a few paragraphs.

MathML or Mathematical Markup Language is an effort to describe mathematical expression using XML syntax. The goals of MathML are to separate the math content from its presentation and to describe the mathematical expression such that math software tools can evaluate the expression and perform computations on it.

Describing mathematics on computing systems is as old as computing systems themselves. It was natural at first to use a linear format to describe a math expression, such as (a^2 + b^2 = c^2). Soon however, people started inventing ways to typeset these formulas so they could be displayed or printed in a more familiar format. One such system was TeX, which became popular in academic circles and remains so today. Another was SGML standard ISO 12083. While these languages were excellent at presenting math expression, there was a need to mathematically describe an expression such that it could be parsed and evaluated. Certain mathematical software packages like Wolfram Research's Mathematica had been dealing with this problem for years and had developed a system for expressing math so that the expression was typeset and also computable. With the explosion in popularity of the Web and XML in the 90s, it was proposed that the XML standard be used to describe math so that browsers could display math expressions and the data could be interchanged with math software products for evaluation. MathML was born.

The present standard is MathML 2.0, and has reached W3C recommendation status. MathML contains tags for presentation in browsers and content tags to unambiguously describe the meaning of the math expression.

While Internet Explorer does not natively display MathML content, there exist several third-party ActiveX® controls or DHTML Behaviors that specialize in the presentation of MathML. One such program is MathPlayer by Design Science Inc. Another is techexplorer from IBM. Another option for displaying MathML content in a Web browser is to include the MathML in an XHTML document and specify an accompanying XSLT stylesheet provided by the W3C, which transforms it into nicely formatted HTML.

Here are a few examples of formulas as they are represented in presentation and then as content in MathML.

First, here is the Pythagorean theorem represented linearly:

a^2 + b^2 = c^2

And in Presentation MathML, it looks like this:

<math xmlns='http://www.w3.org/1998/Math/MathML'>
    <msup>
        <mi>a</mi>
        <mn>2</mn>
    </msup>
    <mo>+</mo>
    <msup>
        <mi>b</mi>
        <mn>2</mn>
    </msup>
    <mo>=</mo>
    <msup>
        <mi>c</mi>
        <mn>2</mn>
    </msup>
</math>

And in Content MathML, it looks like this:

<math xmlns='http://www.w3.org/1998/Math/MathML'>
    <apply>
        <eq/>
        <apply>
            <plus/>
            <apply>
                <power/>
                <ci>a</ci>
                <cn type='integer'>2</cn>
            </apply>
            <apply>
                <power/>
                <ci>b</ci>
                <cn type='integer'>2</cn>
            </apply>
        </apply>
        <apply>
            <power/>
            <ci>c</ci>
            <cn type='integer'>2</cn>
        </apply>
    </apply>
</math>
 

Next, here is the equation representing gravitational force:

F = G*m1*m2 / r^2

In Presentation MathML, it is:

<math xmlns='http://www.w3.org/1998/Math/MathML'>
    <mi>F</mi>
    <mo>=</mo>
    <mfrac>
        <mrow>
            <mi>G</mi>
            <mo>&#8290;</mo>
            <mi>m1</mi>
            <mo>&#8290;</mo>
            <mi>m2</mi>
        </mrow>
        <msup>
            <mi>r</mi>
            <mn>2</mn>
        </msup>
    </mfrac>
</math>

And in Content MathML, it is:

<math xmlns='http://www.w3.org/1998/Math/MathML'>
    <apply>
        <eq/>
        <ci>F</ci>
        <apply>
            <times/>
            <ci>G</ci>
            <ci>m1</ci>
            <ci>m2</ci>
            <apply>
                <power/>
                <apply>
                    <power/>
                    <ci>r</ci>
                    <cn type='integer'>2</cn>
                </apply>
                <cn type='integer'>-1</cn>
            </apply>
        </apply>
    </apply>
</math>
 

We have listed the Presentation and Content MathML separately, but they can be combined into a single <math> node so that they can be copied and pasted from applications that require presentation MathML or those that need the content MathML.

Other efforts to describe elements of chemistry and music in XML are also being developed and information is available on the Web.

Giving Your Name and Other Properties

Dear Web Team:

We use Response.ContentType, Response.Write and Response.BinaryWrite frequently on our intranet pages to generate download files from database information. A good example is the contacts sheet that provides a link for the user to click that generates a vCard file containing the contact information for the user they are viewing.

The problem with this approach is that the .asp file (genvcf.asp) is the filename that is "presented" to the browser when downloading the file. Can we control the file name of the response object? (in the above example the Name of the contact would be a good choice...)

Phil Revill

The Web Team replies:

Since you didn't include a little sample for us to work with, we'll use a sample we've used before but with some new information we discovered. This example generates an Excel file in HTML. This makes much less work for the server because it means that there is no need to instantiate and automate Excel on the server. We won't explain much about the main code, just the bits that are new. If you want the basics, read Turning the Tables section in the July 2000 column. However, the answer to you question is to look at the content-disposition line.

The cool new stuff for this example is how to set the document properties for an Excel file when creating it with HTML—the ones you get when you choose properties under the file menu option. When you read the following sample, look for things like how we tell Excel how to display the date in the spreadsheet, what filename to use for the file, and how we specify the office document properties.

<%@ language=vbscript %>
<%
  response.buffer = true
  response.ContentType = "application/vnd.ms-excel"
  response.AddHeader "content-disposition", "inline; filename=dynamic.xls"
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:o="urn:schemas-microsoft-com:office:office">
<HEAD>
<TITLE>an Excel page</TITLE>
<!--[if gte mso 9]><xml>
 <o:DocumentProperties>
  <o:Subject>An experiment with HTML in Excel</o:Subject>
  <o:Author>auto-generated</o:Author>
  <o:Keywords>HTML</o:Keywords>
  <o:Description>Blah blah blah</o:Description>
  <o:Created><%= now %></o:Created>
  <o:Category>Experiments</o:Category>
  <o:Company>My Company</o:Company>
 </o:DocumentProperties>
</XML><![endif]-->
<STYLE>
  .xl25 { WHITE-SPACE: normal; mso-number-format: "mmm\ d,\ yyyy" }
  .head { BACKGROUND: #ccccff; COLOR: green}
</STYLE>
</HEAD>
<BODY>
<TABLE WIDTH=260>
<TR><TD CLASS=head COLSPAN=5 ALIGN=center><B>Our Data</B></TD></TR>
<TR><TD CLASS=xl25>5/10/2002</TD>
<%
  for i = 1 to 4
    response.write "<TD WIDTH=40>"
    response.write i + i
    response.write "</TD>"
  next
%>
<TR>
   <TD COLSPAN=4><B>total</B></TD>
   <TD><B>=sum(B2:E2)</B></TD>
</TR>
</TABLE>
</BODY>
</HTML>
<%
  response.flush
  response.end
%>

First of all, when it comes to properties, notice that we establish a namespace in the <HTML> tag so that we can reference the office xml DTD. Also, notice that the title of the document is not stored with the other document properties. It is extracted straight from the html document title. Finally, we specify the date format by using a style sheet declaration. Look closely at style .xl25. If you want to know more about how to format information or what else you can do, experiment with saving an Excel file as html. There are a lot of extra tags that Excel uses so it can take a while to find what you are looking for. This is a great way to dynamically generate Excel files without trying to use the middle step of saving an Excel file on the hard disk, and because it's HTML and not a full Excel file, it makes life easier for any of your viewers who are still using modems.

Web Team in Short

Single Spacing in Editable DIVs

Q: Henry Lyons asks, "I am using content-editable DIVs on an HTML form, and when I hit the <Enter> key while inside the DIV, it automatically begins a new paragraph. If I hit Shift-<Enter> I get a single line break. How can I change the behavior so that when I hit <Enter> I get a single line break instead of a new paragraph?"

A: You can force single-spacing when you hit return in a content-editable element by seeding it with an inner DIV like so:

<DIV CONTENTEDITABLE="true" STYLE="border:1px solid"><DIV></DIV></DIV>

Smarten Up Those Tables

Q: Jeremy wants to know how MSDN got the HTML tables at the XML Web Services Developer Center( looking so good.

A: Those table look good enough to eat off, don't they? You could achieve this effect by using a graphic as the table background, but this is an inflexible solution and the user will be downloading more bits. Looking at the HTML, you can see that this effect was generated by specifying the Internet Explorer gradient effect on the table cell. This and other Internet Explorer multimedia filters and transitions are available as of Internet Explorer 4.0. The gradient effect is one of the available procedural surfaces, which are displayed behind the content of an HTML object. The gradient effect specifies the start and end color, as well as the gradient type (1=horizontal; 2=vertical). The following example uses both types of gradient to produce a diagonal gradient effect.

<HTML>
<BODY>
<TABLE STYLE="FILTER:PROGID:DXIMAGETRANSFORM.MICROSOFT.GRADIENT(GRADIENTTYPE=1, 
STARTCOLORSTR='#00B4CCE5', ENDCOLORSTR='#A0B4CCE5') 
PROGID:DXIMAGETRANSFORM.MICROSOFT.GRADIENT(GRADIENTTYPE=0, 
STARTCOLORSTR='#00B4CCE5', ENDCOLORSTR='#50B4CCE5' );">
<TR><TD>Cell 1 1</TD><TD>Cell 1 2</TD><TD>Cell 1 3</TD></TR>
<TR><TD>Cell 2 1</TD><TD>Cell 2 2</TD><TD>Cell 2 3</TD></TR>
<TR><TD>Cell 3 1</TD><TD>Cell 3 2</TD><TD>Cell 3 3</TD></TR>
</TABLE>
</BODY>
</HTML>

Please see Visual Filters and Transitions Reference for more information.

Learn to Love Your Inner HTML

Q: Marcus is wondering why the &pound; entity in his HTML is shown as a pound character when displaying the contents of the innerHTML property, as demonstrated by the following HTML:

<HTML>
<BODY ONLOAD="alert('HTML: '+document.body.innerHTML);">
<B>&pound;</B>
</BODY>
</HTML>

A: The Dynamic HTML innerHTML property provides a way of getting and setting the HTML content on a Web page. The value returned by innerHTML reflects the HTML stored by Internet Explorer and will exhibit some differences from the original HTML content. The difference that you've noticed is that all HTML character entities are resolved. An HTML character entity provides a way to represent a character that is outside of the ASCII range that HTML/HTTP supports. Internet Explorer resolves each entity and stores the character in memory, and this is what you get when you access the contents of innerHTML.

Why does Internet Explorer change the HTML content provided by the user? For one thing, HTML is a fairly loose definition that allows a Web author to omit certain end tags and not worry about case sensitivity. This is fine for the author, but once you begin to represent the HTML content as an object model, this needs to be an exact science. The following list includes some of the differences you will see in your innerHTML:

  • Character entities are resolved
  • Missing end tags (e.g. </LI>) are inserted
  • Attribute order is different
  • CSS attributes are converted to upper-case

Use the Source, Luke!

Q: Marcus is probably wondering how to get the actual HTML source for a Web page.

A: The easiest way to do this is to use the Internet Explorer download default behavior. The following example demonstrates how to use the download behavior to display the HTML for the current Web page. Once you have access to the original HTML, you can use a script and regular expression to parse the information you require. Please see the download behavior reference page for more information.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JScript">
function init()
{
  download.startDownload(location.href,onDownloadDone);
}
function onDownloadDone(contents)
{
  download.innerText = contents;
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init()">
<DIV ID="download" STYLE="behavior:url(#default#download)"></DIV>
<B>&pound;</B>
</BODY>
</HTML>

Home Is Where Your Assembly Is

Q: A reader wants to know how to install an assembly into the Global Assembly Cache (GAC) that was downloaded from the Internet in a Windows Forms application.

A: This functionality is part of the new Fusion installation and DLL management technology. The Fusion APIs are currently undocumented and have no officially supported managed wrappers. However, if you look in the FrameworkSDK directory of your Visual Studio .NET installation, and look in the subdirectory Samples\Technologies\Interop\Advanced\comreg, you'll find a file named fusioninstall.cs that provides Interop declarations for all of the key Fusion methods, including InstallAssembly(). You can download the assembly to your local drive using the DownloadFile() method of the System.Net.WebClient class.

Note that none of this will be possible from a .NET component running under Internet Explorer unless users grant your component permissions to access unmanaged assemblies.

Framing Your Events

Q: François complemented us on what we wrote about cross-frame events and also wants to know how to catch the onkeypress event from an IFRAME this way:

<SCRIPT>
ifToto.document.onkeypress = getPressEvent;
 
function getPressEvent()
{
    // this code is executed when I press keys in the iframe, but
    // I can't get the event, keyCode, and so :
    iCode = window.event.keyCode; 
    // generates the error : 'window.event' is null or is not an object
}
</SCRIPT>
 
<IFRAME ID="ifToto"></IFRAME>

A: Know your object model. Know your object model. Know your object model! You are catching an event from your frame, but you are asking the current window object about its event object rather than the iframe's event object. Try changing the one line to:

iCode = ifToto.window.event.keyCode;

In Living Color

Q: Rajiv noticed our reference to the dialoghelper object in our last column, but wasn't sure how to use the color part of it.

A: It is a little confusing because the choosecolor dialog returns a decimal number and we are used to using hexadecimal numbers to specify colors in HTML pages. There is no need to change the return value from the dialog into a hexadecimal. When you set a property, you use the # to specify a hexadecimal value (#FF00CC). Usually, we use names when we don't use the #, but it turns out if you leave out the # and put in a decimal, it just works.

Here is a little sample:

<HTML>
<HEAD>
<TITLE>choose your color</TITLE>
<SCRIPT>
function callcolor()
{
   var myresult;
   myresult = dlghelper.choosecolordlg()
   document.bgcolor = myresult
}
</SCRIPT>
</HEAD>
<BODY>
<OBJECT ID=dlghelper WIDTH="0px" HEIGHT="0px" 
     CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b">
</OBJECT> 
<BUTTON ONCLICK="callcolor()">use color dialog</BUTTON>
</BODY>
</HTML>

The Web Team

Mark Davis is a software design engineer on the Internet Explorer SDK team. Mark originates from England and is currently training to climb the major summits in the Northwest.

Heidi Housten works as a Consultant with Microsoft Consulting Services in Sweden after spending some time in Developer Support and MSDN. It is only a rumor that she moved there to escape the drizzle of Seattle; she really went for the traditional crayfish parties in August.

Jay Allen, a Support Engineer for the Internet Client team in Microsoft Developer Support, longs for the integration of Notepad and Emacs Lisp. What little time is not consumed by his four children is usually spent reading math books, studying Japanese and programming in Haskell.

Tosh Meston is a Web developer on the Outlook Web Access team. He comes to Microsoft with a background in physics and spends his free time reading and perfecting his three-point shot on the basketball court.


The Web Team's Greatest Hits

List of Web Team Topics


  
Show: