1715487 - [css-ui] Implement `caret-shape`

Status: UNCONFIRMED

(Core :: Layout, enhancement)

Description

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)(PTO: 9/19-9/27)]

Although I don't know whether caret-shape is stable in the draft, but I file this for bug 979112 which may improve Korean IME users because Korean IME (at least on Windows) uses wide caret for highlighting composing Hangle character.

If we have a path to draw wide caret, IME handling code may be able to use it.

Comment 2

[Daniel Holbert [:dholbert]]

FWIW, Chromium is implementing this in https://issues.chromium.org/issues/353713061 .

Comment 3

[Daniel Holbert [:dholbert]]

If/when we work on this, the relevant code is in nsCaret, here:
https://searchfox.org/mozilla-central/rev/757352926b1b84314d599b17ede076e0700930b9/layout/base/nsCaret.h

Somewhat-relatedly, our nsCaret implementation does currently have support for drawing a somewhat-thicker style of caret in some conditions (when amongst certain CJK characters per bug 335359), e.g. here:
https://searchfox.org/mozilla-central/rev/757352926b1b84314d599b17ede076e0700930b9/layout/base/nsCaret.cpp#77

(Our approach here might want to draw inspiration from that, and/or share code with that.)

Comment 4

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)(PTO: 9/19-9/27)]

Well, I have tried to implement this in my brain and I tried to make it stop using the thicker caret for CJK characters.

First, I'd like to explain why we implemented the thicker caret for CJK characters. Previously, we used "invert" to paint caret. However, we stopped the approach for preparing to use GPU to render the web. Then, the caret is started to painted with "currentColor" so that the caret color becomes the same color as text. Then, it comes harder to see the caret when some painted at next to some CJK characters, e.g., "国". Some CJK character's glyph has similar part as vertical var. So, only 0 - 2 pixels are blinking when the caret overlaps with the such part. Therefore, we started painting the caret thicker when we need to paint caret immediately before/after a CJK character since in the most cases, at least one pixel width does not overlap with the glyph.

However, the thicker caret may be ugly. IIRC, there were some bug reports about that when we started using the thicker caret. And the thicker caret may be not easier to see within the worst case, i.e., all of or most of the caret shape overlaps with the glyph. Therefore, I tried to think how we can fix this.

The idea which I thought to solve this issue is, make nsCaret repaint the character again with the inverted color of "currentColor". I.e., paint the fill the caret rect with the "currentColor" first, then, paint the text clipped in the caret rect with the "inverted" color. Then, unless the "inverted" color is similar to "currentColor", the caret blinks all pixels in its shape.

This approach may make it easier to see the caret when "■" with box style caret, "_" with underscore style caret.

One of the problem of using "inverted" color is, it may be similar if the source color is similar to 50% gray. So, we need to be careful to consider the inverted color.