vivliostyle/vivliostyle.js

CSS implicit list-item counter

Closed this issue · 4 comments

yamahige commented

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
Vivliostyle

Chrome browser:
chrome

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 commented

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 commented

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:

yamahige commented

It's Okay, thanks for your investigation.

This is not a simple task.

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