PURVEYOR OF FINE WORDS

May 24 2006

Ajax spell check as you type

I’ve been looking for a nice web Javascript spell checker, and came across a great implementation by Emil that he named LiteSpellChecker. It mimics the spell checker in MS Word by underlining misspelled words and presenting a nice substitute word selection menu. The javascript takes a standard <textarea> element, erases the background, and inserts a shadow <div> underneath that holds the redline segments.

Bug Fixes (based on 2005-7-24 version of LiteSpellChecker)

The current implementation on his site has some bugs, so I’ve started to tackle some of them:

• Fixed: Redlines get misaligned when scrolling with arrow keys in Firefox
  When scrolling long text using Firefox, the redlines become misaligned as you move towards the bottom of the page. Once they begin to misalign, you have to manually refresh in order get it right again.
• Fixed: Ignore word function breaks if there are non-word segments in the text
  If the text contains characters like ++ or @@, then the ignore words function fails. This problem crops up whenever you have wiki markup syntax.
• Fixed: Numbers are flagged as misspelled
  Any word that contains a number is now ignored by the spell checker.

Performance Improvements

Since many of my users will be working with long documents, performance is key.

• Sped up ignore function by almost 5x
  The ignore word function loops through all words and feeds it back into the spellchecker. In long documents, the lag becomes noticable, and also causes a flicker of all the redlines. Instead of blindly looping through all words, I changed it to a case-insensitive search for the ignored word, and only processed the matching words. Venkman reports a speed up from 278.2ms to 57.95ms on a Powerbook G4.
• Improved responsiveness while editing long text
  Since the spell checker updates the spelling status on every keystroke, the UI becomes unusable when editing long text. I added a spell check delay that suspends the spell checker while typing continuously. You can adjust the sensitivity via the SPELL_CHECK_DELAY variable.

Download my source code. Important: read Emil’s demo page before attempting to do anything with these files.

• litespellchecker.js
• spellcheckerbase.js