Math Equation Editor in C#

Figure 1 - The Math Equation Editor with several different equation examples

Well its been a good summer so far. Even in New York City where its usually broiling, the weather has been nice. I picked up this book in Barnes & Noble called The Millenium Problems written by Keith Devlin. The book summarizes 7 challenging problems that the Clay Mathematics Institute is offering one million dollars if you can solve anyone of them. These problems are judged to be extremely difficult, some which have been brewing for a couple of centuries (the mystery of primes for example). I didn't really actually expect to solve any of these problems, but it made for some good beach reading. As I was browsing the book, a strange question popped into my head. How do the authors or publishers print the mathematical formulas you find inside the book? I guessed that there are some tools out there specifically for typing math formulas.

Further researching uncovered that Microsoft Word has an Equation Editor that is pretty good. (You can insert an equation as an object and edit using the many buttons provided.) This tool takes a little bit of a learning curve and requires you to remove your hands from the keyboard.

The Equation Editor I created in C# allows you to create a few simple equations using the keyboard. With the editor you can open and save files of your equations. The editor also allows you to print your equations to the printer or save the equations to a bitmap to insert into a Word or HTML document.

Editor Operation

The editor works as follows:

All letters, numbers and obvious symbols work as you would expect. If you type a letter or number, or hold down the shift key, you get the expected result. Holding down the control key, gives you the Greek symbols.

The control key + Shift also gives you some additional mathematical symbols. Most of the symbols are mapped to the Symbol font.

If you hold down the Alt Key and type a letter or number, you get a subscript. Holding down Alt and Shift gives you a superscript.

There are two additional modes included in the editor. You can enter divide mode by hitting the forward slash ('/') key. By using the left arrow key, you can force the current symbols you typed in to go in the numerator. Then type additional numbers to go in the denominator. Hitting escape lifts you out of divide mode and to the end of the fraction. Its not as intuitive as it could be, but hey, this was a two day effort.

There is also a square root mode. If you hit the Control key and the forward slash key, the square root sign will appear. As long is you continue to type, a line will be drawn above the encompassed numbers. Hitting the escape key escapes from the square root mode.

Inconveniences

As simple as this editor seems, you can really cover a lot of equation editing that would be next to impossible, say, in wordpad.exe. There is a little bit of kludgeness that may take some getting used to, but it gets the job done. For example, there is no mouse control. You can backspace to undo your last symbol as well, but you can't insert things in between characters.

UML Design

The UML design of the Math Editor is fairly simple. Most of the functionality is contained in the forms and encapsulated inside the key press events. The Symbol class allows you to keep all the relative information about a symbol, and the CharCursor class provides a blinking cursor so you can see where you are typing.

Figure 2 - UML Design reverse engineered using WithClass

Most of what the program does is shown in the UML Sequence diagram Figure 3 below. The user presses a key or combination of keys, and a new Symbol is created based on that combination. The symbols font, position, and style information is stored.

Figure 3 - UML Sequence Diagram showing Key Press Handler (drawn in WithClass)

Painting the Symbols