CSS implicit list-item counter

[yamahige]

Is your feature request related to a problem? Please describe.
I want to prepare an ordered list example with a large number digits. But, it seems that Vivliostyle does not support the implicit list-item counter.
CSS Lists and Counters Module Level 3 - 4.6. The Implicit list-item Counter

li {
    counter-increment: list-item 2;
}

<ol>
<li>NNNNN</li>
<li>NNNNN</li>
<li>NNNNN</li>
</ol>

Vivliostyle:
https://vivliostyle.org/viewer/#src=https://gist.githubusercontent.com/yamahige/4e3e2bac575acc84fde84aeda5d711b9/raw/dcd73500606634a5aacf25ac8845852928a85b47/list-item-counter.html

Chrome browser:

Describe the solution you'd like
Support the implicit built-in list-item counter

Describe alternatives you've considered
Use custom ordered list with explicit custom counter.

[MurakamiShinyu]

In the current implementation, Vivliostyle.js uses ua-list-item counter instead of list-item. I will change this and check if it works.

vivliostyle.js/packages/core/src/vivliostyle/css-cascade.ts

Lines 3049 to 3071 in 4997036

	if (
	(this.currentLocalName == "ol" || this.currentLocalName == "ul") &&
	this.currentNamespace == Base.NS.XHTML
	) {
	if (!resetMap) {
	resetMap = {};
	}
	resetMap["ua-list-item"] = ((this.currentElement as any)?.start ?? 1) - 1;
	}
	if (displayVal === Css.ident.list_item) {
	if (!incrementMap) {
	incrementMap = {};
	}
	incrementMap["ua-list-item"] = 1;
	if (
	/^\s*[-+]?\d/.test(this.currentElement?.getAttribute("value") ?? "")
	) {
	if (!resetMap) {
	resetMap = {};
	}
	resetMap["ua-list-item"] = (this.currentElement as any).value - 1;
	}
	}

vivliostyle.js/packages/core/src/vivliostyle/css-cascade.ts

Lines 3130 to 3137 in 4997036

	if (displayVal === Css.ident.list_item) {
	const listItemCounts = this.counters["ua-list-item"];
	const listItemCount = listItemCounts[listItemCounts.length - 1];
	props["ua-list-item-count"] = new CascadeValue(
	new Css.Num(listItemCount),
	0,
	);
	}

[MurakamiShinyu]

I found that changing ua-list-item to list-item in the code does not solve the issue. The problem is not that simple.

CSS counter is implemented in Vivliostyle.js, not using browser's native CSS counter. However, Vivliostyle.js uses browser's native list style with display: list-item for list items, so the browser's native CSS counter is used for list items. This inconsistency causes the issue.

To solve this issue, Vivliostyle.js needs to rework the implementation of lists and counters. This is not a simple task.

Related feature requests:

• Support the @counter-style CSS at-rule #731
• Support the ::marker CSS pseudo-element #732

[yamahige]

It's Okay, thanks for your investigation.

This is not a simple task.

I totally agree! I'm struggling with lists these days, too.

[MurakamiShinyu]

I was able to make a quick fix. PR #1397.

Test: https://vivliostyle-git-fix-issue1391-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/yamahige/4e3e2bac575acc84fde84aeda5d711b9/raw/dcd73500606634a5aacf25ac8845852928a85b47/list-item-counter.html

Screenshot: