When writing technical documents for the web, one of the primary considerations is how to represent the formulas or equations. Design Science's MathType makes it very easy to create the equation visually, then copy it as MathML to paste into your web page. The latest versions of Dreamweaver offers features that make it easy to fine-tune the final look of the page.

This AppNote will assume you have basic familiarity with Dreamweaver 8 or Dreamweaver CS3 (hereafter called simply "Dreamweaver") and MathType 5 or later. We don't assume you are an expert in MathML, but we do assume you have basic familiarity with MathML terminology. The Reference section of our web site has more information if you have further questions. Screen shots in this article were taken while using Dreamweaver 8. Where Dreamweaver CS3 differs significantly, these differences will be noted.

We recommend additional Application Notes and articles as complements to this one:

A Math on the Web Publishing Process
Authoring for MathPlayer and MathML
Authoring Web Pages with MathType and Macromedia Dreamweaver
Working with TeX, LaTeX, & MathML in the MathType documentation

This article addresses these topics:

MathML and Dreamweaver
Required processing instructions and additional statements
Inserting inline equations into a web page
Inserting display equations into a web page
Numbered display equations
Creating and editing a MathML tag library
Converting all the equations in a Word document to MathML

MathML and Dreamweaver

Our previous AppNote described how to use images to display equations in a web page. This AppNote deals with MathML. Recognizing the need to integrate math into web browsers early on, the Worldwide Web Consortium (W3C) defined the initial MathML specification in 1998. In 2001, a new version of MathML was recommended. The advantages of using MathML are numerous, including:

Better rendering quality and print resolution
Better fit with rest of page (including fonts and colors)
Better alignment with the rest of the page
Searchability
Reusability

To incorporate MathML into your web document using Dreamweaver, you will need to do most of the authoring in Code view or Split view. You can use any MathML authoring tool for the equations. For this article we will use MathType with Dreamweaver to create a web page discussing the roots of a quadratic equation.

Note: The screen shots in this article will reflect the appearance of the Windows versions of the products. The Macintosh versions are similar in appearance and capability.

