Go back to the main page

Because Internet Explorer still doesn't have spell check


Earth to Internet Explorer

Built-in browser spell check has got to be one of the top five recent history browser innovations and I might even place it second to tabbed browsing itself. Built-in or native spell check on input fields is indispensable and can you believe at the time of this writing it doesn't look as if IE 9 is going to have it. I thought for sure it was going to be in IE 8 after the success it had in Firefox 2. Anyway, Simpltonians can not do without spell check in Internet Explorer. For a long time Simplton used Googiespell for this; however, when Simplton went live I tried to get a paid license but the owner never got back to me. I looked for some other spellcheckers but it seems like everyone has abandon this widget because only IE doesn't have native spell check. All the ones I looked for at the end of 2009 weren't even close to Googiespell in functionality.

Birth of SpellCheck class

Therefore, I coded up a new spell checker. This spell checker is meant only to be used with Internet Explorer and I haven't done any extensive testing in other browsers. Moreover, it runs off of Google's spell check engine located in the cloud at https://google.com/tbproxy/spell.

Initiate spell check by selecting check spelling Select check spelling Next, Get a nice inline spell check suggestion environment Next, Get a nice inline spell check suggestion environment


First, grab the code from from its github repo


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <title>Spellcheck class demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/prototype/" type="text/javascript"></script>
    <script src="spellcheck.js" type="text/javascript"></script>
    div.spellCheckOverlay { background:white;border:1px solid #7F9DB9;overflow:auto;word-wrap:break-word; }
    div.spellCheckOverlay a { background:yellow;text-decoration:none; }
    ul.spellCheckSuggestionMenu { border:1px solid #7F9DB9;background:white; }
    ul.spellCheckSuggestionMenu li { cursor:pointer; }
    span.spellCheckNoErrors { background:red;color:white;padding:4px;margin-left:7px; }
    span.spellCheckWait { padding:4px;margin-left:7px; }
    a.spellCheckStop { color:red;font:400 8pt Tahoma; }

    <div id="commentTitleRow">
      <!--[if IE]>
      <span class="spellCheckAction" id="spellCheckForItemComment">
     <div class="row">
        <textarea id="item_comment" name="item[comment]" rows="20" cols="50"></textarea>
      document.observe( 'dom:loaded',function(){
        // Spell check -- only for IE
          $('item_comment').checkSpelling('spellCheckForItemComment',{ editLinkClassName: 'spellCheckLink', url: 'spell' });


For Rails but should be easy to convert to another backend.

class SpellController < ApplicationController
require 'net/https'
require 'uri'

  def index
    lang = params[:lang] || 'en'
    ignoredigits = params[:ignoredigits] ||= 1
    ignorecaps   = params[:ignorecaps] ||= 1
    # Make sure the there are no line breaks whatsoever and put a <?xml not a <xml and the start
    body = %{<?xml version="1.0" encoding="utf-8" ?><spellrequest textalreadyclipped="0" ignoredups="1" ignoredigits="#{ignoredigits}" ignoreallcaps="#{ignorecaps}"><text>#{params[:text]}</text></spellrequest>}
    url = 'https://www.google.com'
    parcel = '/tbproxy/spell?lang=' + lang
    uri = URI.parse(url)
    http = Net::HTTP.new(uri.host,uri.port)
    http.use_ssl = true

    res = http.start do |http|
    render :xml => res.body


  • Pushed on 04/09/2010 by Christian