EditContext needs a way to inform IMEs of vertical writing modes

[dandclark]

When editing vertical text, IMEs may position themselves differently and may layout their own contents differently.
Browsers (or at least Chromium) notify IMEs when the cursor is currently editing vertical text so that they can make these adjustments.

This isn't currently working in EditContext.

One fix would be to check the computed styles of the EditContext's associated element to determine whether to tell the IME it's in vertical versus horizontal writing mode. This is a bit odd though since EditContext doesn't otherwise rely on the associated element's styles, and making changes to those styles in response to EditContext state changes could be an awkward way of managing this.

Another would be to use the computed style at the current cursor's position (but this doesn't work for <canvas>-based EditContext).

I think the right fix is to add a property on EditContext allowing the author to explicitly set whether the current writing mode is horizontal or vertical.

let editContext = new EditContext();
editContext.writingMode; // default is "horizontal"
editContxt.writingMode = "vertical"; // Now we report to IMEs that vertical text is being edited.

// Or just a boolean:
let editContext = new EditContext();
editContext.isVerticalWritingMode; // default is false
editContext.isVerticalWritingMode = true; // Now we report to IMEs that vertical text is being edited.

Something I'm unsure about is whether this should match the options available to CSS writing-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/writing-mode. I'm not sure whether all of those permutations are relevant to IMEs or if the only thing we need is horizontal versus vertical. Even if only horizontal/vertical is needed, maybe there's still a consistency argument that they should be the same?

[tkent-google]

Ideally, the IME candidate window should be placed on the side corresponding to the block progression direction relative to the text caret. In other words, it would be desirable to distinguish between vertical-rl and vertical-lr.

However, as far as I know, there are currently no platform IME APIs that differentiate between vertical-rl and vertical-lr.

[karintou8710]

Thanks for opening this — I filed the Chromium issue.

Background

I'm building a WYSIWYG editor for vertical Japanese text with EditContext (tatefude). Ruby (furigana) is everywhere in Japanese novels and scripts, and it is where browsers are least reliable.

In a contenteditable editor, changing the DOM during an IME composition interrupts it, so the editing while composing has to be left to the browser — and ruby is an unusual enough layout that the browser gets it wrong there. With EditContext I can re-render during composition myself, so that does not happen.

On the API shape

In Japanese, vertical text is always vertical-rl, and when the text is treated as vertical the candidate window appears on the left. So for Japanese a simple vertical flag would be enough. I can't speak for the other vertical scripts.

Happy to help if there's anything I can do.