Unable to make list counters stand upright in vertical text

r12a commented 4 years ago

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 with a dot alongside it. Alternatively, upright circled digits may be used.

vertical-lists

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 & results

Interactive test, It is possible to make list counters upright in vertical text using li::marker { text-combine-upright: all; }.
Gecko and Blink based browsers now both support this behaviour. Webkit browsers do not.

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

Gecko and Blink based browsers now both support custom-defined counter styles. Webkit and Blink browsers do not.

Action taken

Browser bug reports: Chromium • Webkit • Webkit • Mozilla

Outcomes

Blink engines now support the CSS needed to correctly orient the counters at the top of vertical lines. WebKit is still holding out.

WebKit and Blink engines have now implemented the Counter Styles spec, so the use of fullwidth circled or dotted characters now works. That approach is now supported across the 3 main browser engines.

r12a commented 4 years ago

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 document. Proposals for changes or discussion of the content can be made in comments below this point.

Relevant gap analysis documents include: _Chinese • Japanese • Mongolian_

xfq commented 4 years ago

Related browser bugs:

Sefank commented 2 years ago

It seems it's fixed in Chromium now.

r12a commented 2 years ago

I updated the tests and the text of this issue, and applied the latest template. Now indicates that it's fixed in Chromium. Thanks, @Sefank.

xfq commented 10 months ago

Is this applicable to Mongolian? From https://www.w3.org/International/mlreq/#h_counters the counters do not seem to stand upright in vertical text.

r12a commented 7 months ago

the counters do not seem to stand upright in vertical text.

That's the problem we're trying to solve.

xfq commented 7 months ago

If that's the expected behaviour, we should fix the image in mlreq.

r12a commented 7 months ago

If that's the expected behaviour, we should fix the image in mlreq.

Fixed.

w3c / jlreq