Spell Checker

Input Analysis

Every time the input field is altered, either by a key press or a copy-paste, the content is stripped of any formatting and divided into a set of words.

Each is then compared against a database of over 15,000 contested spellings and highlighted either blue (British spelling), red (American spelling), or green (common-ground alternative to a contested word).

Checking UK/US Spellings

In case you were wondering, I did not type out every contested British or American spelling used by this spell-checker. I used the data of Words Worldwide, whose original list (© Words Worldwide Limited 2009) can be downloaded from their website. The list was passed through a couple of online tools (thanks to Mark Wilton-Jones at howtocreate.com and the folks involved with JS Bin) before it was usable, but it now lives as a handful of easy-to-use Javascript arrays. If a word is in the "UK" array then it is a British spelling and is highlighted blue etc. There are lists for spellings that are more common in one English variant than the other but are found in both. These are highlighted with fainter blue or red.

Highlighting Words

This is where it gets interesting. The input field is a contenteditable div (rather than a text area) so that the content can be changed to contain html tags. The text is essentially cleared from the div and each word of interest is surrounded by a span styled with the relevant background colour before it is replaced.

If you've tried to do something like this before, maybe for a home-made drop-down selection menu, you may have noticed that the cursor will jump to the start of the text whenever the content is altered with Javascript. This is avoided here by actually having two contenteditable divs stacked on top of each other. The front div is edited by the user and feeds text to the program, which then adds the highlight spans and updates the back div. The front div has an invisible background; the back has invisible text. The front has the text; the back has the colors. Neat, huh?

Make UK/US

When one of the bottom buttons is clicked, the contested words in both of the stacked divs are changed to the appropriate variant. Thankfully the cursor-jump problem can now be tolerated. A master array of all spelling variants of all words, 69,417 long and closer to the raw data from Words Worldwide, is used to find the prefered British or American spelling or any agreed-upon spellings in order of popularity.

Make UK: Anglicise or Americanise!

Make US: Anglicize or Americanize!

Middle Ground: Anglify or Americanise!

Length of Code

The spell-check functionality is no more than 50 lines of Javascript. Another 10 deal with autofocus on load and synchronising the scroll of the front and back divs.

HTML and CSS are around 150 lines in total, but the bulk of the page's load time is due to the large data sets of spelling variants: around 98.8% of it. A slightly faster load speed was sacrificed for quicker look-up later on.