Writing Mode for Canvas text

[schenney-chromium]

What problem are you trying to solve?

Canvas text supports text direction and language for internationalization, but there is no way to render characters in the correct orientation for vertical writing modes. While the text string may be rotated using canvas transforms to get a vertical orientation, the characters within the string will not be oriented correctly.

What solutions exist today?

The only way to solve this today is to render each character separately, each one positioned vertically below the previous.

How would you solve it?

I think the simplest solution for web developers is to support the CSS writing modes, which is possibly easiest for browsers too. Someone on Stack Overflow claims that Firefox applies CSS writing mode to rendered text when the canvas element has such style. There's quite a bit of work to make this happen because the definition of origin, start, end, align etc all need to make sense with the various writing modes.

Anything else?

This issue came up in TAG review for Extended Text Metrics. I think we really need to solve it.

[annevk]

This has since been removed from the source resource, but there used to be an API sketch in there for this when text support was first added: 96b4346. It seems like it should be more tractable now that all browsers have vertical text support of some kind.

cc @whatwg/canvas

[schenney-chromium]

In that case I'll take a look at implementing this and come back with a concrete proposal.

[Kaiido]

I guess I am that "someone on StackOverflow", so indeed, Firefox does respect writing-mode and text-orientation from CSS. https://jsfiddle.net/c8uqko3x/

There it seems the textBaseline will affect the x-axis position, and so will the textAlign, though this latter will use the horizontal text width as reference, which both seem very weird to me.

Chromium and Safari also do something here, in that they will render the text vertically, but rotated so that it's actually rendered horizontally...

There, the textBaseline will affect the y axis, which would have made sense if the text wasn't rotated at 90°... And textAlign will affect the x-axis, which does make sense given the text is rotated.

---

Personally, I'd be in favor of adding explicit attributes to the 2D context interface, and to try to remove this CSS inheritance thing. Given the interop discrepancies there, I doubt there are much websites in the wild that do make use of it.

---

Ps: I now see that Chrome and Safari incorrectly pass the tests from https://chromium-review.googlesource.com/c/chromium/src/+/5732132 because they didn't set the text-orientation along the writing-mode. I opened web-platform-tests/wpt#53782

[tkent-google]

I think this is a dupe of #4070.

[tkent-google]

I think this is a dupe of #4070.

Ah, not a dupe because it's about TextMetrics.