Search code examples
htmlinputtextarealangspelling

Can I configure the dictionary language used by the spellcheck attribute on my form elements?

I need to add the spellcheck attribute to a few <textarea> and <input> elements. My question is: "Is the version of English that spellcheck adheres to configurable?" I'm in Australia and we use British English. My understanding is that the spellchecker is configured to American English by default.

Does it have anything to do with the lang attribute that is initially set on the html element?

Solution

  • I believe I have sourced an answer to this question and been schooled on English in the process.

    The W3C reference of language codes would suggest that the version of English is not configurable. However, I found a more detailed W3C Working Group Note that reads as follows:

    Note 2: Allowed values for the lang and xml:lang attributes are indicated in the resources referenced below. Language tags use a primary code to indicate the language, and optional subcodes (separated by hyphen characters) to indicate variants of the language. For instance, English is indicated with the primary code "en"; British English and American English can be distinguished by using "en-GB" and "en-US", respectively. Use of the primary code is important for this technique. Use of subcodes is optional but may be helpful in certain circumstances.

    Here is a full list of subcodes: ISO 3166-1 alpha-2.

    This means that any one of the following values are technically valid; lang="en-AU", lang="en-GB" and lang="en-US".

    I ran two tests to determine how spellcheck behaved with these language subcodes (see snippet). I ran these tests on macOS High Sierra Version 10.13.2 in Safari Version 11.0.2, Chrome Version 63.0.3239.132 and Firefox Version 57.0.4 and had mixed results.

    None of the browsers I tested seemed to be impacted by the lang attribute declarations made to various elements. I tested with dictionaries turned on and off at a system level.

    I tested Safari and Chrome first and had the same result: enter image description here

    I then tested Firefox and had this result: enter image description here

    So in summation: "Yes" the version of English is configurable when using the lang attribute. "No", spellcheck doesn't seem to be configurable to the language you declare with the lang attribute, but to the browser's configured version of English instead.

    I hope this answer helps somebody else.

    <!-- Test #1 -->
<textarea lang="en-AU" spellcheck="true"></textarea>
<textarea lang="en-GB" spellcheck="true"></textarea>
<textarea lang="en-US" spellcheck="true"></textarea>
<div contenteditable="true" lang="en-AU" spellcheck="true">insert spelling</div>
<div contenteditable="true" lang="en-GB" spellcheck="true">insert spelling</div>
<div contenteditable="true" lang="en-US" spellcheck="true">insert spelling</div>

    <!-- Test #2 -->
<!DOCTYPE html>
<html lang="en-AU">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<textarea spellcheck="true"></textarea>
	<div contenteditable="true" spellcheck="true">insert spelling</div>
</body>
</html>