Re: SpellCheck API?

Greetings web-application developers,

Sorry for my slow update.
I would like to post the updated version of my proposal (applied
comments in this thread as much as possible) since it is not so easy
to read through this thread. I would be great to correct me if I'm


Hironori Bono

1. Introduction

HTML5 provides a spellcheck attribute to enable or disable the
spellcheckers integrated into user agents in an editable element. This
attribute prevents the spellcheckers from checking text in an editable
element where web applications do not like it, e.g. e-mail addresses,
URLs, etc. On the other hand, it is not so easy for web-application
developers to integrate custom spellcheckers (e.g. a spellchecker that
uses a contact list to check e-mail addresses, names, street
addresses, etc.) into their web applications. Even though several web
applications (such as GMails) have integrated custom spellcheckers,
such web applications use content-editable <div> elements to render
misspelled underlines and the ‘z-index’ properties of CSS to show
suggestions, respectively. Unfortunately, it is not so easy to apply
these techniques when web applications use <textarea> elements or
<input> elements for user input because it is pretty hard to identify
the position of misspelled words in these elements. To solve this
problem, it would be great for user agents to provide scripting access
to their spell-checker framework so web-application developers can
integrate their custom spellcheckers to their web applications as
listed in the following code snippet. (This snippet assumes the
CheckText() functions checks the spellings of all words in the
specified text and returns a list of misspelled ranges.)

function CheckTextOfNode(node) {
  // Remove all the previous spellchecking results.
  for (var i = 0; i < node.spellcheckRanges.length(); ++i) {

  // Check the text in the specified node.
  var result = CheckText(node.innerText ? node.innerText : node.value);
  for (var i = 0; i < result.length; i++) {
    // Add a misspelled underline and suggestions to the specified word.
    node.addSpellcheckRange(result[i].start, result[i].length,

2. Intefaces

interface SpellcheckRange {
  readonly unsigned long start;
  readonly unsigned long length;
  readonly DOMStringList suggestions;
  readonly unsigned short options = 0;
  const unsigned short NO_ERROR = 1;
  const unsigned short ADD_SUGGESTIONS = 2;

When a user-agent allows web applications to use custom spellcheckers
instead of its buit-in spellchecker, it implements the following
methods and attribute to HTMLElement. (This document adds them to
HTMLElement so web-application developers use them for all editable
elements such as <div>, <span>, <body>, etc. Is it sufficient to add
them only to HTMLTextAreaElement and to HTMLInputElement?).

 readonly sequence<SpellcheckRange> spellcheckRanges;
 void addSpellcheckRange(unsigned long start, unsigned long length,
DOMStringList suggestions);
 void removeSpellcheckRange(SpellcheckRange range);

 * The element.addSpellcheckRange() method
   Attaches a misspelled underline and suggestions to the specified
range of the element.
   The "start" and "length" parameters represent a range of text in
the element. (We do not use a Range object here because it is hard to
specify a range of text in a <textarea> element or an <input> element
with it.)
   The "suggestions" parameter represents a list of texts suggested by
the custom spellchecker. When a custom spellchecker does not provide
any suggestions, this parameter should be an empty list.
   (I have removed the "options" parameter for now since it may be
better to have more discussions about how to provide interfaces that
allow web-application developers to control the default suggestions of
a user-agent.)

 * The element.removedSpellcheckRange() method
   Removes the specified misspelled underline from the element.
   The "range" parameter represents a range of text added by the
element.addSpellcheckRange() method.

 * The element.spellcheckRanges attribute
   Represents the list of misspelled ranges of text added by the
element.addSpellcheckRange() method.

 void addSpellcheckRange(unsigned long start, unsigned long length,
DOMStringList suggestions, unsigned short options);
   The "options" is a bitfield. Each bit represents the following:
   These two features allow the author to control default UA
suggestions without being able to know what they are, so there's no
privacy violation. (
   - NO_ERROR means that there is no error in this range, and the UA
should not mark any words there as being errors even if the spellcheck
attribute is enabled. (If the author wants to completely disable
built-in suggestions, they can set spellcheck=false.)
   - ADD_SUGGESTIONS means that the provided suggestions should be
given in addition to the UA's suggestions, instead of replacing them
-- by default, the suggestions of a user-agent for that range are
replaced. (The default could be the other way around if that's

Received on Thursday, 21 July 2011 06:51:31 UTC