Well, little we knew of how difficult it is to get the event information you need due to various browser incompatibilities. We had to do some research on the topic and would like to share our findings here for future reference.

First of all, Peter-Paul Koch has an interesting blog entry with event compatibility tables for various browsers. There, you can already see that the key events are not all cross-browser compatible. As we are especially interested in these events, Jan Wolter’s JavaScript Madness: Keyboard Events proved to be an extremely valuable resource.

Based on the above articles we decided to use the keydown event to handle all special keys, which means keys that do not produce a character, i.e. Enter, Backspace, the arrow keys. To handle character input we use the keypress event. The keypress event object has a property which holds the character that corresponds to the pressed key or keys. This property has different names in different browsers but is available in all of them. An additional difficulty is the fact that some browsers do fire keypress events for special keys and some do not.

For jQuery, there exists a plugin called fix_events, which can be used to normalize event properties. Currently we do not use this plugin because our use would be very limited. Instead we incorporated the compatibility checks within our code.

Spidermonkey offers a command line interpreter and the ability to call scripts like js.exe -f "script1.js" -f "script2.js" -e "run_this();". Unfortunately, both of these features are not available for Windows cscript.exe, cscript can only execute one script file and terminates after it is done.

Koby Kahane has created a workaround to add command line interpreter abilities to cscript (although his code did not work for me). In order to be able to load different script files and execute commands using a single command, we wrote a litle python script which uses the same interface as spidermonkey’s js.exe, create a temporary file, and call cscript with this file.

Here is the code (no error checking) msjs.py:

import sys, os
import subprocess

def main(argv):

    tmp_filename = 'msjs_tmp_file.wsf'
    includes = ''
    executes = ''

    for i in range(len(argv)) :
        if argv[i]=='-f' :
            includes += '\n' % argv[i+1]
        elif argv[i]=='-e' :
            executes += '\n\t%s\n\n' % argv[i+1]

    code = '\n%s%s\n' % (includes, executes)

    tmp_file = open(tmp_filename,'w')
    tmp_file.write(code)
    tmp_file.close()

    subprocess.Popen('cscript.exe '+tmp_filename).communicate()[0]

    os.remove(tmp_filename)

if __name__ == '__main__' :
    main(sys.argv[1:])

The use of a real temporary file using the tempfile module is not possible, as in Windows you cannot open the temporary file a second time, which cscript would have to do.

Let us assume that we have a file add_def.js

// Provide 'print' command in Windows scripting - cscript.
if (typeof WScript == 'object'){
    function print(str){
        WScript.echo(str)
    }
}

add = function(a,b){return a+b;}

Now, we can do python msjs.py -f "add_def.js" -e "print(add(2,3));" and it will result in the same code being called by cscript as by js.exe for the same command. The generated temporary file looks like this:

<job>
<script language="JScript" src="add_def.js"/>
<script language="JScript">
	print(add(3,4));
</script>
</job>

We decided not to use his implementation of the split method, because we do not want to rely on third party code which we have to supply with our distribution and which might break with new browser versions coming out. Instead, we will use a work-around only containing JavaScript code which is consistent among different browsers.

We decided to use test driven development for writing cross-browser code for these tasks. A set of tests is designed, which consist of input parameters and the expected output a function should return when called with the given input parameters. Whenever our function does not give the expected output an error message is printed and we know that the code is not correct.

The test framework then consists of the function X that we want to test, the tests, and a test runner function which runs the tests on X and compares the actual output with the expected output. To do this in an automated fashion, we call the js file with a JavaScript interpreter. For Windows we use SpiderMonkey (Mozilla’s implementation of JavaScript) and the build-in Windows Script Host.

After installing SpiderMonkey, we can call our script with “js X.js”, to use the Windows Script Host run “cscript X.js”

This setup allows us to test our code on Mozilla’s and Windows’ JavaScript implementation using the same test data on the command line.

I’m very please with what he’s done, and am interested in producing an online version of Scott Pakin’s Comprehensive LaTeX symbol list (view as PDF), which has several thousand symbols.

In most situations, there will be a subset of relevant symbols, which will depend on what is being authored.  Many symbols are required only in special areas.

The jQuery Autocomplete Mod found at http://www.pengoworks.com/workshop/jquery/autocomplete.htm looks promising but it requires a few changes. Ideally the plugin should work for text in a textarea, suggesting commands for the last typed characters just underneath the cursor. The plugins I have found so far were designed for input fields of type text and used the whole value of the field to query the database of known words.

I will continue looking for an existing plugin with the required features, but might have to modify one of the existing ones to fit my needs.

As part of the Google Summer of Code (GSOC), I will be mentoring Christoph Hafmeister’s project to create an OnLine TeX Editor. This will be written in JavaScript, and will use the public MathTran server to provide TeX typesetting as a web service. It will offer something close to instant preview for mathematics (network connections permitting).

To help us learn the tricks of the trade, we’ve decided to buy some books. And to help us communicate, we’ll both have a copy of these books. That way, it’s easier for us to share our experiences, even though we’re not likely to meet during the project. (This is one of the big changes the rise of print made to learning, in the 16th century.)

