This tutorial is part two in a two-part series on using MathType with Expression Web to create technical web documents. If you haven't worked through the first tutorial yet (also known as the Basic tutorial), we recommend you do so before you continue with these advanced techniques.

This tutorial addresses these topics:

Inserting numbered display equations

An advanced method for inserting inline equations into a web page

Inserting 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. The easiest way to include a numbered display equation into your document is to insert a 1 row, 3 column table. We'll go through the steps below to do this, but be aware of the fact that there may be a better way to do it if enhancing accessibility is an issue. Using tables results in a page that is readable by screen-reading software such as JAWS, but is a bit cumbersome for screen readers to navigate, and difficult to listen to. Using CSS to properly position the equation and its corresponding number may be better, accessibility-wise, but we don't cover that method here.

To insert a numbered display equation using a table:

If you completed the Basic tutorial, your document should look like this. If you haven't completed the Basic tutorial, either create the document as a new page in Expression Web, or save the document linked in the previous sentence, and begin working with that document for the steps below.
After the display equation at the end of the document, press Enter to begin a new paragraph. Type the following two paragraphs of text:

We can see that x = –2 when y = 0. This occurs twice, so we call it a double root. It is a single distinct result, but still considered as two roots.

What happens when the equation will not factor over the set of real numbers? Consider

Your insertion point (i.e., cursor) should be immediately after the word Consider.
Select Insert Table from Expression Web's Table menu. In the Insert Table dialog, dimension your table so that it has 1 row and 3 columns. Leave the other options at their default values, as shown here, and click OK:

Right-click in the left-most cell of the table. (Hereafter, we'll refer to the cells as cell 1, cell 2, and cell 3, from left to right.) In the context menu that pops up, select Cell Properties. (You don't have to do this for every display equation -- only the first. Just follow the steps carefully.)

We don't want to change anything for cell 1 except width. Click the box labeled Specify width, and type 10 in the box below. Click the radio button labeled In percent. Click OK.

Open up the Cell Properties dialog for cell 2. Set Horizontal alignment to Center and Vertical alignment to Bottom. Set the width to 80%. Click OK.

Set the Cell Properties for cell 3 as follows: Horizontal alignment to Right, Vertical alignment to Bottom, and width to 10%. Click OK.

Now we need to save our empty 3-cell table as a Expression Web "Code Snippet", so we can insert it easily and already-formatted next time.

In the Expression Web Tools menu, select Page Editor Options.

Click on the Code Snippets tab and click the Add button.

Give your snippet a Keyword and a Description. We recommend dispeq and Numbered display equation, respectively.

Type the following code in the Text box. You can copy this code and paste it in the box if you want:

<table cellpadding="0" cellspacing="1" width="100%"> <tr> <td width="10%"> </td> <td align="center" width="80%" valign="bottom"> |</td> <td align="right" width="10%" valign="bottom"> </td> </tr> </table>

Click OK, then click OK again to close the Page Options dialog. We explain how to use this Code Snippet in step 9 below.

In the table we inserted in step 4 above, click in the middle cell and insert the equation
y = x² + 9. (Create it in MathType, save it as a GIF, and insert it into the table as before.) Click in the right cell and enter the number -- (1) in this case. Your document now looks like this.
To continue with the text of your document, simply click in the white space below the table, and continue typing.
To use the Code Snippet for your next numbered display equation, you'll need to be either in Split view or Code view. Click in the code where you want the table to go. This will most likely follow a paragraph, so look for the </p> tag that closes out the paragraph before the equation. Press Ctrl+Enter and choose the Code Snippet dispeq from the menu that pops up.
If you're in Code view, switch to Design view. (If you're in Split view, simply click on the table in the page design portion of the display.) Your cursor should be flashing in cell 2, ready for you to insert the equation.

Tip: Probably you're not going to number an equation unless you need to refer to it in the text of the web page. In such a reference, why not use Expression Web to assign a named anchor to the equation number (or to the equation itself), then hyperlink to the anchor? This gives your reader a convenient way to see the equation you're referring to, even if it's a screen or two away. The easiest way to insert a named anchor is to use the keyboard shortcut Ctrl+G or click on Bookmark in Expression Web's Insert menu.

An advanced method for inserting inline equations into a web page

This method takes advantage of Expression Web's support for Cascading Style Sheets, level 2 (CSS2). If you use this method, it is important to realize that not all browsers support CSS2. Netscape 6.0 and later (including Mozilla, Firefox, SeaMonkey, and Camino), Internet Explorer 4.0 and later, Safari 1.0 and later, Opera 5.0 and later, and AOL 4.0 and later all support CSS2. Earlier versions of these browsers do not support CSS2. Browsers not listed may or may not support it. If you use this method and your pages are viewed with a web browser that does not support CSS2, your equations will not be adjusted vertically at all.

Warning: You may mix the basic and advanced methods for inserting inline equations in the same document, but you should not employ both of these methods on the same equation, as the results will be unpredictable and will vary by browser.

If you completed the above section on inserting numbered display equations, and have not clicked below the table, do so now. Type this text: From equation (1) it is clear that when . (Include the space, but do not include the period.)
Create this equation in MathType, but do not insert it in your document yet:
In MathType's Preferences menu, click on Web and GIF Preferences.
In Web and GIF Preferences, we recommend for now keeping the Bitmap resolution at 96 dpi (this is discussed in the Basic tutorial), Color at its default setting, and Smooth edges (anti-aliasing) and Transparent unchecked. (See the MathType User Manual for further discussion on these settings.)
The section of this dialog that is most important to us at this point is the bottom section. Click the checkbox next to Copy HTML/text to clipboard on GIF file save.
Our example file is named example.htm and our GIFs are saved in a folder titled example_files. With that in mind, change the Text to copy: to read thus (changed item in red):

<img src=example_files/$(URLFileName) height= $(HEIGHT_PX) width=$(Width_PX)>

Warning: It's important that you maintain the correct relative path in the <img> tag, otherwise your equations won't display in your web page. For your files, replace example_files/ with the name and path to the folder containing your equations.

With the cursor just inside the closing bracket [and after (Width_PX)], press the spacebar and type this text: style="position:relative; top: . Click on > to the right of Paste Variable.
You'll see a long list of items that can be inserted into the <img> tag, and in the last section, you'll see several items beginning with the words Baseline in... Click on Baseline in points.
Finally, insert a double quote mark immediately before the closing bracket, which should be where your insertion point is after step 8.
Your Web and GIF Preferences dialog now looks like this:

In the MathType File menu, save your equation, making sure to save it as a GIF. When you save the equation, the block of text in your "Text to copy" box (above) is on the clipboard, ready to be pasted into your document.
To insert the new equation into your document, click where you want the equation in Code view (or in the code section of Split view), and paste the contents of the clipboard (Ctrl+V).
Save the file and view it in your browser. It should look like this.

See if you can complete the sample document so that it looks exactly like this. Since the first inline equation was aligned with middle alignment, you may want to go back and align it with relative positioning as described in this tutorial. Remember, we didn't apply any text formatting, so you may want to format your text so that it looks similar to your equations.

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

- top of page -