Writing equations for your website

Posted by Greten on 06 Jan 2012 under Tips

As a teacher, you figured out that one of the most efficient ways to help your students is by setting-up a website wherein they can review your lessons from time-to-time. For most academic subjects, texts and pictures are usually enough to convey the lessons. Multimedia elements like music, videos and interactive activities are great add-ons that will definitely help in understanding. However, text and pictures are the most basic and most essential.

In mathematics and sciences however, it would be very difficult to convey learning without using their second language, the mathematical equations.

The web was not readily made to show equations. For that teachers and instructional designers who need to create websites end up with the following solutions:

  1.  Use asterisks, slash and caret.
  2. Use images to show equations in their standard form

In the following sections, I will explain how these two methods are implemented.

Using asterisks, slash and caret

The former is familiar to computer programmers even though their main purpose is to tell the program what to do than to tell readers how equations should look like. Let's say they define variables w = 2, x = 3, y = 4 and z = 5. Suppose they want the program to find the product of y and z, divide it by w and raise it to the xth power. They will encode something like output = ((y*z)/w)^x and the program will show 1000. Spreadsheet programs such as Lotus, Excel and OO Calc also accepts the symbols asterisk (*), slash (/) and caret (^) for multiplication, division and exponentiation respectively.

Science and math teachers who would like to maintain websites to help their students, but are not familiar with equation building tools would usually rely in this way of conveying equations. The symbols are readily accessible to keyboards, can be typed in just one line, and most students can readily understand them from some of their computer classes about programming and spreadsheet. It also makes learning programming easier as the students are readily familiar with this form by reading the science and mathematics websites employing this method.

However, the disadvantages of this method are the extensive use of parentheses and that the students being confused as to why their teacher's science/math websites are using different symbols from the one being used in the class and in the textbooks.

Let's say we use Newton's Law of Universal Gravitation:

Newton's Universal Law of Gravitation

In using asterisks, slash and caret method, this equation will look like:

F = (G*m1*m2)/(r^2)

The students might ask what happened to the big fraction bar.

Using images for equations

The second method and the one that can better serve the need to display equations in web pages is by displaying equations as images. Being images, the characters and symbols seen in the equation can be positioned anywhere in the canvas to reflect the actual appearance of equations as seen in textbooks and other printed reference materials.

writing equations for websiteThere are two ways I can create equations as images for posting on the web.

1. Create an equation as an object embedded on a word processor (e.g., Open Office Writer, Libre Office Writer), get a screenshot, open or paste the screenshot to an image editing software (e.g., GIMP), select the equation part using the rectangular select tool, crop the image to selection, and save it as JPG or PNG.

2. Use CodeCogs Equation Editor, a free-online tool that generates equations as images.

These two methods have their advantages and disadvantages. The advantage of taking screenshots from word processor is that you can adjust the relative size difference of the numbers/variables/expressions in the main line and the ones in superscripts or subscripts. You can have a 10 pt mainline variable and 8 pt superscript, or a 12 pt mainline variable and just 6 pt superscript. You also have virtually unlimited choices of font face (your choice is actually anything that is in your computer, and you can download more for free from the internet).

The disadvantage of taking screenshots from word processor to obtain equations is that you need to have predetermined background and stick to it during the life of your website. If say, you decided that the background of your website is white, then you should use white background on the word processor. If you decided to change to blue background later, the equations will retain the white background. While you can use image editing software to edit the background of these equations, it would be too much work if your website has grown so large it has way too many equations.

The advantage of CodeCogs Equation Editor is that you can save the equations as PNG format, allowing you to retain transparency and semi-transparency. When you change the background color of your website later, the equations will still fit-in. On the other hand, its disadvantage is that the relative size of the main line text and the superscript.subscript has been determined already (as of the writing of this post, I'm not sure if this will remain true in months or years to come). It is also limited to just five font face.

Using CodeCogs is pretty straightforward and easy to learn. Similar to OpenOffice Math and LibreOffice Math. The icons for spacing, operation symbols, functions, set notations, etc are accessible by clicking buttons, with related mathematical operations, functions and symbols grouped together. I suggest you try using CodeCogs Equation Editor now to familiarize yourself and save it in your bookmark.

Last updated on 09 Dec 2018.

Share your thoughts

* Required. Your email will never be displayed in public.

Instructional design and educational technology for effective learning