[csswg-drafts] [css-fonts] Vertical text doesn't play nicely with font-style and font-stretch (#4044)

litherum has just created a new issue for https://github.com/w3c/csswg-drafts:

== [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](https://github.com/w3c/csswg-drafts/files/3308096/varfontbad.m4v.zip)

Instead, the desired result of `font-stretch` is where the upright characters grow vertically and the rotated characters grow horizontally:

<img width="754" alt="Screen Shot 2019-06-19 at 3 38 57 PM" src="https://user-images.githubusercontent.com/918903/59806191-63eabd00-92a8-11e9-8fab-2dbc36563f55.png">

The font probably can't do this automatically because:
- The font doesn't know whether `text-orientation: upright` is specified
- We shouldn't require every font to encode UAX50 inside itself
  - And not all browsers/apps adhere to UAX50 so that wouldn't even be correct

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.)

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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4044 using your GitHub account

Received on Wednesday, 19 June 2019 22:45:22 UTC