Wednesday, October 29, 2008

svg mathematical equation

Ok, it's done: mathematical equations generated dynamically and displayed as svg graphics. Only using the standard Python library ... and one "tiny" additional download: matplotlib. Here's the first result (saved as a "hard-copy"; you may have to download the page and reopen it locally using Firefox.)

Note: do not bother looking for the files in the "py-fun" repository where I had the first release of docpicture. I will clean up things a bit and do a new release from a different place.

As usual, comments & suggestions are welcome.


Ruud Steltenpool said...

Why download and open?

Why not just put it right in this blog?
If makes this impossible, complain !!

André Roberge said...

I tried embedding it, but the simple attempt I did was unsuccessful.

Ruud Steltenpool said...

Maybe use SVG fonts for accessibility?
For copy/paste and readability purposes.

Anonymous said...

I was about to roll my eyes at the thought of someone else taking on the problem of rendering mathematical functions, after Donald Knuth spend years solving the problem correctly the first time in the 1970s... and then I thought: "Hey, wait! Are those the Computer Modern fonts I see staring out of this SVG image in my web browser?"

Are they? Does matplotlib somehow have TeX "inside", so that we're benefitting here from all the work Knuth did in the 1970s to create a perfect mathematical typesetting system?

Michael Droettboom said...

It's rewarding to see this! We'd happily accept a patch to matplotlib based on your work to make writing SVG math expressions more convenient.

matplotlib contains a Python "port" of a subset of the TeX math layout algorithms. I wrote it with the book "Computers and Typesetting, Volume B: TeX: The Program" (which is basically the annotated source code of TeX) sitting on my desk. There was no way I was going to improve on what had already been worked out there.

matplotlib is able to use the Computer Modern fonts (converted to TrueType), the newer STIX mathematical fonts, or any arbitrary TrueType font with a Unicode mapping (though few general-purpose fonts have all the necessary characters).

@stelt: Until SVG fonts are widely supported (i.e. in Firefox), that approach was a non-starter for us. Instead, matplotlib embeds the character outlines as paths in the SVG. Certainly SVG fonts will be a better option in the future when they are practical -- but it's a bit of a chicken/egg problem right now.

Michael Droettboom said...

Probably also worth mentioning here:

We had a Google SoC project this year to extract the math rendering engine from matplotlib and make it more standalone (and replace some of the compiled extensions with pure Python where possible). Unfortunately, the student got a "real job" just a few days into it, so it never got done. But I have detailed notes and a suggested plan of attack if anyone is interested in taking this on...

André Roberge said...

@mdboom: I'm not sure I could contribute much of a patch to matplotlib; I just did a quick hack, without diving into the source of matplotlib at all.

I'd be interested to see your notes about extracting the TeX engine. While I doubt I'd be able to do this quickly, given that you had planned a whole SoC project for it (and I'm only working on this as a hobby, a few nights a week at best), I might be eventually able to do it, or get enough of a start to help a student complete it next summer.

Anonymous said...

is this available? I would love to be able to use it to display an equation in a Traits based application

André Roberge said...


As I wrote in a previous comment, this is just the result of a quick hack, using matplotlib. If you search for "docpicture" on, you will find the code I used. Perhaps after the summer is over someone will have extracted the relevant code from matplotlib as a Google Summer of Code project. I'm just guessing, as I have no connection to the matplotlib project.

Yinglai said...

How did you achieve this?