Horizontal-in-vertical (tate-chu-yoko) lacks support, especially for the digits value

[xfq]

This issue is applicable to Chinese, Japanese, Korean, & Mongolian.

In vertically set text, it is normal to display numbers with 2-3 digits and sometimes up 4 (and sometimes other things) horizontally within a one character space. This is particularly common for things such as day and month digits. This is often referred to using the japanese name, tate chu yoko.

The GAP

In writing-modes CSS provides 2 solutions to enable tate chu yoko.

1. text-combine-upright property with the all value makes everything within the element to which it is attached horizontal. It has to be applied to each location where the presentation needs to be changed.
2. digits <integer> identifies numbers with a given digit count within the element styled, and presents them horizontally. If the integer is omitted, the default is 2. This is much easier to use, because it can be applied to a paragraph or section, etc. and instances will be found automatically.

The CSS text-combine-upright property works with the all value in Gecko and Blink browsers, but not in Webkit. (Webkit supports the proprietary property -webkit-text-combine:horizontal.)

No major browsers support the digits value, with or without a following digit, which is a shame since it is a better approach to the problem.

(The CSS digits value was supported by Legacy Edge with it's proprietary property name, but single digits were stretched to fit the width of the (vertical) line. The new (Blink-based) Edge no longer supports it.)

Priority:

The unavailability of the digits value is an inconvenience, since more interventions and markup are needed when using the all value. Since the all value can be used with most browsers, this is classed as Advanced, but really it is probably close to Basic.

Tests

Interactive test, text-combine-upright:all will make up to 4 characters run horizontally in vertical text, and not exceed the line width.

Interactive test, text-combine-upright:digits set on a parent element will make up to 2 digits run horizontally in vertical text, without special markup, but not longer numbers

Interactive test, text-combine-upright:digits followed by a number from 2 to 4, set on a parent element, will make up to that number of digits run horizontally in vertical text, without special markup, but not longer ones

Action taken

Browser bug reports: Chromium • Webkit • Mozilla

Outcomes

Webkit now supports text-combine-upright: all without a prefix. This means that Blink, WebKit, and Gecko browser engines now all support this property-value combination.

Support is still lacking, however, for the more useful digits value.

[xfq]

The first comment in this issue contains text that will automatically appear in one or more gap-analysis documents as a subsection with the same title as this issue. Any edits made to that comment will be immediately available in the Editor's draft of the document. Proposals for changes or discussion of the content can be made by adding comments below this point.

Relevant gap analysis documents include:
Chinese • Japanese • Korean • Mongolian

[xfq]

Related browser bugs:

• https://bugs.chromium.org/p/chromium/issues/detail?id=1052659
• https://bugs.webkit.org/show_bug.cgi?id=150821
• https://bugzilla.mozilla.org/show_bug.cgi?id=1258635