The WHATWG Blog

Please leave your sense of logic at the door, thanks!

The Road to HTML 5: spellchecking

by Mark Pilgrim, Google in Tutorials

Welcome back to my semi-regular column, "The Road to HTML 5," where I'll try to explain some of the new elements, attributes, and other features in the upcoming HTML 5 specification.

The feature of the day is spell checking, by which I mean client-side in-browser checking of text in standard <textarea> and <input type=text> elements. Several browsers support this out-of-the-box, including Firefox 2 and 3, Safari 3, Opera 9, and Google Chrome. However, each browser has different defaults of which elements get spell-checked, and only a handful allow the web author to suggest whether browsers should offer checking on a particular element.

In this article:

A brief history of the spellcheck attribute

That last bit, by the way, is why this is relevant to HTML 5. Browser features are interesting, but are mostly outside the purview of spec-land. But the idea of a markup hint to suggest turning spell-checking on or off has been bounced around for years. To wit:

Examples

Getting down to the technical details, the spellcheck attribute is a bit of an oddball. Most boolean attributes (such as <option selected>) are false if they are absent, true if they are present, and true if they are present with a value the same as the attribute name (e.g. <option selected=selected>). The spellcheck attribute is not like that; instead, it requires an attribute value of either true or false.

So this is valid:

<textarea spellcheck="true">

And this is valid:

<textarea spellcheck="false">

But this is not valid:

<textarea spellcheck>

Browser support

Browser support is currently... limited.

MarkupFirefox 3.0.6Google Chrome 1.0.154.48Safari 3.2.1Opera 9.62
<input type=text>offer on right-clickno checkcheck as you typeoffer on right-click
<input type=text spellcheck=true>check as you typeno checkcheck as you typeoffer on right-click
<input type=text spellcheck=false>offer on right-clickno checkcheck as you typeoffer on right-click
<input type=text spellcheck> invalidoffer on right-clickno checkcheck as you typeoffer on right-click
<input type=text spellcheck=spellcheck> invalidoffer on right-clickno checkcheck as you typeoffer on right-click
<input type=text spellcheck=on> invalidoffer on right-clickno checkcheck as you typeoffer on right-click
<input type=text spellcheck=off> invalidoffer on right-clickno checkcheck as you typeoffer on right-click
<textarea>check as you typecheck as you typecheck as you typeoffer on right-click
<textarea spellcheck=true>check as you typecheck as you typecheck as you typeoffer on right-click
<textarea spellcheck=false>offer on right-clickcheck as you typecheck as you typeoffer on right-click
<textarea spellcheck> invalidcheck as you typecheck as you typecheck as you typeoffer on right-click
<textarea spellcheck=spellcheck> invalidcheck as you typecheck as you typecheck as you typeoffer on right-click
<textarea spellcheck=on> invalidcheck as you typecheck as you typecheck as you typeoffer on right-click
<textarea spellcheck=off> invalidcheck as you typecheck as you typecheck as you typeoffer on right-click

In other words:

Detecting support for the spellcheck attribute

Browsers that support the spellcheck attribute will always reflect the attribute in the .spellcheck property of the element's DOM node, even if the spellcheck attribute does not appear in the page markup. You can use this to construct a simple test to check whether the browser supports the spellcheck attribute:

if ('spellcheck' in document.createElement('textarea')) {
    alert('browser supports spellcheck attribute');
  } else {
    alert('browser does not support spellcheck attribute');
  }

This will pop up an alert stating "browser supports spellcheck attribute" in Firefox 2 and 3, or an alert stating "browser does not support spellcheck attribute" in Safari 3, Opera 9, Google Chrome, and Internet Explorer.

Note: Internet Explorer will reflect any attribute present in the page markup. If you include a spellcheck attribute on an element and then test whether that element's DOM node contains a .spellcheck property, IE will always return true. The safest way to check is to create a new element in script, like the example above, instead of testing a pre-existing element on your page.

