← Back to release summary

CSS spelling and grammar features

Category
CSS
Type
Chromium catches up
Status
Enabled by default (Chrome 121)
Intent stage
Start prototyping

Summary

CSS highlight pseudo-elements for styling text that the UA has flagged as misspelled or grammatically incorrect, and line decorations exposing the UA’s default decorations for spelling and grammar errors. These features allow authors to choose more legible colors for the default spelling and grammar errors, highlight misspelled words with background colors or other decorations, and implement custom spell checking with native appearance.

Motivation

Authors should be able to customise the appearance of spelling/grammar mistakes. For example, the UA’s default colour for a mistake might be of inadequate contrast with some background colours. The pseudo-elements would enable this, while the text-decoration-line values would allow the UA stylesheet to express the default decoration, as well as allow authors to decorate other text as if it was a spelling/grammar mistake (e.g. for a custom spell checker).

Standards & signals

Samples: https://bucket.daz.cat/work/igalia/0/1.html

Explainers: https://drafts.csswg.org/css-pseudo-4/#selectordef-spelling-error https://drafts.csswg.org/css-pseudo-4/#selectordef-grammar-error https://drafts.csswg.org/css-text-decor-4/#valdef-text-decoration-line-spelling-error https://drafts.csswg.org/css-text-decor-4/#valdef-text-decoration-line-grammar-error

View on chromestatus.com