Emil’s Chronicle - The journal of Emil A Eklund

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.

48 Responses to 'DHTML Spell Checker'

  1. foO Says:

    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

  2. Espen Antonsen Says:

    Cool! :)

  3. Emil A Eklund Says:

    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… :)

  4. foO Says:

    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… ;)

  5. Houser Says:

    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.

  6. Emil A Eklund Says:

    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.

  7. Dean Edwards Says:

    Impressive. Someone make the man a red wavy underline GIF!

  8. kepo-ing Zz85 » Blog Archive » Ajax Spell Checks Says:

    […] 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 […]

  9. Alan Says:

    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!

  10. Emil Says:

    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.

  11. Pako Says:

    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

  12. David Davis Says:

    Can this be done with a textarea instead of an iframe?

  13. m0n5t3r Says:

    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).

  14. Emil Says:

    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/

  15. Wei Says:

    hecker program is too slow to allow word checking with each keypress.

    http://www.xlab6.com/spell.php

  16. Emil Says:

    Wei > That one doesn’t work at all for me :(

  17. James Says:

    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/

  18. Emil Says:

    James > Thank you. It’s quite buggy right now but I’m working on it.
    I’ll be sure to try your php implementation!

  19. Jeff Says:

    Google KWIKI or JAZZY - for a real time java spell checker with WYSIWYG

    KWIKI is a perl module

  20. Tom Gibara Says:

    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

  21. Emil’s Chronicle » DHTML Spell Checker Says:

    […] 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 […]

  22. TJ Says:

    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

  23. A random pixel » Misc links Says:

    […] DHTML spell checker […]

  24. Stephen Says:

    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?

  25. judaism and zoroastrianism Says:

    Fantastico!

    Thanks!

    _ Bab-ul-Janna

  26. AJAXsuppoter Says:

    Is the DHTML Spell checker, avaliable for downloading?

    Thanks.

  27. Rohit Says:

    Hai its superb. But it can be explored and enhanced if we could get the source code Emil.

    One of the spellers,

  28. Emil Says:

    Rohit: You _can_ have the source code, it’s even linked from the article.

  29. Spellchecker Says:

    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.

  30. Emil Says:

    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.

  31. vengu Says:

    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?

  32. 4mir Salihefendic Says:

    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 :-D . 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

  33. michal Says:

    i am really impressed!!!! gd job!

  34. Phil Says:

    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

  35. Phil Says:

    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

  36. Phil Says:

    Me again :s How much success (if any have you had integrating with a rich Textarea. i.e. one with formatting etc…?
    ChrsPh1

  37. The Solution Cafe Says:

    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.

  38. Hard Drive Portal » Blog Archive » Remember these links. Says:

    […] 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… […]

  39. Shammai Says:

    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.

  40. Yusuf Says:

    i’m using FCKEditor on my site for rich text editing.

    how do i integrate your spell checker with it?

  41. maxim Says:

    http://google.com

  42. Benjamin Says:

    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.

  43. ahmad gc Says:

    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.

  44. Mark Says:

    This spell checker does not appear to work in IE 7. Anyone know where the problem lies?

  45. North_falcon Says:

    Can I use Pspell? I host my site at godaddy. They use PSpell. The script doesn’t work there.

    Help please

  46. Venkat Says:

    Would you be able to share the spell check database? I am interested in integrating this in a corporate environment which runs only intranet

  47. Danny Li Says:

    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.

  48. Shariq Says:

    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

Leave a Reply

(required)
(required, will not be published)