Controlling spell checking in HTML

Firefox 2 introduces spell checking support to text areas and text fields in web forms. The user can specify using the about:config interface whether or not spellchecking is enabled and whether to check both text areas and text fields or only text areas.

By default, text areas and designMode documents get spell checked while single-line input boxes do not. This is because it would be distracting to users if Firefox marked things like user IDs, and e-mail addresses as errors.

However, there may be situations in which this behavior is not necessarily appropriate. For instance, if a text area is intended to be used for editing HTML or other non-prose data, the spell checker would be a hindrance rather than a help. Similarly, there may be cases in which a web site would like to recommend to Firefox that spell checking be enabled for a specific text field; for example, for search boxes and e-mail subject line fields.

If a web site wishes to recommend whether or not to use spell checking for a specific <input> element, it can use the spellcheck attribute, specifying a value of true to recommend enabling spell checking or false to recommend against using it.

Keep in mind that the site's recommendation may be ignored if the user has disabled spell checking entirely by setting layout.spellcheckDefault to 0. If layout.spellcheckDefault has any other value, the recommendations are taken into account.

You can code a single-line text field (HTML <input> element) with spell checking on with HTML like this:

<input type="text" size="50" spellcheck="true">

Likewise, you can code a text area with spell checking off with HTML like this:

<textarea spellcheck="false"></textarea>

You can control a document in designMode (typically used to implement rich text editing) by setting the spellcheck attribute on the document's <body> tag.

You can apply the spellcheck attribute to other elements as well, such as <span> and <div> elements, in which case any contained <input> elements inherit that setting; <input> elements that do not have a spellcheck attribute inherit the spell check setting specified by their parent. If there is no setting specified in any ancestor elements, the user's default setting is used.

For example:

<div spellcheck="true">
  <label>Type a sentence: </label><input type="text" size="50">
  <label>Type another: </label><input type="text" size="50">
<label>Type a third: </label><input type="text" size="50">

In this HTML snippet, the first two text fields are spell checked while the third is not.

(Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)

Controlling the spellchecker language

Starting in Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6), the spell checker uses the <input> element's lang attribute to determine the default spell checker language. If <input> doesn't have a lang attribute, that attribute is searched each successive parent element and upward toward the root node until one is found.

By doing this, if a user has both French and English dictionaries installed, and an editable element has lang="en", the English dictionary will be used automatically for that element.

For example:

<html lang="en">
  <textarea lang="fr"></textarea>
  <div lang="ru">

In this HTML snippet, the first <textarea> will be spell checked in English, the second in French, and the third in Russian.

If an element specifies a language, and the user has no dictionary installed for that language, spell check is disabled by default, although the user may choose to manually enable it.

Document Tags and Contributors

Last updated by: Sheppy,