[css-fonts] Vertical text doesn't play nicely with font-style and font-stretch

Consider a font that supports both Japanese and Latin, and wants to work well in both vertical writing mode and horizontal writing mode. It's totally reasonable for such a font to want to react to font-style and font-stretch.

Naively, such a font would react to font-stretch by making all its characters horizontally wider, and would react to font-style by making the tops of the characters skew to the right.

However, in vertical writing mode, this isn't right. In vertical writing mode, some characters are upright (i.e. Japanese characters) while some characters are rotated (i.e. Latin characters). Therefore, the naive solution would lead to bad behavior.

Here's a video of this bad behavior of font-stretch, courtesy of Nat McCully at Adobe:
varfontbad.m4v.zip

Instead, the desired result of font-stretch is where the upright characters grow vertically and the rotated characters grow horizontally (image also courtesy of Nat McCully at Adobe):

It's unclear whether the font can do this automatically.

• The vert feature might not be hooked up to text-orientation: mixed and text-orientation: upright in every browser
• Even if it was hooked up, it might be difficult for an author to make sure the interaction between vert and variation axes is correct.
• We shouldn't require every font to encode UAX50 inside itself
  • Not all browsers/apps adhere to UAX50 so that wouldn't even be correct if it were a requirement

This was discussed at the most recent OpenType F2F, and there was interest in the font using two distinct low-level physical controls for vertical stretching and horizontal stretching, and the browser/app determining which of those types of stretching to use. (Sort of like how browsers are supposed to apply the vert feature just for some of the characters in the vertical line.)

Doing this at the CSS level is tricky because font-stretch and font-style are font selection properties. Changing their meaning causes side effects, like new different fonts get downloaded.

This issue probably requires coordination between OpenType and CSS to come up with a story for how this is supposed to work and what font creators can do to make their font work properly.

This discussion should include both font-stretch and font-style. The solutions for these two properties may end up being different.

This problem has existed since before variable fonts, but is particularly visible now as companies are more active in making CJK variable fonts that react to wdth and slnt.