(Click for larger image. Use your browser's Back button to return here.)

Note: Many of the steps discussed below will also apply to earlier versions of the products, but some will not. Since this article only concerns MathType 5 and later, and Dreamweaver versions 8 and CS3, we will not point out differences between these products and earlier versions.

Required processing instructions and additional statements

As our companion AppNote (A Math on the Web Publishing Process) points out, the first step is to make sure your target browser is capable of displaying MathML. Even assuming a MathML-capable browser, there are still some additional lines of code you need to include in your web page to tell the browser what to do when it encounters MathML. These processing instructions and additional statements vary, depending on whether the target browser is Internet Explorer or Netscape. (The Mozilla, Firefox, SeaMonkey and Camino browsers are also capable of displaying MathML. Since these browsers require the same markup as Netscape, and fall into the same category as that browser, whenever we refer to Netscape in this article, we mean all 5 browsers.)

These required processing instructions and header statements are outlined in our companion article, Authoring for MathPlayer and MathML. This article gives several options, but MathPlayer 2 makes the choice easy by letting you author the page as if your only target browser were Netscape. If the page is viewed in Internet Explorer (IE) with MathPlayer 2 installed, MathPlayer transforms the page into one that IE can display. This is done with no additional action on the part of the person viewing the page, other than installing MathPlayer.

A note about filename extensions: Although the extensions .xml and .xht will both work for XHTML + MathML web pages, we recommend saving them with the .xht extension because it's more specific and less likely to confuse your browser and other software on your computer. However, be aware that if you use .xht, you will be unable to edit the file in Dreamweaver in Design or Split views unless you make a few changes. To edit XHT files "normally", follow these steps (note that these are Windows-specific instructions, and the files below may not work on Macintosh computers):

Locate the file extensions.txt. The default location for this file is...

For Dreamweaver 8:
C:\Documents and Settings\{username}\Application Data\Macromedia\Dreamweaver 8\Configuration

For Dreamweaver CS3:
C:\Documents and Settings\{username}\Application Data\Adobe\Dreamweaver 9\Configuration

Note: The folder "Application Data" is a hidden folder. If this doesn't show up in Windows Explorer, click on Tools > Folder Options > View, then check the option labeled "Show hidden files and folders". Click OK.

Open this file in Notepad or other text editor. The first list of file extensions applies to All Documents. The second list applies to HTML Documents. Add a new entry XHT to each of these 2 lists, being sure to separate each list entry with a comma. Save and close the file.

Note: This is the list of file extensions you see at the bottom of Save and Open dialogs. You can place XHT anywhere in these lists. This is how it would look if you placed it near the beginning of the lists. Note we've also added our own line to extensions.txt for XHTML Documents:

Download these 5 files, and save them in the folders indicated. NOTE: You will get a warning message asking if you want to replace the existing file with the new file. You need to answer "Yes", but if you want to be safe, you can first back up the existing file by re-naming it. For example, rename documenttypes.xml to olddocumenttypes.xml or documenttypes-old.xml.
1. documenttypes.xml. Right-click, "Save Link As..." or "Save Target As...".
  For Dreamweaver 8, save it here:
  C:\Program Files\Macromedia\Dreamweaver 8\Configuration\Strings
  For Dreamweaver CS3, save it here:
  C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\Strings
2. Default.xht.
  For Dreamweaver 8, save this file in the folder
  C:\Program Files\Macromedia\Dreamweaver 8\Configuration\DocumentTypes\
  NewDocuments
  For Dreamweaver CS3, save it here:
  C:\Program Files\Adobe\Adobe Dreamweaver CS3\ configuration\DocumentTypes\NewDocuments
3. MMDocumentTypes.xml and MMDocumentTypeDeclarations.xml.
  For Dreamweaver 8, save these files in the folder
  C:\Program Files\Macromedia\Dreamweaver 8\Configuration\DocumentTypes
  For Dreamweaver CS3, save them here:
  C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\DocumentTypes
4. documenttypedeclarations.xml.
  For Dreamweaver 8, save this file in both of these folders:
  C:\Program Files\Macromedia\Dreamweaver 8\Configuration\DocumentTypes
  C:\Program Files\Macromedia\Dreamweaver 8\Configuration\Strings
  For Dreamweaver CS3, save this file in both of these folders:
  C:\Program Files\Adobe\Dreamweaver CS3\Configuration\DocumentTypes
  C:\Program Files\Adobe\Dreamweaver CS3\Configuration\Strings
5. If you have installed Dreamweaver to a folder other than the default folder, the folders to which you save the above files will be different.
If you follow the steps above, you will be able to edit XHT files in Default, Split, or Code view. In addition, there will be a new entry on the New Document dialog that you can use to create new XHTML + MathML documents. This will create a new document with the required processing instructions and additional statements already installed.

Dreamweaver 8's "New Document" dialog.
Click for screen shot of Dreamweaver CS3's dialog.

NOTE: Performing the steps in item 3 above won't add "XHTML + MathML" as a "Create New" item on the Dreamweaver welcome screen. In order to create a new XHTML + MathML document, you must click "More" on the welcome screen, which will bring up the New Document dialog you see above. You must verify the "Document Type (DTD)" dropdown is set to "XHTML + MathML". If you want, you can set the new document default DTD by clicking "Preferences".

Inserting inline equations into a web page

We will discuss inserting inline equations before we consider display equations. An "inline equation" is an equation that flows with the text of a paragraph, and looks and acts like part of the paragraph. A "display equation" is an equation which is on a line by itself, usually centered. They are sometimes numbered. In web documents using MathML, inserting inline equations is easier than inserting display equations.

To insert an inline equation into your document:

Note: If you will be using our sample document, go ahead and begin the document on your own, up to the point where we need to insert our first equation. This will be after the word "form" in the first sentence.

In MathType, create the equation y = ax² + bx + c. We need to select a translator before we go on.
In MathType's Preferences menu, click Translators.
In the Translators dialog, there are at least 8 translators to choose from. We won't go into the differences between the translators here. The one you should choose is "MathML 2.0 (namespace attr)". Notice there are two check boxes below the word "File". Check these as well. Click OK.
Since this is an inline equation, we need to set the Inline Equation property in MathType. Select Format > Inline Equation.
MathType performs all translation operations when you copy an equation to the clipboard. You've already created the equation, so select it either by dragging the mouse over the equation or by choosing Edit > Select All, and copy it to the clipboard (Edit > Copy).
When MathType translates an equation, it will verify the translation with a Status Bar message. If there are any errors in the translation, it will show an error dialog.
In Dreamweaver, make sure your cursor is in the document where you want the equation to go, then paste the equation. Important: You must paste the equation into Code View (or into the Code section of Split View).
Note the section of the MathML markup beginning with the tag <annotation encoding='MathType-MTEF'>. This is not MathML. It is MathType's own internal representation of the equation, and is optional. By including it, you allow readers to copy equations from your web pages and re-use them in documents of their own. If your readers are using IE + MathPlayer, they can open the equation in MathType simply by clicking the right mouse button and choosing the "Open with MathType" command.

Inserting display equations into a web page

The only reason MathML display equations are more difficult to insert than MathML inline equations is because of the center alignment and the equation numbers that are sometimes included. There are basically three methods of center-aligning an equation:

Inserting the equation into a paragraph of its own, with center alignment on the paragraph.
Inserting the equation into a table, with center alignment applied to the table cell containing the equation.
Using a pure-CSS approach

The last method has the disadvantage that it's more difficult to understand if you don't know CSS, but has the advantage that it produces a more "accessible" page, in terms of being able to be more easily read by screen-reading software, and navigable in a pure-text browser. This is the only method we will discuss in this article. The first and second methods are discussed in separate AppNotes.

To insert a CSS-centered display equation into your document:

Either insert the applicable styles into the head of your document or into an external style sheet. We will use an external style sheet with these styles added:

div.pos { width:100%; margin-bottom:-18pt; } /* full screen width */ p.dispeq {text-align:center} /* aligns to center of the page */

To insert the display equation, create a <div> with a paragraph inside, assigning the above styles to them:

<div class="pos"> <p class="dispeq"></p> <br /> </div>

To insert the equation, paste it inside the paragraph, making sure to de-select the Inline Equation property in MathType (Format > Inline Equation).
If you're working with our sample document, continue typing and inserting equations until it looks similar to the sample. Be sure to use an .xht (preferred) or .xml extension when you save the document, since we're authoring a "universal" document (i.e., displayable in Netscape and IE + MathPlayer).

Actually, we'd like this last equation to be numbered so we can refer to it in the document's text. The next section will cover numbering.

Numbered display equations

You don't necessarily need to number every display equation in your document, but if you need to refer to a display equation in your document's text, the best way to do it is to number the equation.

To insert a numbered display equation using CSS:

To add a numbered equation, we follow exactly the same steps as we did in the section above, but we need to add one more style and one more line to our code.
Add this style:

p.right-number { float:right; margin-top:-28pt; } /* floats content to rhs, and doesn't affect the other <p> tag */

Add this line inside the <div> between the <p> and <br> tags:

<p class="right-number"><a name="eqn11" id="eqn11"></a>equation 1.1</p>

Go ahead and add the next paragraph to the document, making sure your new paragraph begins after the </div> that contains your equation. Now your document should look like this. Notice that our sample document doesn't use MathML when styled text will do, as in "x = –2 when y = 0". Whether or not this is a good idea will depend on your document and your readers. In cases where the math won't need to be interpreted by a computer algebra system or converted to content MathML markup, using styled text is a good idea because it produces less code, making a smaller, faster-loading document.

Creating a snippet for numbered display equations:

Dreamweaver lets you save often-used chunks of code as a "snippet". Since we will be inserting several numbered display equations, both in this document and in the future, creating a snippet will be a huge time saver. You can use the same snippet for an unnumbered display equation, or you can create a separate one -- just don't include an equation number when you use it.

In the Dreamweaver Files panel group, make sure the Snippets tab is showing. Click on the New Snippet icon.
In the Snippet dialog, make sure "Insert block" is selected, and enter the information below. Click OK.

For the next numbered display equation you need to insert, all you need to do is to go to the Snippet tab on the Code panel group, find the snippet you just saved. and either double-click it (Windows) or drag it to where you want it in your document (Win or Mac).
To enter equations into this code snippet, paste the MathML code block immediately prior to the first </p> tag. Enter the equation number (if any) immediately prior to the second </p> tag.
Make sure the referenced styles are included either in an external style sheet or in the head of the document.

Creating and editing a MathML tag library

As good as MathType is at creating MathML markup, there is no MathML authoring tool that can accurately guess 100% of the time exactly how you want your finished page to look. For this reason, you will no doubt have to manually add or edit MathML elements or attributes at one time or another. Dreamweaver has built-in "tag libraries" for most of the markup languages you will be likely to use — HTML, ASP, PSP, and others — but it doesn't include a tag library for MathML. A tag library is helpful because it helps maintain proper syntax, and knows which attributes are valid with each element.

You can create or edit a Dreamweaver Tag Library by selecting Edit > Tag Libraries. We have created a MathML Tag Library that you can download and use with Dreamweaver by following these steps (Windows only):

Download the tag library (mathmltags.zip).
The file mathmltags.zip contains 36 files. Extract the zip file so that the files are unzipped to a folder named MathML in this location...
For Dreamweaver 8:
C:\Program Files\Macromedia\Dreamweaver 8\Configuration\TagLibraries\MathML
For Dreamweaver CS3:
C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\TagLibraries\MathML
Also in the \Configuration\TagLibraries folder is a file named "TagLibraries.vtm". This file contains information about all of Dreamweaver's tag libraries. Open this file in Notepad or another suitable text editor. Open the file "MathMLTagLibraryInfo.txt" (from step 2 above). Copy the entire contents of this file and paste into the contents of TagLibraries.vtm. The pasted data should go at the end of TagLibraries.vtm, immediately above the </taglibraries> tag. Save and close the file TagLibraries.vtm.
When you re-start Dreamweaver, your MathML Tag Library should now appear at the bottom of the list of Tag Libraries when you open the Tag Libraries dialog, but you don't need to open the dialog in order to use the library.
To use the MathML Tag Library, simply enter MathML elements or attributes into the Code view of your document. For example, if we have an existing equation y = 2x, and we want the 2x to be blue, we could "wrap" an <mstyle> around the 2x, and apply an attribute of mathcolor='0000FF' to the <mstyle>:
1. Select the elements containing "2x". Click the right mouse button and choose "Insert Tag":
2. When the Tag Chooser opens, click on "MathML Tags" and "mstyle". Click Insert, then click Close.
3. Click just before the closing bracket on the <mstyle> tag and press the spacebar. The attribute dropdown box appears. Choose mathcolor, either by highlighting it and pressing Enter, or by double-clicking it with the mouse. From the color palette that pops up, choose the color you want.

Converting all the equations in a Word document to MathML

If you have an existing Microsoft Word document that you are planning to put on the web, one thing you should consider is using the Export to MathPage feature in MathType 5 and later. If you would rather do the HTML editing yourself, there is still an attractive feature available in Word's MathType menu (or the MathType tab on Word's Ribbon, if you're using Word 2007). By using the Export Equations feature, you can convert all the equations in your Word document into MathML for use in your web page. Refer to the MathType documentation for full instructions.

We hope this AppNote has been useful to you. If you would like to see similar AppNotes in the future, or have suggestions for improving this article, please e-mail our Director of Training, Bob Mathews.

- top of page -