[Problem/Bug]: Spellchecker ignores HTML `lang` attribute, uses only Environment `Language` setting

[omascia]

What happened?

Product: WebView2 Runtime (Chromium-based)
SDK Version: 1.0.3351.48
Runtime Version: 137.0.3296.93
OS: Windows 11 24H2 (build 26100.4484)
Edge Version : 138.0.3351.55

---

Repro Steps

1. In native C++, create a WebView2 environment with

   ComPtr<ICoreWebView2EnvironmentOptions> options = Make<CoreWebView2EnvironmentOptions>();
   options->put_Language(L"nl");  
   CreateCoreWebView2EnvironmentWithOptions(nullptr, nullptr, options.Get(), …);

2. Create a WebView2 controller and navigate to an HTML page containing:

   <div id="editor">
     <div class="ql-editor" contenteditable="true" lang="fr">
       Ceci est un texte français correct.
     </div>
   </div>

3. Note that all words are underlined in red—even though lang="fr" and the text is valid French.

4. Change the lang attribute dynamically via JavaScript (e.g. to "nl" or "en"). The spellchecker never re-evaluates against the new language.

5. Conversely, if you initialize the environment with put_Language(L"fr"), then French text is not underlined, but all other languages (including correct English or Dutch) are.

---

Expected Behavior

• Spellchecking should respect the HTML5 lang attribute on contenteditable (and <input>/<textarea>) elements and switch dictionaries dynamically.
• Updating lang in the DOM should trigger a re-evaluation of the spellcheck dictionary for that element or subtree.
• ICoreWebView2EnvironmentOptions::Language should set only the UI language (menus, dialogs, Accept-Language header), not override per-element content language.

---

Actual Behavior

• WebView2 uses the dictionary associated with the Environment language (set via put_Language) for all content, ignoring per-element lang attributes.
• Dynamically changing lang in the page has no effect on which spellcheck dictionary is used.
• Languages with no installed dictionary (e.g. Greek on my machine) appear un-squiggled only because spellcheck is effectively disabled—not because lang is honored.

---

Impact

Multilingual editors (QuillJS, CKEditor, TinyMCE, custom rich-text controls) cannot provide correct, per-segment spellchecking. The only workaround is to spin up separate WebView2 instances per language or disable spellcheck entirely.

---

Workarounds Tried

• Installing Windows “Proofing Tools” and Edge spellcheck dictionaries for each language.
• Toggling spellcheck attr off/on at runtime, refocusing, DOM re-insertion.
• Removing and re-adding languages in edge://settings/languages.
• Confirming lang is present on .ql-editor and re-loading WebView.

None of these restore per-element spellcheck.

---

Suggested Fix / Enhancement

1. Expose an API to explicitly set/query spellcheck dictionaries at runtime (per-view or per-element), but the best way would simply to consider the html lang attributes on elements.
2. Have Chromium re-evaluate dictionaries when lang attributes change (align with HTML5 spec “hints” for spellcheck).
3. Decouple the environment’s Language (UI/headers) from content spellcheck dictionaries.

---

Sample Minimal Repro

• Host process: native C++ using WebView2 SDK
• Environment creation: as above, with put_Language(L"nl")
• HTML page: simple contenteditable div with varying lang values
• Observe: always Dutch spellcheck, never French (or English, or German) as indicated by lang

---

Please let me know if you need any further details. Thank you for taking multilingual support seriously!

Importance

Moderate. My app's user experience is affected, but still usable.

Runtime Channel

Stable release (WebView2 Runtime)

Runtime Version

137.0.3296.93

SDK Version

1.0.3351.48

Framework

Win32

Operating System

Windows 11

OS Version

26100.4484

Repro steps

1. In native C++, create a WebView2 environment with

   ComPtr<ICoreWebView2EnvironmentOptions> options = Make<CoreWebView2EnvironmentOptions>();
   options->put_Language(L"nl");  
   CreateCoreWebView2EnvironmentWithOptions(nullptr, nullptr, options.Get(), …);

2. Create a WebView2 controller and navigate to an HTML page containing:

   <div id="editor">
     <div class="ql-editor" contenteditable="true" lang="fr">
       Ceci est un texte français correct.
     </div>
   </div>

3. Note that all words are underlined in red—even though lang="fr" and the text is valid French.

4. Change the lang attribute dynamically via JavaScript (e.g. to "nl" or "en"). The spellchecker never re-evaluates against the new language.

5. Conversely, if you initialize the environment with put_Language(L"fr"), then French text is not underlined, but all other languages (including correct English or Dutch) are.

Repros in Edge Browser

Yes, issue can be reproduced in the corresponding Edge version

Regression

No, this never worked

Last working version (if regression)

No response

[krbharadwaj]

Thanks @omascia for the details around the issue. I am able to reproduce it in latest WebView runtime.
Investigating it further.