Style Spelling and Grammar Errors with the ::spelling-error and ::grammar-error pseudo-elements

This content originally appeared on Bram.us and was authored by Bramus!

Part of the CSS Pseudo-Elements Level 4 Specification are ways to style spelling and grammar errors.

By default spelling errors — words you have mistyped — get a red dotted underline, thanks to the ::spelling-error pseudo-class selector you can tweak that. Grammar errors — such as a missing capital letter at the beginning of a sentence — can be styled with the ::grammar-error pseudo-class selector.

::spelling-error {
  text-decoration: underline wavy red;
}

::grammar-error {
  text-decoration: underline wavy blue;
}

~

Embedded below is a demo that shows the output of the browser you are visiting with, and the wanted output:

See the Pen The Future of CSS: Style Grammar and Spelling Errors (Demo) by Bramus (@bramus) on CodePen.

As you can see your browser does not yield the proper output, as ::spelling-error/::grammar-error currently have no support in any browser at the time of writing:

~

Once these highlight pseudo-elements do gain browser support, do note that they can only be styled by a limited set of properties that do not affect layout. Only following properties apply to the highlight pseudo-elements:

• color
• background-color
• text-decoration and its associated properties
• text-shadow
• stroke-color, fill-color, and stroke-width

~

In case you are interested, here are the relevant bugs to flag/star/follow:

• Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1035708
• Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1694053
• Safari: https://bugs.webkit.org/show_bug.cgi?id=175784

~

~

This content originally appeared on Bram.us and was authored by Bramus!

Print Share Comment Cite Upload Translate Updates

APA

Bramus! | Sciencx (2021-02-21T20:43:56+00:00) Style Spelling and Grammar Errors with the ::spelling-error and ::grammar-error pseudo-elements. Retrieved from https://www.scien.cx/2021/02/21/style-spelling-and-grammar-errors-with-the-spelling-error-and-grammar-error-pseudo-elements/

MLA

" » Style Spelling and Grammar Errors with the ::spelling-error and ::grammar-error pseudo-elements." Bramus! | Sciencx - Sunday February 21, 2021, https://www.scien.cx/2021/02/21/style-spelling-and-grammar-errors-with-the-spelling-error-and-grammar-error-pseudo-elements/

HARVARD

Bramus! | Sciencx Sunday February 21, 2021 » Style Spelling and Grammar Errors with the ::spelling-error and ::grammar-error pseudo-elements., viewed ,<https://www.scien.cx/2021/02/21/style-spelling-and-grammar-errors-with-the-spelling-error-and-grammar-error-pseudo-elements/>

VANCOUVER

Bramus! | Sciencx - » Style Spelling and Grammar Errors with the ::spelling-error and ::grammar-error pseudo-elements. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/21/style-spelling-and-grammar-errors-with-the-spelling-error-and-grammar-error-pseudo-elements/

CHICAGO

" » Style Spelling and Grammar Errors with the ::spelling-error and ::grammar-error pseudo-elements." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/02/21/style-spelling-and-grammar-errors-with-the-spelling-error-and-grammar-error-pseudo-elements/

IEEE

" » Style Spelling and Grammar Errors with the ::spelling-error and ::grammar-error pseudo-elements." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/02/21/style-spelling-and-grammar-errors-with-the-spelling-error-and-grammar-error-pseudo-elements/. [Accessed: ]

rf:citation

» Style Spelling and Grammar Errors with the ::spelling-error and ::grammar-error pseudo-elements | Bramus! | Sciencx | https://www.scien.cx/2021/02/21/style-spelling-and-grammar-errors-with-the-spelling-error-and-grammar-error-pseudo-elements/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.