Getting Started with

Page Contents

Writing Math/Maths in HTML

Trying to write mathematical notation on a Web page can be quite an tiring experience. Even putting a variable in italics requires the addition of seven extra glyphs: &lti&gtx&lt/i&gt just to get x. When it comes to writting an expression of the form

~y^2 _ = _ 2 ~d ( 1 + ~e ) rndb{ ~x + fract{~d,1 - ~e} } _ - _ ( 1 - ~e^2 ) script{rndb{ ~x + fract{~d,1 - ~e} },,, 2,}

 You'll probably spend all afternoon.

You could use one of the many (excellent) tools to render your expressions as a graphic, which would then be included in your Web page as an image, but this increases the number fo files you have to keep track of, and makes changes very difficult to handle.

provides a solution where you write your mathematics directly into the HTML code, in a simple syntax which is very close to mathematical notation. This has several advantages:

  • All your notation is in one document (the HTML file). You don't need to keep graphic files of each formula or expression you use.
  • The simple syntaxt makes it quick to type in the formulae and expressions - the Web browser then renders the formatted notation on the Web page.
  • As the notation goes seemlessly into the HTML, you can make use of all the features of HTML to page-set your notes.
  • is designed to allow you to make full use of Style Sheets to give your pages a professional format.
  • As your notes are written directly into the HTML document in a simple syntax, correcting and updating them is no problem at all.
  • You don't have to know any JavaScript at all - does the lot for you.
  • is open source freeware so it's to use.


How It Works

provides a JavaScript module to translate your mathematical notation. This module makes use of the Document Object Model (DOM) (hence the name: MathymaDom.js). It comprises of one basic function, called translateDoc(), which is executed on load of the BODY section of the page (see how to achieve this later). The function then analyses the whole document, looking for any DIV belonging to the class "mathyma". Any text in this section is then parsed and the result added to the DOM, so you get fully formatted mathematical notation on your Web page.

To take advantage of on your own Web page, there are some simple steps to follow:

  1. Download the free software to a directory on your PC.
  2. Add a line in the HEAD section of your HTML file to include the JavaScript file, it should look something like this
    . . .
    < script src="MathymaWrite.js" type="text/javascript" > < /script >
    . . .
  3. In the BODY tag add the onLoad directive to call the translateDoc() function:
  4. Add as many DIV sections as you like, with the portion of the page to be translated. (Note that you could put the whole of the BODY content in if you like, headers, tables , the lot.)
    . . .
    < div class="mathyma ">&nbsp
    . . . all text in this section will be translated
    < /div >

syntax is described below, and documented in full over the next few pages.


In a nutshell, does four things to the text it translates:

  1. Replaces certain combination of characters with other (usually untypable symbols). For example :
    a =< b _ <=> _ b >= a
    a =< b _ <=> _ b >= a
  2. Interperets format directives for italics, bold, upperscript, lowerscript and overline, so you can write
    #~v _ = _ ( ~v_1 , ~v_2 , ... , ~v_~n )
    to get
    #~v _ = _ ( ~v_1 , ~v_2 , ... , ~v_~n )
  3. Builds more complex formats from templates. This is for things like fractions, integrals, sums, etc. that require more than one line to write. For example
    fract{~a + ~b,~c - ~d}
    to get
    fract{~a + ~b,~c - ~d}

    You can put template within templates etc., and build up some very complicated formats.

  4. Replaces symbol indicators with the symbols themselves. A symbol indicator is a name preceeded by an ampersand(&) and followed by a full stop (period):
    &alpha. , &beta. , &gamma. &in. &Pi.
    &alpha. , &beta. , &gamma. &in. &Pi.


If you would like to see what can really be achieved using , then take a look at the extensive maths (math) and statistics notes on this Web-site. These cover a wide range of different topics, and apart from being a resource in themselves should give you an idea of what you can achieve with .