Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

PHP and Javascript spell checker

Last week I commented that Sam Ruby’s spell checking feature could be made even funkier with the addition of a javascript powered “corrections” menu. I spent a few hours this afternoon playing with the idea, and I’ve now got quite a nice proof of concept:

Spell Checker Demo

I’ve tested it on Phoenix and IE5 on Windows—I’ll check it on IE6 later on this evening. IE5 gets the menus in the wrong place but other than that it seems to work fine in both browsers. I adapted Sam’s Python code for PHP on the server side, while the client side bit is a whole lot of messing around with the DOM.

If you want to nose around the source code, take a look at this lot:

There are still a few bugs, and I haven’t quite worked out an elegant way to get the menus to behave more like menus, but on the whole it’s worked out pretty well.

Posted 18th March 2003 at 9:50 pm

This is PHP and Javascript spell checker by Simon Willison, posted on 18th March 2003.

View blog reactions

Next: Great new bookmarklets

Previous: Flash Functionality not quite so flash

42 comments

  1. Ooooh, nice! One to keep my eye on (and to happily use in due time :-).

    Jan! - 18th March 2003 22:04 - #

  2. Very good Simon... was it intention to entitle the script "speling.js"?

    Andrew Hayward - 18th March 2003 22:11 - #

  3. Yup :) The name was inspired the by Apache mod_speling module.

    Simon Willison - 18th March 2003 22:15 - #

  4. Excellent! Mind if I steal it. ;-) Minor suggestion: '(\\W|^)'+word+'(\\W|$)' => '\\b'+word+'\\b' This way you won't need the $1 and $2 either.

    Sam Ruby - 18th March 2003 22:30 - #

  5. Steal away :) Thanks for the tip - this is pretty much my first time using javascript regular expressions and I've never really played with the word boundary style regexp things before. I'll use that tip in the PHP code as well.

    Simon Willison - 18th March 2003 22:47 - #

  6. Doesn't work in Op7/Win... The window at the bottom doesn't show up. Otherwise, v. nice. Thanks.

    Jeremy Dunck - 18th March 2003 22:54 - #

  7. Interesting, I am studying your js-code. the addeventlistener method stores the original object in the this keyword. So you probably don't need a getTarget function for browsers with support of addeventlistener. Not tested though. I was thinking, this js-thing could also be done with .htc behaviors and (perhaps) -moz-bindings.

    Martijn - 19th March 2003 00:07 - #

  8. Bah I just tried it in IE6 and it looks like I've broken it with some of my most recent tweaks.

    Simon Willison - 19th March 2003 00:11 - #

  9. That rocks (works in mozilla too, just to clarify)! You mind if I adapt this to jBlog (new blogging package that I'm working on, name is subject to change :)?

    Sterling Hughes - 19th March 2003 04:33 - #

  10. I'd be honored. There's still quite a bit of tweaking to be done (it's a disaster in IE at the moment) but I'll be publishing improvements as I go along.

    Simon Willison - 19th March 2003 06:53 - #

  11. Very cool, Simon. Please keep us updated on the progress. I would love to use this on my message board.

    Jason - 19th March 2003 13:34 - #

  12. This is quite impressive. I'll be snagging it too, if that's alright?

    Sam - 19th March 2003 14:19 - #

  13. I've made a (still pretty basic) xbl binding of the spell checker. Disadvantage: only visible in Gecko-browsers (with xul). Advantage: degrades well with other browsers. Also, you don't need (you can if you want to) to worry about style, positioning and behavior of the popup. See demo: http://home.hccnet.nl/m.wargers/test/mozilla/speli ng/spellchecker.html

    Martijn - 19th March 2003 14:42 - #

  14. My regex is pretty weak, is there a way to get it to ignore stuff between an ampersand and a semi-colon?

    Sam - 20th March 2003 03:29 - #

  15. I got a long list of errors just now and couldn't get to the bottom of it to hit cancel...

    Lach - 20th March 2003 09:14 - #

  16. Awesome. Just plain awesome.

    Scott Johnson - 20th March 2003 16:01 - #

  17. I've done some work to get it to ignore HTML stuff.. I changed the SpellChecker function in the PHP file to say $cwd = getcwd(); $this->command = $command." --home-dir=$cwd"; and then in $cwd I have a file called ".aspell.english.pws" that has a one-line header and then is a \n separated list of words that are legal: personal_ws-1.1 english 5 MySQL RSS lt gt quot br nbsp amp Hope this helps!

    Sam - 20th March 2003 19:04 - #

  18. Wow, nice one Sam!

    I should really stress that the code for this is not ready for production use yet - the javascript breaks horribly in IE and there are a few lurking bugs in the PHP as well. I have a big coursework deadline on Tuesday but I hope to fix up the bugs and get a new release out shortly after then. Thanks for all the interest.

    Simon Willison - 21st March 2003 01:00 - #

  19. I know you're working on an updated version, but in case you hadn't spotted this bug, I thought I should let you know about it. If a word ends in a number, the PHP portion doesn't print the suggestions. I caught it when trying to blog about all the crazy stuff going on with XFree86. :)

    Sam - 22nd March 2003 04:10 - #

  20. Simon, the code seems to work perfectly well in IE 5.x for Macintosh (a beast apart from Windows IE). In fact IE on iMac hasn't got any of the problems I read about from PC users. As written, the code produces a list of alternate spelling suggestions as a title in the anchor, so the suggestions appear on hover. The anchor itself links nowhere.

    John - 26th April 2003 02:21 - #

  21. Sorry, it's not an anchor is it? just a span.

    John - 26th April 2003 02:34 - #

  22. I really like the code, one question though, do you revceive a javascript error in IE5 and IE6 on globalspan.firstChild.nodeValue = getTarget(e).word; where globalspan.firstChild is null? Other that that the only change I made was to directly set the left and right position style elements so that the menu would pop up beside the mouse as it does in NS6.

    Jamie - 21st May 2003 21:50 - #

  23. I was checking back to see if you'd updated this great software and I noticed that your demo no longer works. FYI.

    Sam - 1st August 2003 17:28 - #

  24. Yes. I see that Simon has stopped any development of this tool. Indeed, I sad to see this. Are you going to do something to improve it? Certainly menu appears on bottom zone and it is really difficult to handle this. I suggest a lateral visualization with a drop menu because a so large list of suggestions really damage look. Thanks. Manuel

    Manuel - 23rd August 2003 02:31 - #

  25. Hi, I had the same problem with the menu appearing at th ebottom but this is only an issue in IE (it appears fine in Netscape 6, just to the side of where you clicked on the word). You can fix this by directly setting the left and right position style elements menu = document.createElement('div'); menu.style.position = "absolute"; menu.style.left = (pos.x - 10); menu.style.top = (pos.y - 10); menu.className = 'spelingMenu'; instead of menu = document.createElement('div'); menu.setAttribute('style', 'position: absolute; left: '+(pos.x - 10)+'px; top:'+(pos.y - 10)+'px;'); menu.className = 'spelingMenu';

    Jamie - 3rd September 2003 07:49 - #

  26. I love this script and it will come in very handy as I host a writing page and that is one of the biggest demands I have. I do want to say the fix posted by Jamie was great, but I found it better to make the pos.x and pos.y positive instead of negative, this puts the menu just under and to the left of the word. Plus you can see the rest of the line better.

    Harry - 16th October 2003 23:57 - #

  27. Jamie or anybody, What is the fix for the globalspan.firstchild is null error?

    Douglas - 30th October 2003 18:47 - #

  28. Wow guys this rules. I found this by accident but I'm much impressed.

    My brother and I have been working on our own bloging tool. (just for our use not a big release or anything) and I think this would be great.

    Does anyone of you have a URL with all these great tweaks? (I'd love to see the checker come up in a pop-up then go update the original)

    anyway... great site here. I'm gonna book mark it and explore it more!

    Doug - 28th January 2004 05:51 - #

  29. Fantastic, I'd been working on something like this that got its data from dictionary.com, I've taken a good look at the code. I can't work out where the list of correct spellings gets pulled from? Am i missing something vital?

    Andrew - 14th March 2004 09:45 - #

  30. Andrew, the list of spelling comes from the Unix-based 'ispell' command. You can see that it does a call out to it right at the top of the class.

    Patrick - 18th March 2004 00:28 - #

  31. Hey Simon, Your Spell Checker is great! I want to integrate it into my webpage but I'm not really sure of how to.

    Reena - 30th April 2004 17:34 - #

  32. You can fix the 'globalspan.firstChild is null' error (in IE) by changing the line "globalspan = this;" to be "globalspan = span;". Some other tweaks I made that you may find useful: limit the number of suggestions to 10 which usually contains that correct word, put 'cancel' at both top and bottom of the suggestions list, and make the menus appear by mouseover rather than click. Thanks for a great piece of software!

    mikek - 18th May 2004 05:36 - #

  33. OK, actually NO you don't want to do globalspan = span; It prevents the IE error but always gives you the last span (what was I thinking?) Sorry. Count me as one who is working on a solution to this, though.

    mikek - 18th May 2004 15:17 - #

  34. It's me again :-) After some more tinkering I realized that you can set globalspan = target;" (rather than globalspan = this) and that does appear to solve the problem (with IE globalspan.firstChild is null) and does not have the problem of always referring to the last span (see above). I am not a javascript expert by any means, and I realize that this solution may not be the most elegant or may fail in some cases (you be the judge). It appears to work correctly for me in IE6 and Mozilla Firefox.

    mikek - 18th May 2004 18:02 - #

  35. What would cause the error shell_exec(): Unable to execute aspell -a C:\WINDOWS\TEMP\spl16.tmp

    Nelis - 31st May 2004 19:13 - #

  36. I love the script! It works great when I test it out on your server, but I run into all types of difficulty when I try to incorporate it on my system because we are running the server in 'Safe Mode'. It seems to have problems with the backquotes used to run the spell checking command. Has anyone else reported problems with this, and are there any suggestions on how to get around it?

    Joel - 1st June 2004 14:57 - #

  37. Um, Simon, it's not doing anything in Firefox .93. Or IE6. In fact, it's not finding any errors at all when I put in tons of misspelled words...am I using it wrong?

    Reed Wiedower - 3rd September 2004 15:46 - #

  38. I went through the code it is excellent. What if i want to add my own words there?

    Amino - 13th October 2004 23:43 - #

  39. Spell checker demo didn't seem to work. I would like to use it - but I would like to see it in operation first - thanks

    gideon - 3rd December 2004 04:51 - #

  40. didn't work

    jchord - 28th May 2005 23:49 - #

  41. I had implemented this on a website, but found the DHTML stuff was too iffy, especially on IE. Making advanced javascript work on multiple platforms/browsers is a PITA, at least for me and my knowledge of JS. I just completed my own version of this using aspell 0.60 instead if ispell, and using javascript/dropdown menus instead of the DHTML. The result is much more reliable than the DHTML version. I need a few days to clean up my coding mess and I'll post up a revised tutorial/test.

    joeakabloo - 18th June 2005 11:40 - #

  42. Works for me. Thanks.

    Java Developer - 23rd September 2006 22:42 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/03/18/phpAndJavascriptSpellChecker

A django site