DHTML Spell Checker
Was reading the Joel on Software book, that I bought myself for Christmas, the other day, the one with the ridiculously long title - Joel on Software: And on Diverse and Occasionally Related Matters That Will Prove of Interest to Software Developers, Designers, and Managers, and to Those Who, Whether by Good Fortune or Ill Luck, Work with Them in Some Capacity - that is.
Anyway, to get back to what I was about to say, I was reading the book and eventually found myself readingto chapter forty two, How Microsoft Lost The API War, where he makes a few very good points, if you havn’t read it you should (it’s also avalible online).
Seems like I got carried away again, however I can assure you that I’ll get to the point, eventually… Near the end (page 310 in the book) he lists a few things that can’t be done well in a web application:
1. Create a fast drawing program
2. Build a real-time spell checker with wavy red underlines
3. Warn users that they are going to lose their work if they hit the close box of the browser
4. Update a small part of the display based on a change that the user makes without a full roundtrip to the server
5. Create a fast keyboard-driven interface that doesn’t require the mouse
6. Let people continue working when they are not connected to the Internet
Number one is quite tricky, and probably one can’t be created thats fast enough to be usable, at least at the time being (the SVG support in Mozilla looks promising).
Number two on the other hand, spell checking as you type, immediately caught my attention, that should certianly be possible with todays technology, so I fired upo my favorite editor and started writing a small test case.
It would be very impractical, and obviously very slow, to implement the dictionary matching at the client side, still a lookup has to be made, in near real time. Since speed would be critical the obvious solution seemed to be XML HTTP or AJAX, for those of you who like that term, as it’s a lot faster than the alternative (see XML HTTP Performance and Caching for details). Having decided on the strategy I started to implement it, and pretty soon it became clear that it would actually work.
I’m currently using a very simple Perl CGI script on the server side, that does the actual spell checking. On the client side I use a rich text component where after each keypress a function is fired that checks if a new word has been typed, and if it has the word is sent to the server for validation. When the response arrives the component is updated to reflect the status of the word (misspelled words have a red underline) and it’s cached, so the server doesn’t have to be queried the next time the same word is entered.
Enough implementation details, see for yourselves:
Demo
Client side script (spellchcker.js)
Server side script (spell.cgi)
In still very much a beta but works well. Currently only works in Mozilla (Firefox 1.x) and Internet Explorer 6.0 (32bit). Any, and all, feedback is more than welcome.
Oh, and I’m still trying to figure out whatever or not the chapter number has anything to do with the big questions in life.
May 27th, 2005 at 22:15
hot damn that’s pretty badass, emil! i’ve often wished that i could get a real-time spellchecker in a WYSIWYG editor…. but that’s just tasty, bud
would luv to port something like this to CF, so i can use it in my various sites/projects.
/starts to Google around for a CF spellcheking script
May 27th, 2005 at 22:33
Cool!
May 28th, 2005 at 00:03
Foo: Thanks. The protocol is fairly simple so it should be relatively painless to port the backend. I haven’t coded cold fusion since the WebOS days so I doubt I’d be able to offer any real help there though, not that you would need it…
May 28th, 2005 at 07:12
well, i pulled down your .cgi file and started to look through it… holy shit man, it’s been AGES since i’ve looked at a .cgi page… *whoa*
gonna play around and see about porting yer code to CF, if you dont mind buddy… was even thinking of making into a local webservice/wdsl for some dynamic/ajax shit.
just thinking out loud, dont mind me…
May 28th, 2005 at 12:52
Well, hot damn. This is tasty, although I did find a few nuances. You’re probably already aware of them, but I’ll comment here so that others won’t come in and flood your comments about them.
I entered the string “What the phuk is up with this mutha?”. A fairly standard debugging string, that I encourage everyone to use in their own applications. It makes so much more of a statement than the standard alert(”Here”).
It caught the phuk as an invalid word and worked fine. But when it got to the end, it choked on mutha?. It looks as though the question mark prevented a spellcheck when in fact all punctuation should trigger a new word. After that I changes phuk to fuk, but the word was not re-checked. Not sure how easy that one is going to be to implement, but I just thought I’d put my funk down.
Again, great implementation.
May 28th, 2005 at 13:00
Houser: Would that be in mozilla or ie? The ie implementation needs some more work as it only revalidates a word on space, while the mozilla one check for quite a few separators.
May 28th, 2005 at 15:14
Impressive. Someone make the man a red wavy underline GIF!
June 11th, 2005 at 08:38
[…] check your spelling while u type (like word, something i wanted in the first few posts in my blog) http://me.eae.net/archive/2005/05/27/dhtml-spell-checker/ and its demo Its code is implemented via js and cgi perl and aspell. (shouldnt be a problem […]
June 12th, 2005 at 08:29
Hey there!
I’m very impressed. Would you mind explaining the process you used to implement the textarea / iframe to get the words underlined? I provided my email so either just respond here or send an email my way please. Thanks!
June 12th, 2005 at 13:11
Thanks.
It’s still very much work in progress but as soon as I feel moderately satisfied with it I’ll publish a more in depth description. - I’ll let you know when I do.
June 29th, 2005 at 14:23
The IE implementation of the spell checker is somewhat broke. I can’t insert new paragraphs when I hit RETURN - they get deleted automatically (tested on Win XP SP2/IE 6). I also have trouble pasting text to an empty field (”undefined” gets inserted before my text).
BTW there should be some way to disable automatic checking and switch to manual mode - requests generated by the script can consume lots of bandwidth.
Pawel
July 1st, 2005 at 22:53
Can this be done with a textarea instead of an iframe?
July 2nd, 2005 at 07:50
very nice… is it just into the theme, or is it a plug-in? (I was thinking to integrate it in my own spell checker plug-in, and write a php back-end).
July 16th, 2005 at 11:13
I’m not very good at PHP so I haven’t been able to create a plug in, however you might find this interesting http://www.lab4games.net/zz85/blog/wordpress-plugins/live-spell-checker/
July 19th, 2005 at 03:22
hecker program is too slow to allow word checking with each keypress.
http://www.xlab6.com/spell.php
July 19th, 2005 at 09:57
Wei > That one doesn’t work at all for me
July 20th, 2005 at 18:11
Emil, I liked the way your spellchecker works (amongst the various ones I’ve tried out). Too bad about the IE bugs (try pasting some text in IE and then pressing “Enter”).
Anyhow, if it’s of service to you or your readers, I ported the Perl backend you wrote over to PHP. It’s available for download from my site at http://www.nosq.com/2005/07/ajax-spell-checker-on-windows/
July 20th, 2005 at 22:43
James > Thank you. It’s quite buggy right now but I’m working on it.
I’ll be sure to try your php implementation!
October 8th, 2005 at 07:45
Google KWIKI or JAZZY - for a real time java spell checker with WYSIWYG
KWIKI is a perl module
October 16th, 2005 at 16:03
Emil,
I’ve been working on a spell checker with a similar AJAX driven interface that we have just released as a free service.
It provides a similar UI (but based on an IFrame to provide the formatting) and also provides a dictionary, thesaurus and personal dictionary.
The biggest difference between your implementation and ours is that our dynamic spelling requests are directed back to our servers so that using the spell-checker doesn’t require anything to be installed onto the server - it just needs a script tag to be included on the web page.
There’s also a favelet version available so that people can use it on different sites, not just their own. There’s more information at http://www.jacuba.com
Finally, I enjoyed your demo but I did encounter a few bugs:
* Sometimes when I scrolled the textarea, the red lines did not move with the text.
* On occasion, pressing RETURN seemed to generate a newline which then seemed to be removed immediately.
* A text selection often disappears while I was extending it using the keyboard (using shift + arrow keys)
My browser:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.7.10) Gecko/20050717 Firefox/1.0.6
January 19th, 2006 at 05:50
[…] Chronicle » DHTML Spell Checker by jbritton on 1/18/2006 10:50 PM (report abuse) Email this | Reply function DoComment() { if( document.getElementById(”ctitle”).value == “”) {document.getElementById(”titleError”).style.display=”inline”; return false; } document.forms[0].action = “http://www.shadows.com/PostBackHelper.aspx”; document.forms[0].method = “POST”; document.getElementById(”__VIEWSTATE”).value=”"; document.getElementById(”redirectURL”).value = document.location; document.getElementById(”ShadowAction”).value = “Comment”; document.getElementById(”uri”).value = “http://www.shadows.com/comment/04c62132-0c2a-46d6-9bc4-cc8f29678793/”; return true; } Comment Title: *required […]
February 16th, 2006 at 00:25
The spell checker is a wonderful tool. Damn great.
One thing we could not find out is how to use it for fields already filled? I.e. if you want to edit an existing data in a field. It somhow discards everything.
TJ
March 1st, 2006 at 05:25
[…] DHTML spell checker […]
March 10th, 2006 at 17:42
This is a really awesome code, I have a question about useability.
Is there anyway that I can implement the client side code to a preexisting text box in a blog lets say from blogger?
March 15th, 2006 at 19:00
Fantastico!
Thanks!
_ Bab-ul-Janna
March 17th, 2006 at 21:17
Is the DHTML Spell checker, avaliable for downloading?
Thanks.
March 21st, 2006 at 13:47
Hai its superb. But it can be explored and enhanced if we could get the source code Emil.
One of the spellers,
March 21st, 2006 at 22:35
Rohit: You _can_ have the source code, it’s even linked from the article.
March 23rd, 2006 at 18:05
Hello,
I was wondering whether we can add the spell checker to textboxes as well or is it limited to only textareas? If yes how can I apply it to textboxes? It seems to be applying the spell check to an iframe.
Also when I type a wrong spelling it gives a pop-up which says, “this page is accessing information that is not under its control. This poses a security risk. Do you want to continue”. Hitting ‘No’ will give a permission denied error on spellchecker.js, line 570
xmlHttp.open(webFXSpellCheckHandler.httpMethod, uri, async);
However if I select yes on the poop-up, it will function normally. Is there a way to overcome this?
Any help with this is greatly appriciated.
Thanks.
March 24th, 2006 at 12:54
Spellchecker: At this time it only works with textareas.
As for the security warning, you’ll need to copy the server side script to your server and have it on the same domain as the client portion.
March 27th, 2006 at 11:05
Hello,
I am trying to use tis amazing utility with aan iframe.. How do I get This to work on it..
when the spell check is completer.. it removes the images that I have in the iframe..
Any help?
April 13th, 2006 at 01:05
Great work! Too bad it doesn’t work in Safari
Anyway, I have also done a spell checker. It’s called GoogieSpell and is Ajax’ed
. It’s based on Google’s spell checker and supports 11 languages. It does not require any back end scripts (if used locally). Check out a demo and read more about it here:
http://amix.dk/projects/?page_id=3
I also use this on http://orangoo.com/spell/ - which is a service based on GoogieSpell.
I may use your idea/script to improve mine so it gets more interactive.
4mix
April 19th, 2006 at 09:55
i am really impressed!!!! gd job!
May 22nd, 2006 at 20:13
Hi Emil. Firstly Well done! However I’m having all kind of trouble setting up the perl side of things. I’m on Win 2003 Server Ed. Could you give me pointers, or at least (if thats not cheaky) the format of the data response. I’m no Perl CGI guy, and would rather creat an ASP.NET service that deals with the server side stuff, but not sure what goes in and what comes out. Please help, if you check my site you’ll see why this could be hugely useful for me. http://read-e.com
May 26th, 2006 at 13:31
Hi Emil. I’ll forgive you for not getting back to me
I hope this blog can handle code being posted because I’ve mangage to hack together something that seems to work for an ASP.NET backend using Wspell as the checking engine:
Public Class Spelling
Inherits System.Web.UI.Page
#Region ” Web Form Designer Generated Code ”
‘This call is required by the Web Form Designer.
Private Sub InitializeComponent()
End Sub
‘NOTE: The following placeholder declaration is required by the Web Form Designer.
‘Do not delete or move it.
Private designerPlaceholderDeclaration As System.Object
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
‘CODEGEN: This method call is required by the Web Form Designer
‘Do not modify it using the code editor.
InitializeComponent()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Dim i As Integer
Dim n As Integer
Dim Res As String = “data = [”
Dim wordIn As String
Dim wspell As New WSPELLLib.WSpell
‘ wspell.Close()
wspell.MainDictionaryFiles = “sscebr.tlx,sscebr2.clx”
For i = 0 To Request.QueryString.Count - 1
wordIn = Request(i).ToString
wspell.Text = wordIn
wspell.ShowDialog = False
wspell.Start()
wspell.Suggest()
If wspell.TestWord(wspell.Text) = True Then Res = Res & “[1]” : GoTo SkipGood
Res = Res & “[0,[”
For n = 0 To wspell.SuggestionCount - 1
Res = Res & Chr(34) & wspell.Suggestion(n) & Chr(34)
If n = wspell.SuggestionCount - 1 Then Res = Res & “]]” Else Res = Res & “,”
Next
SkipGood:
If i = Request.QueryString.Count - 1 Then Res = Res & “]” Else Res = Res & “,”
Next
Response.Write(Res)
wspell.Close()
End Sub
End Class
May 26th, 2006 at 13:33
Me again :s How much success (if any have you had integrating with a rich Textarea. i.e. one with formatting etc…?
ChrsPh1
September 21st, 2006 at 13:50
We’ve come out with a commercial quality AJAX spell checker which I’m sure you’ll find impressive! You can find it here http://www.thesolutioncafe.com/ajax-spell-checker.html.
October 28th, 2006 at 18:04
[…] The Coming Return of AJAX. I’ve been thinking about AJAX - not the Greek Hero, the technology - a lot lately. Of course, it’s nothing new, blah blah Outlook Web Access blah blah DHTML blah blah IE 4.0. I totally hear you and I agree. It sucks that the folks that really conceived of DHTML aren’t getting the props they deserve. But, that’s the way of the ‘net. That said, it’s clear that folks are galvanized by the technology getting a sexy makeover (AJAX = sexy vs. DHTML = less so) but more that the technology really works. Sure Outlook Web Access is pretty, but it looks like crap in Firefox because it renders downlevel. (Aside, it’ll be interesting to see if there will be an ASP.NET 2.5 or something earth-shattering coming soon. From what I hear from contacts at public facing MS properties there’s some amazing things coming that will melt our faces if we knew.) Anyway, I’ve been collecting AJAX stuff in an attempt to grok what’s coming and reconcile it with many years of JavaScript (née LiveScript) and these past years of ASP.NET. There a number of things happening all at the same time and the confluence of standards like XML, ECMAScript, the new data format JSON (pronounced “Jason” - The JavaScript Object Notation) along with specs to make the J and X in AJAX work better together plus broad browser support for XHTML and CSS is really bringing the promise of a Web that we were originally promised in 1996. The young people are calling it Web 2.0. Um, OK. If you lived through the BBS days, VT100, Lynx, Mosaic, AOL in DOS, CompuServe, Prodigy, and the pox that was Netscape 4, you realize it’s Web 13.0. Anil also makes a good point about the coming of dampening (another word for common sense + good design) as a design feature. Some folks may poo-poo the shiny and glare that is Windows Vista (and CodeRush for that matter) as eye-candy, but they will eventually die off and fade away. Well, they won’t fade away, they will disappear instantly without a visual cue as to why they left. Regardless, let’s put these Pentium 4s to work doing something more interesting than rebooting quickly. Here’s some AJAX useful links I’ve collected. Incidently, some were found during my recent GTD obsession/adoption. A Venture Forth » Blog Archive » Top 10 Ajax Applications ComponentArt Web.UI 3.0 Backbase - Rich Internet Applications CodeTranslator: Free Code Translation From VB.NET <-> C# Emil’s Chronicle » DHTML Spell Checker Behaviour Sam Stephenson’s “Prototype” script.aculo.us - web 2.0 javascript Rico - Home Ajax.NET góða nótt. » My Ajax.NET Library Num Sum: home index nextaction BackPackIt TiddlyWiki (runs http://www.hanselman.com now.) Aardvark (Firefox Extension) Now playing: Musiq Soulchild - Just Friends [ComputerZen.com - Scott Hanselman] more… […]
November 23rd, 2006 at 21:14
Hi All,
I am using the spell checker on multiple textarea tags on my page and I noticed that the suggestions box always seems to show up at the top of the page. So when I scroll the page down to the bottom and click the mis-spelled word down there, the suggestions box opens at the top of the page near the first textarea tag.
is there something that I can do to make sure that the suggestions box always appears near the text area where I am clicking?
also, is there a destructor on the object that I can use to make sure that I only have 1 spell check object in memory at a time. Since I could have a lot of textareas on the page it seems to slow down the browser.
Thanks for your help.
February 3rd, 2007 at 16:07
i’m using FCKEditor on my site for rich text editing.
how do i integrate your spell checker with it?
February 14th, 2007 at 20:00
http://google.com
March 3rd, 2007 at 04:53
Is there any chance that you will include support for the Opera browser in a future release? There are many ‘net users these days who are die-hard Opera fans. It would be *really* nice to have such spell checking functionality for Opera, particularly if provided server-side. I know that there are a great many browsers these days and one can’t please everyone. However, it seems unfortunate to leave out such a widely-used browser.
June 28th, 2007 at 08:40
hi,
your spell checker is not working on ‘writeRichText’. it is not for RTE, is it? if it is. please tell me how to work for RTE.
June 28th, 2007 at 14:47
This spell checker does not appear to work in IE 7. Anyone know where the problem lies?
August 10th, 2007 at 05:37
Can I use Pspell? I host my site at godaddy. They use PSpell. The script doesn’t work there.
Help please
December 13th, 2007 at 22:49
Would you be able to share the spell check database? I am interested in integrating this in a corporate environment which runs only intranet
January 3rd, 2008 at 06:05
Hi Emil,
could you set up this project at sourceforge under MIT license?
we are using your spell checker, found some bugs.
e.g.
1.In IE, the suggestion menu appears not exactly under/above the wrong word.
2.the select combo overlaps the menu.
3.the div block can’t sync with the textarea when drag the scrollbar to the bottom.
4.In firefox,the long sentence can’t be wrapped well.
We like to contribute these fixes to the community.
Thanks.
February 18th, 2008 at 10:15
Hi ,
I am facing problem for spellchecking , when i create instance of wspell
class then it’s through error for clsid but i am already given clsid.
Anybody can help me….
Thanx
Shariq