So here are the books we’ll be sharing, and why.

JavaScript framework

I’ve some work to do on MathTran JavaScript between now and the end of May (and then Christoph will start coding). Previously MathTran has not used a JavaScript framework, but now it’s time. I’ve done some research, and heard good things about jQuery. I also like the thinking and coding style it encourages. So we’ll be using that as a starting point, and the goal is to write the OnLine TeX Editor (and some other goodies) in jQuery. A second goal is to develop a MathTran plugin for jQuery, so other jQuery users can make use of our work.

Here’s the jQuery books we’ll be using.

• Learning jQuery, by Karl Swedberg and Jonathan Chaffer
• jQuery Reference Guide, by the same authors

I’ve got them both already (by PDF download) and they’re pretty good. I prefer the Reference Guide, because I like understand the fundamentals (rather than getting on and doing something new).

JavaScript and DHTML reference

The jQuery framework is good at selecting items on the page and doing things with them. But we’ll need to build some custom widgets and controls, and for that we’ll need to know some low-level JavaScript and DHMTL. For this purpose I’ve chosen

• JavaScript & DHTML Cookbook, by Danny Goodman

Hacking into pages

There’s lots of pages out there that really need better support for mathematics, and whose users would welcome the OnLine TeX Editor. WordPress, for example, has amongst the best support for mathematics, but it does not provide anything like instant preview. Fortunately, add-ons and extensions, such as GreaseMonkey, allow users to provide JavaScript extras that run on selected pages.

Here’s an example. Every working day the arXiv publishes hundreds of new mathematics and physics preprints. Here’s the abstracts for the new maths items for today. Many of these abstracts contain TeX-encoded mathematics, displayed as text. Wouldn’t it be great is the user could click a button and see the rendered form of the mathematics. (And of course another button to unrender).

Well, that’s what GreaseMonkey extensions are all about. And here I’ve chosen

• Greasemonkey Hacks, by Mark Pilgrim

What I like about this book is that it tells us a lot about annoying things on web pages, and what can be done to fix them.

Summary

So we’ve got four books, with about 1600 pages in total, to use as reference, and to read when we’re stuck. I’m pleased with the jQuery books, and the GreaseMonkey book has some inspiring recipes. I’ve not yet seen Goodman’s DHTML Cookbook, but from the table of contents it deals with resizing of text, which is a key feature for the display of TeX-rendered mathematics.

Nothing exists in isolation. This year Google is funding 1,125 student contributors to 175 Free and Open Source projects, and some of these projects are related to Christoph’s MathTran project. The rest of this post discusses some of these connections.

MathTran Online TeX Editor

Christoph’s Online TeX editor project allows people to compose TeX interactively in a web page. I’ve already created a proof of concept version which shows that something like this is quite possible. This prototype contains an AJAX style on-line help system, which of course will need to be populated with information about and examples of common TeX commands. The great thing about the public MathTran server, of course, is that it allows users to try out these commands and get almost instant feedback.

TeXShow: finding and trying out commands

Now onto the connections. First, of course, if Mojca’s TeXShow project. This is to develop further an online interface to a database of ConTeXt documentation. The same mechanisms can be used to deliver information about LaTeX and TeX commands. All front-ends, such as LaTeX and ConTeXt, handle mathematics similar to that of plain TeX, and so I hope that TeXShow will be able to supply data to the MathTran TeX editor.

Usability in Moodle, JavaScript and Fluid

But there are more. I work at The Open University, which is a major user and developer of the Moodle Virtual Learning Environment (VLE). Last year Moodle had 8 GSOC projects, and this year they have 12. Of particular interest to MathTran is Laia Subirats Maté’s project on Usability Issues. She’d like to use tools from the Fluid Project in Moodle. Just a couple of days, the Fluid project posted recommendations on JavaScript toolkits.

So far, MathTran has not used JavaScript toolkits, but this has to change. For a start, we’d like MathTran to work well with at least the major toolkits, such as Dojo, MochiKit and several others. Fluid’s report on JavaScript is very helpful (and they recommend jQuery). Perhaps Laia’s usability project could similarly help with Christoph’s Online TeX Editor.

Browsing Drupal Help, and usability

Drupal is a web content management system (and has jQuery in it’s core). This year it has 21 projects, one of which Gurpartap’s Singh’s project to Revamp the Drupal help system. One of his goals is to lead users from error or warning messages into the documentation. This is, of course, something Christoph wants to do with TeX errors. Gurpartap also wants to ease the maintenance of help files by third-party contributors, which is similar to one of Mojca’s goals.

Jimmy Berry’s Usability Testing Suite project for Drupal will allow data relating to usability to be recorded and analyzed. MathTran also cares about usability, and there may be something here that can help us (particularly if Jimmy’s project produces a jQuery plug-in for capturing usability data).

LaTeX support in AbiWord

AbiWord is an open source word processor. This Xun Sun’s project to Improve LaTeX Support will improve its LaTeX export, particularly for mathematics. This is related to a GSOC project last year, namely Hermann Kraus’s project to Add Math Support to the Scribus desktop publishing program.

(Many thanks to Mojca for telling me of Xun Sun’s project.)