Intent to Ship: CSS caret-shape property

[Chromestatus]

Contact emails

sche...@chromium.org, zs...@igalia.com

Explainer

https://drafts.csswg.org/css-ui/#caret-shape

Specification

https://drafts.csswg.org/css-ui/#caret-shape

Summary

The shape of the caret in native applications is most commonly a vertical bar, an underscore or a rectangular block. In addition, the shape often varies depending on the input mode, such as insert or replace. The CSS caret-shape property allows sites to choose one of these shapes for the caret inside editable elements, or leave the choice up to the browser. The recognized property values are auto, bar, block and underscore.

Blink component

Blink>CSS

Web Feature ID

caret-shape

Motivation

To allow authors to specify the desired shape of the text insertion caret.

Initial public proposal

https://drafts.csswg.org/css-ui/#caret-shape

Search tags

caret-shape

TAG review

No information provided

TAG review status

Pending

Risks

Interoperability and Compatibility

No information provided

Gecko: Positive (https://github.com/mozilla/standards-positions/issues/1211) dholbert commented - "Seems reasonable; I'd suggest a "positive" standards-position. There are a handful of use-cases that use a caret-shape: block sort of rendering that I can find - e.g. gnome-terminal (which lets you choose between Block, I-Beam, and Underline) and the graphical version of emacs. And it seems useful for the web platform to offer the same sort of cosmetic flexibility in matching that caret-style, for web developers who are designing a web-based application inspired by these sorts of native applications. (Masayuki mentions a case in https://bugzilla.mozilla.org/show_bug.cgi?id=1715487#c0 where this sort of feature might make things easier for Korean IME users, too; so there's potentially a usability benefit for some international audiences.)"

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/484)

Web developers: No signals Bloomberg have requested this. Also see above comments by dholbert on possible use cases.

Other signals:

Activation

No risk.

Security

None

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

No information provided

Debuggability

Support in DevTools.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes
Tests are located at https://github.com/web-platform-tests/wpt/blob/master/css/css-ui/, including Parsing test: caret-shape-parsing.html; caret-shape: block tests: caret-shape-block-001.html caret-shape-block-001-vrl.html caret-shape-block-001-rtl.html caret-shape-block-001-rtl-vlr.html caret-shape-block-001-rtl-vrl.html caret-shape-block-001-rtl-sideways-rl.html caret-shape-block-001-sideways-lr.html caret-shape-block-001-rtl-sideways-lr.html caret-shape-block-002.html caret-shape-block-empty-001.html caret-shape-block-fallback-001.html caret-shape-block-zoom.html; caret-shape: underscore tests: caret-shape-underscore-001.html; caret-shape overflow tests: caret-eol-001.html caret-eol-002.html caret-eol-003.html caret-eol-004.tentative.html.

Flag name on about://flags

Experimental web platform features

Finch feature name

CSSCaretShape

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/353713061

Measurement

Through usual CSS feature counters.

Estimated milestones

No milestones specified

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

No information provided

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6106160780017664?gate=4913075303743488

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/680b870d.170a0220.15e62e.0520.GAE%40google.com

This intent message was generated by Chrome Platform Status.

[Mike Taylor]

Note that Masayuki-san also just filed https://github.com/w3c/csswg-drafts/issues/13055, describing cases where this feature might make IMEs harder to use. 

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/484)

Web developers: No signals Bloomberg have requested this. Also see above comments by dholbert on possible use cases.

Other signals:

Activation

No risk.

Security

None

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

No information provided

Debuggability

Support in DevTools.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes
Tests are located at https://github.com/web-platform-tests/wpt/blob/master/css/css-ui/, including Parsing test: caret-shape-parsing.html; caret-shape: block tests: caret-shape-block-001.html caret-shape-block-001-vrl.html caret-shape-block-001-rtl.html caret-shape-block-001-rtl-vlr.html caret-shape-block-001-rtl-vrl.html caret-shape-block-001-rtl-sideways-rl.html caret-shape-block-001-sideways-lr.html caret-shape-block-001-rtl-sideways-lr.html caret-shape-block-002.html caret-shape-block-empty-001.html caret-shape-block-fallback-001.html caret-shape-block-zoom.html; caret-shape: underscore tests: caret-shape-underscore-001.html; caret-shape overflow tests: caret-eol-001.html caret-eol-002.html caret-eol-003.html caret-eol-004.tentative.html. 

https://wpt.fyi/results/css/css-ui?label=experimental&label=master&aligned, in case others want to see the results at a quick glance.

Flag name on about://flags

Experimental web platform features

Finch feature name

CSSCaretShape

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/353713061

Measurement

Through usual CSS feature counters.

Estimated milestones

No milestones specified

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

No information provided

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6106160780017664?gate=4913075303743488

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/680b870d.170a0220.15e62e.0520.GAE%40google.com

This intent message was generated by Chrome Platform Status.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6901fbb3.050a0220.56be2.0463.GAE%40google.com.

[Alex Russell]

LGTM1, contingent on a resolution to the a11y concern Mike has flagged.

Best,

Alex

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Philip Jägenstedt]

LGTM2

Stephen, Ziran, how does this interact with IME in Chromium? Can you document the behavior in https://github.com/w3c/csswg-drafts/issues/13055 and follow up to align with the WG resolution when there is one? Updating this thread when that happens would be much appreciated.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6901fbb3.050a0220.56be2.0463.GAE%40google.com.

--

You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/88d21f34-5297-4618-9a62-231cb523740bn%40chromium.org.

[Stephen Chenney]

Am I correct in understanding that we can ship and follow up with the IME issue?

Regardless we will capture the IME behavior and update the CSS WG issue. With some luck we can get it discussed soon.

Cheers,

Stephen.

[Mike Taylor]

Yes, LGTM3. If it turns out that this issue is somehow going to cause serious issues for users (it's not clear to me at all if this is the case) and the WG decides on something that affects what we ship, please follow up.

[Philip Jägenstedt]

What I would suggest is to test the current behavior and make any changes you think are necessary for a good user experience, to report that on the issue and then ship.

FWIW, I tested <textarea style="caret-shape:block"> with a simplified Chinese IME on macOS, and I failed to make it misbehave in some obvious way. When stepping back to put the caret within the currently uncommitted text can insert a space in the string that is the size of a block caret, but it does that regardless of the caret shape it seems.

P.S. I also tested caret-shape:🥕 but no hidden easter egg...

[Ziran Sun]

Thanks very much for the suggestions! We will look into this issue and follow up the WG discussions if there is any.