Thursday, February 05, 2009

Hunspell for JavaScript ? A quick and dirty one: BJSpell

Somebody asked me to implement a web based spell check without plug-ins or specific browsers requirement (we all know banks security policies, for example, every plug-in could be dangerous but maybe they are still using the most un-secure browser still available these days: Internet Explorer 6 ... )

My answer, straight on: Guys, there is nothing available in pure JavaScript, but I can investigate about it

That's it, a couple of searches via Google, and nothing as expected ... but hey, wait a minute: what's about FireFox spell checker plug in and Open Office project? Here we are, Hunspell is the answer!



BJSpell Project


In a full day of self brain storming, history background cases study, and code, plus debug and tests, I created BJSpell, a basic, fast, cross browser, and runtime implementation capable to underline bad words using a pre compiled Hunspell compatible dictionary (one or more).
The reason I avoided the usage of the classic "click here for the spell checker" is server stress, since the idea was to bring the spell check inside text-areas without polling with short of big texts the server and every N seconds or, the worst case scenario, on every "onkeyup" textarea event!

Pure JavaScript


To create the little speller I used JavaScript on both client and server side. In the project page you can browse the trunk branch and have a look to BJSpell.Jaxer.html page, based on Jaxer (ok, ok ... I know, just another excuse to test my PAMPA-J project ... )

A real world example page


I created a folder in my website with a BJSpell demonstration page ... wait for the cursor in the right area and try, for example, to write something like "... let's try some weirf word ..."

If you have FireFox spell check plugin with english dictionary, you will difficulty spot the difference between the left textarea and the produced output in the right div ... but what the plug-in does not do, is to show you a couple of alternatives, or close words, instead of the wrong one

What's next?


The project is in beta status, so I need your help to debug it and to understand if it has been worthy and if it is truly a good compromise between performances and result. The suggestion is not perfect, truly quick and dirty, just a basic and incomplete implementation, so we will see how and if the project will go on ;-)

5 comments:

Sam said...

Useful. How can I get additional dictionaries? For example, if I have ru_RU.dic.

Andrea Giammarchi said...

good question!
First of all, you should have Russian language installed.
Secondly, if you get the file BJSpell.Jaxer.html, you create a dictory dictionary, and a dir dictionary.js, and you put both ru_RU.dic and ru_RU.aff inside dictionary, and you run BJSpell.Jaxer.html via Jaxer and click into create ru_RU dictionary, you should obtain a file (russian dictionary ... 1.6Mb!!!) inside dictionary.js folder called ru_RU.js, which is the one to load (after changing headers for UTF-8) sith BJSpell("ru_RU.js", function(){
// your checs here
});

Please tell me if everything is ok, I cannot test now cause my PC does not speak russian :D

Olya said...

What a shame I knocked down my Russian version of Windows... How lovely it would have been to test on it :) Feel free to experiment with my lapa tho, I can test it when I get home ;)

Anonymous said...

Ho Andrea

I'm trying to create a local html
which does what the demo does, but I do not see errors in red.
Any idea what the problem could be

p.s. I've downloaded dictionary.php

Thanks

Anonymous said...

Can you provide a quick tutorial on how to use your BJSpell. (i.e. what to add on your html page, what files to get, etc.)

Thanks