Conclusion

You can start using the spellcheck attribute today, but it only affects the behavior of Firefox. However, it has no adverse effects in other browsers. Be sure to use either spellcheck="true" or spellcheck="false", as these are the only values supported by Firefox (and the only valid values according to the HTML 5 spec as it stands today).

9 Responses to “The Road to HTML 5: spellchecking”

  1. Brenton says:

    As much as I’d love to see HTML booleans behave like the other major web languages with ‘true’ and ‘false’ as the valid values, I know that there are a lot of loud voices in spec-land that fear its implications for backwards compatibility – specifically that an older user agent might do the wrong thing if it encountered selected=’false.’ This discussion led to a specific note in the spec:

    “The values “true” and “false” are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.”

    A boolean implementation that doesn’t support ‘false’ is annoying. One that supports ‘false’ in some contexts and not others is absurd.

  2. Huck says:

    Why isn’t this considered as a part of css, rather than HTML5? It strikes me as presentational.

    Plus, that would allow a user to override it with their own stylesheets, if they always want spellcheck on or off. This would simplify things immensely for the spec writers too ;).

  3. Is the lang/xml:lang-attribute also taken into account to choose a default language?

    This would be very handy for multi-language people. For example: this textarea could have lang=”en” ,while the answer form of a Dutch company could have lang=”nl”.

  4. Article updated with detection script and markup examples.

  5. [...] The WHATWG Blog Please leave your sense of logic at the door, thanks! « The Road to HTML 5: spellchecking [...]

  6. James Howard says:

    February 29th, eh? How come you got an extra day this year and the rest of us didn’t?

  7. aeo says:

    IMHO very good decision to include this in HTML5, but please let developers to force (user can always change that later) spell checking in pre-chosen language.

    Something like this would force the browser to check this specific, unique text area in English, not in default browser locale language (German for example).

    In my application I have 3 textareas and each of them has to be written in its own language (shop product description in English, German, Polish). User would not have to switch or change the spellcheck language for each of the textares according to its use. Just change textarea focus and type, do not bother to change the language to get rid of red underline under each word :-)

    What do you think?

  8. sam says:

    @doeke, aeo:

    No, browsers do not use the lang feature to automatically select the correct language for spellchecking.

    Please see (and vote!) Firefox bug 338427:
    https://bugzilla.mozilla.org/show_bug.cgi?id=338427

    However it does not work in Safari either. I don’t know about Opera or Chrome.

    This is a pretty serious problem for language teaching applications. The correct behaviour should probably be:

    1) If no language is specified for textarea, use user’s default language; offer options [as existing] to disable spellcheck or change language.

    2) If language is specified, and dictionary is available, use this language. Offer options [as existing] to disable spellcheck or change language.

    3) If language is specified, and dictionary is not available, disable spellcheck. Offer options [as existing] to enable spellcheck and choose language.

    4) There should probably be some way to specify that a textarea is language-neutral (can you do lang=”?) in which case the existing behaviour – spellcheck enabled, user’s default language – should be used.

    Multilingual sites, such as those for language teaching (eg user’s preferred language will be English but the site will be in French) can then control behaviour correctly: if a particular area uses a particular language they can specify it and it’ll be all good. Monolingual sites will still benefit; imagine if I’m visiting a Japanese-language site, but my preferred language is English. Obviously my posts on that site will generally be in Japanese even though I don’t speak it very well. Etc.

    While I’m a programmer mys’elf it is pretty depressing that the problem of needing to turn spell-checker off due to COMPUTER languages (html, sql, whatever else people might want to post) has been at least partially solved, as per this blog post – while the problem of controlling the spell-checker for thousands of centuries-old HUMAN languages has not! Sigh.

    (Note: I am in fact using this technique with JavaScript setAttribute to disable spellchecking in Firefox for all fields other than English ones. But I shouldn’t have to do so. Sigh.)

Leave a Reply