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

A common way to orient counters for lists in vertical text is to have an upright number. The number may be within parentheses, be circled, have a dot alongside it, etc.

This is very common in printed material, but is not well supported in web pages.

The GAP

css-pseudo The ::marker pseudo-element represents the automatically generated marker box of a list item, and can be styled.

The expected way to achieve this in HTML would be to use the following CSS:

li::marker { text-combine-upright: all; }

However not all browsers support text-combine-upright.

A workaround might be to use fullwidth characters for counters, such as ①, ②, ③ or ⒈, ⒉, ⒊ etc., but use of such a workaround requires the availability of custom built counter styles, and not all browsers support the CSS Counter Styles specification. So that doesn't work either.

Priority

It is a significant nuisance for content authoring to not be able to produce upright counters for lists. This is a very common approach to numbering lists in vertical text, and should be possible on the Web.

Tests

Interactive test, It is possible to make list counters upright in vertical text using li::marker { text-combine-upright: all; }.

Interactive test, It is possible to set list markers as upright circled numbers / dotted numbers in vertical text using an @counter-style definition

Action taken

Browser bug reports: Chromium • Webkit • Webkit • Mozilla

Specifically about centring: Chromium

Outcomes

Gecko, Blink, and WebKit based browsers now all support custom-defined counter styles, making it possible to use always-upright characters such as circled digits.

Blink and Gecko engines now support the CSS needed to correctly orient the counters at the top of vertical lines. WebKit is still holding out. This can be coupled with other styling to produce the expected result for standard digit or alpha counters.

A common counter style is a digit with a parenthesis above and below. Although text-combine-upright can be used with ::marker to make digits upright, only the 'all' value works at the moment. To support this type of counter it is necessary to support the 'digits' value, which none of the browsers currently do.