Notes on using CodeCogs Equation Editor

Posted by Greten on 09 Jan 2012 under Tools

In my earlier blog post, I discussed the different ways teachers and content developers of educational website can produce equations. The latter part of the post discussed how to produce equations as images that can be embedded to your web pages but I didn't give exact details on how to do it. In particular, I mentioned CodeCogs Equation Editor as one of the efficient ways of producing equations. As I said, using it is very much straightforward but these additional tips of using CodeCogs Equation Editor will definitely be useful.

You can access CodeCogs Equation Editor here.

Image file format

The CodeCogs Equation Editor (hereinafter will be referred to as CCEE) can produce equation images in GIF, PNG and SVG format. Of these three image format, I would say that the PNG is the best to be embedded on web page as it allows semi-transparency enabling it to blend well with the background. SVG actually has great potential and would probably be better than PNG for presenting equations in the future. Unlike PNG and other image files, the image quality does not change when you reduced or increase the dimensions of the image. However, compatibility of browsers to display SVG depends mostly on some external plugin and some browsers have only partial support for SVG. I believe SVG will be better in the future but for now, I would recommend the use PNG. GIF is an older graphic format that supports full transparency but not partial transparency. Thus, it will not blend with your background as well as PNG.

Shown above are two equations (Faraday's equation, integral form) generated by CCEE. The one on the left was generated as PNG file while the one on the right as GIF file. Both were generated at 10 pt and 100 resolution. Against white background, there's no apparent difference.

Same images as above but this time, imposed on a colored background. You can see that the PNG format (left) fits smoothly with a different background, while the GIF format still have some white pixels along the edges.

Other formats in which you can export the equations generated by CCEE are PDF, SWF and EMF. However, I do not see the point of having an entire Adobe Acrobat file or Flash presentation containing nothing but a single equation. EMF, on the other hand, is supported only by Windows and would run only in Windows-based applications.

Image size and resolution

Aside from file format, CCEE also allows you to select the font face Sans Serif, Verdana, Comic Sans, Computer Modern and Helvertica. It also allows you to select font size and resolution, as well as background color including transparent background.

However, in case of GIF and PNG, the output resolution simply makes the image dimensions larger just like in font size (png and gif discard ppi information), e.g., a 10 pt and 100 resolution image is almost the same as 5 pt and 200 resolution image. Both font size and resolution are discrete set of numbers and thus, you cannot select exact values. The output resolution has no unit so I am not certain if it corresponds to dpi (dots per inches) or ppi (pixels per inches) or something else. Note that dpi and ppi are different since the former is has more to do with printer output.

The equations are nearly the same size. Both are in PNG format. The difference is that the one on left was generated at 10 pt and 100 resolution while the one on the right at 5 pt and 200 resolution.

The size of the font as seen in word processor (I used Open Office), web page (CSS styling) and as generated by this web application varies. In my experiment, a 10 pt at 80 resolution is closest to the 10.5 pt in Open Office. I formatted a 10.5 pt Verdana M in OpenOffice and compare its screen shot at 100% zoom using GIMP. The height of the 10.5 pt M from Open Office is 10px, same as the M generated by CodeCogs at 10 pt 80 resolution and png or gif output.  However, I personally prefer 100 resolution, which outputs 10pt verdana bold M at 12 px in height, as tall as the screen shot of 12pt Verdana M from Open Office. I prefer it because you can easily double or halve its dimensions using the resolution (there are 200 and 50 resolutions but no 160 or 40 resolutions in the drop down menu).

80 resolutionM 10.5 pt screen shot from Open Office WriterM 10 pt 100 resolutionM 12 pt screen shot from Open Office Writer

The four letter M above are not text but images. The first M from the left was generated using CCEE configured to 10 pt and 80 resolution. You can see that this is about of the same size as the second M on its right. The second M is a screen shot of Open Office Writer formatted 10.5 pt. The third slightly bigger M was also generated by CCEE at 10 pt and 100 resolution. The last M on the right end, which is about of the same size as the third M, is a screen shot of Open Office Writer formatted at 12 pt. All M's are formatted with Verdana font face.

Using in your website

This is not Codecogs logo. This is my own creation using a public domain gear clipart on which an integral sign is imposed. It's only use is to serve as icon for this articleYou can actually embed CCEE in your website and its developers allow it. However, the version that can be embedded does not seem to have download image file option. It seems to be useful if you want to put equations on your site using html code that calls the downloadable script without turning them into image. I personally don't have any use for an embedded equation editor yet so I haven't thoroughly studied this feature. For now, I'm content in using it to generate equations in image format and use the generated images for my web sites and web-based learning objects.

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