CSS getting additional line style options for text, including spelling and grammar errors

The W3C has proposed new ways to decorate lines that will allow web developers and designers to control the thickness and offset of lines. They are also introducing spelling and grammar error line properties.

Cascading Style Sheets (CSS), the language used to style web pages, is expected to get additional controls for how lines appear with text. The current draft, which is maintained by the CSS Working Group at W3C, specified the following new properties:

Jen Simmons, Designer Advocate at Mozilla, shared what the new properties look like when they’re rendered in a browser.

CSS Line Examples
Examples of new Text Decoration and Underline properties. Credit: Jen Simmons

Simmons stated that they already work in some browsers today. All have fantastic fallbacks, so you can start using them now.

In addition to the new properties, the familiar squiggly red spelling and green grammar error lines people are familiar with seeing on native word processing apps may be coming to CSS too. Originally proposed as a pseudo element (::spelling-error), they are now part of the draft as a Text Decoration Line property (text-decoration-line: grammar-error;).

When they becomes available and are supported by all major browsers, it will allow word processing web apps like the ones provided by Grammarly, Google Docs, and Apple Pages, to display spelling and grammar error lines using native CSS.

Jon is the founder and Managing Editor of Coywolf. He is a serial entrepreneur with over 25 years of experience in web development, SaaS, internet strategy, and digital marketing. Follow @henshaw

Never miss an important story – Subscribe to Newsletter