6
Intent to Prototype: CSS spelling and grammar features
source link: https://groups.google.com/a/chromium.org/g/blink-dev/c/8UEcRJViPEU/m/YZml0HGxCQAJ
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Delan Azabani
Jan 7, 2021, 7:01:09 AM
to blink-dev
Contact emails
Summary
CSS highlight pseudo-elements representing text that the UA has flagged as misspelled or grammatically incorrect, and text-decoration-line property values representing the UA’s default decorations for spelling mistakes and grammar mistakes.
This feature involves the implementation of two pseudo-elements (::spelling-error and ::grammar-error), and two new values for the text-decoration-line property (spelling-error and grammar-error).
Examples
Live version of everything below:
https://bucket.daz.cat/work/igalia/0/1.html
UA stylesheet:
::spelling-error { text-decoration-line: spelling-error; }
::grammar-error { text-decoration-line: grammar-error; }
Styling spelling mistakes:
p[contenteditable=true] {
/* makes typical red squiggly lines hard to read :c */
background: #BF3030;
}
/* highlight selector (only performant properties allowed) */
p ::spelling-error {
/* line is spelling-error, so UA may ignore this */
text-decoration-color: white;
/* line is spelling-error, but UA must not ignore this */
background: white;
/* line is underline here, not spelling-error */
text-decoration: 2px orange wavy underline;
}
Custom spelling and grammar checkers, using UA decorations:
p .spelling {
/* fallback for older browsers */
text-decoration: 1px red wavy underline;
text-decoration: spelling-error;
}
p .grammar {
/* fallback for older browsers */
text-decoration: 1px green wavy underline;
text-decoration: grammar-error;
}
Live version of everything below:
https://bucket.daz.cat/work/igalia/0/1.html
UA stylesheet:
::spelling-error { text-decoration-line: spelling-error; }
::grammar-error { text-decoration-line: grammar-error; }
Styling spelling mistakes:
p[contenteditable=true] {
/* makes typical red squiggly lines hard to read :c */
background: #BF3030;
}
/* highlight selector (only performant properties allowed) */
p ::spelling-error {
/* line is spelling-error, so UA may ignore this */
text-decoration-color: white;
/* line is spelling-error, but UA must not ignore this */
background: white;
/* line is underline here, not spelling-error */
text-decoration: 2px orange wavy underline;
}
Custom spelling and grammar checkers, using UA decorations:
p .spelling {
/* fallback for older browsers */
text-decoration: 1px red wavy underline;
text-decoration: spelling-error;
}
p .grammar {
/* fallback for older browsers */
text-decoration: 1px green wavy underline;
text-decoration: grammar-error;
}
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).
Design doc/spec
• 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
No TAG review request for these features, but all of them were resolved to be added by the CSSWG, and defined in the css-pseudo and css-text-decor-4 specs like the other pseudo-elements (e.g. ::target-text) and values (e.g. line-through).
We are also investigating the possibility of refactoring document markers (spelling/grammar errors in particular) and other text decorations to share some of their internals as part of this feature, to maximise customisability as recommended by the spec. The exact changes to be made, if any, are pending discussion with code owners and a design doc.
• 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
No TAG review request for these features, but all of them were resolved to be added by the CSSWG, and defined in the css-pseudo and css-text-decor-4 specs like the other pseudo-elements (e.g. ::target-text) and values (e.g. line-through).
We are also investigating the possibility of refactoring document markers (spelling/grammar errors in particular) and other text decorations to share some of their internals as part of this feature, to maximise customisability as recommended by the spec. The exact changes to be made, if any, are pending discussion with code owners and a design doc.
Risks
Interoperability and Compatibility
Main issue would be the lack of support in other browsers.
• Gecko: No signal yet (<https://github.com/mozilla/standards-positions/issues/470>).
• WebKit: No signal yet (<https://lists.webkit.org/pipermail/webkit-dev/2021-January/031660.html>).
• WebKit has an old WIP patch from 2018 at <https://bugs.webkit.org/show_bug.cgi?id=175784>.
• Web developers: Positive (<https://dev.to/lampewebdev/css-pseudo-elements-classes-you-have-never-heard-of-30hl#the-grammarerror-and-spellingerror-pseudoelement>).
Ergonomics
The new pseudo-elements depend on the new text-decoration-line values for UA stylesheet support. They are highlight pseudo-elements, which should pose minimal performance risk due to the limited set of CSS properties they allow.
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
Is this feature fully tested by web-platform-tests?
Not yet. There are some tests in css/css-pseudo and css/css-text-decor, but we’ll improve test coverage for these features during implementation.
Link to entry on the feature dashboard
Tracking bug
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK